Design တစ္ခုတြင္ အေရးပါလွေသာ Typography အေၾကာင္း

Design တစ္ခုတြင္ အေရးပါလွေသာ Typography အေၾကာင္း google

အကၡရာစာလုံးစတုိင္လ္ဟာ UI web design အတြက္ အေရးပါအရာေရာက္ေပမဲ့ အၿမဲလုိလုိ သိပ္အေရးလုပ္မခံရဘူး။

တကယ္ေတာ့ အကၡရာပုံစံ Typography ဟာ အၿမဲထည့္စဥ္းစားေပးဖုိ႔ လုိတယ္။

တကယ္ေတာ့ web design မွာသာ အေရးႀကီးတာ မဟုတ္ပါဘူး။ မ်က္လုံးေတြနဲ႔ ျမင္ရေတြ႕ရတဲ့ ေဖာ္ျပမႈတုိင္းမွာ အကၡရာစာလုံး ပုံစံက အေရးႀကီးပါတယ္။ ကုိယ္တုိင္က ဒီဇုိင္းနာ တစ္ဦး မဟုတ္ေပမဲ့လည္း အခုတင္ျပမယ့္ အကၡရာစာလုံးပုံစံ စတုိလ္အေၾကာင္း သိထားရင္ မမွားဘူး။ ဘာလုိ႔လဲဆုိေတာ့ ဒီဇုိင္းမွာ စာပါလာၿပီဆုိတာနဲ႔ အကၡရာစာလုံးစတုိင္လ္ကိစၥက အနည္းနဲ႔အမ်ား အေရးပါသြားၿပီ။

အခုတင္ျပမွာကေတာ့ Myanmar ICT Guide ရဲ႕ ပရိသတ္အတြက္ဆုိေတာ့  website ရဲ႕ UI (user interface) design ကုိ အာ႐ုံစုိက္ၿပီး ေရးသားတင္ျပသြားမွာ ျဖစ္ပါတယ္။

အကၡရာစတုိင္လ္ဆုိတာက အေတာ္သိမ္ေမြ႕တယ္။ ဒီေတာ့ သတိမမူ ဂူမျမင္ ဆုိသလုိ အမႈမထားမိၾကဘူး။ ဖတ္လုိ႔ရရင္ ၿပီးတာပဲ ဆုိတဲ့ မူနဲ႔ပဲ လုပ္ကုိင္လုိက္ၾကတယ္။

တကယ္ပဲ အေရးမႀကီးတာလား

ရုိးရုိးရွင္းရွင္း ေမးခြန္းတစ္ခုေလာက္ ေမးၾကည့္ၾကရေအာင္။

၀က္ဘ္ဆုိက္ျဖစ္ျဖစ္ အက္ပ္ျဖစ္ျဖစ္ ရည္ရြယ္ခ်က္က ဘာလဲ။ အသိေပးခ်င္တာေတြ လက္ဆင့္ကမ္းေပးလုိက္ဖုိ႔ မဟုတ္ဘူးလား။ အဲဒီလုိ အသိေပး ျပသခ်င္တာေတြကုိ ဖရိန္တစ္ခု အထဲမွာ ေနရာခ်ၿပီး ထည့္ေပးလုိက္ဖုိ႔သက္သက္ပဲလား။ UI designer ေတြက အသိေပးခ်င္တာ ျပသခ်င္တာေတြ တစ္ခုစီကုိ စီစဥ္ခင္းက်င္းၿပီး အဓိပၸာယ္ရွိရွိ ျဖစ္ေအာင္ လုပ္ေပးဖုိ႔ဆုိတဲ့ ရည္ရြယ္ခ်က္ ထားရွိတာမဟုတ္လား။

ၾကည့္တဲ့သူကုိ လွမ္းၿပီး စကားေျပာေပးေနတာေတြဟာ စာလုံးေတြ စာသားေတြ ျဖစ္ပါတယ္။

စာမထည့္လည္း သုံးတဲ့သူေတြက သိပါတယ္ဆုိၿပီး စာေတြ မထည့္ေပးရင္ ဘယ္လုိေနမလဲ။

 

၀က္ဘ္ဆုိက္တစ္ခုကုိ စာေတြ ျဖဳတ္ၿပီး နမူနာတစ္ခုေလာက္ ၾကည့္ၾကရေအာင္။

 

ၾကည့္သူ user ကုိ စကားလွမ္းေျပာေပးေနတဲ့ စာလုံးေတြနဲ႔ ပတ္သက္လုိ႔ မ်ားမ်ားစားစား ကစားေပးလုိ႔ မရဘူး။

ပုံေတြက်ေတာ့ အလင္းအေမွာင္ ကစားလုိ႔ရတယ္။ အေရာင္ေတြ ကစားလုိ႔ရတယ္။ စာလုံးေတြမွာ အဲဒီလုိ ကစားေပးထားလုိက္ရင္ ဖတ္ရႈရသူ ေခါင္းေတြ မူးကုန္လိမ့္မယ္။

ဒီေတာ့ ကစားေပးလုိ႔ရတာ သိပ္မရွိလုိ႔ လုပ္တတ္ဖုိ႔ လြယ္တယ္။ ထိထိမိမိျဖစ္တဲ့  typography ျဖစ္ဖုိ႔က်ေတာ့ သိပ္မလြယ္ေတာ့ဘူး။

စာသားကုိ ပုံစံခ်ရင္ အဓိကအားျဖင့္ ကစားလုိ႔ ရတာ အခ်က္ႀကီး  ၄ခ်က္ ရွိတယ္လုိ႔ သြန္သင္ၾကတယ္။

၁။ စာလုံးသြင္ျပင္ Typeface

၂။ စာလုံးအထူအပါး Weight

၃။ အကၡရာႏွစ္ခုၾကား အကြာအေ၀း Tracking (Words spacing)

၄။ စာေၾကာင္း ႏွစ္ခုၾကား အကြာအေ၀း Leading (Line spacing)

ဖန္တီးလုိက္တဲ့ UI တစ္ခု ဆရာက်ဖုိ႔ professional ဆန္ဖုိ႔အတြက္ဆုိရင္ ထူးျခားေပၚလြင္ေနဖုိ႔အတြက္ဆုိရင္ အဲဒီ အခ်က္ႀကီး ၄ ခ်က္ကုိ ထည့္သြင္းစဥ္းစားႀကံဆေပးဖုိ႔ လုိပါလိမ့္မယ္။

 

၁။ စာလုံးသြင္ျပင္မ်ား Typefaces ကုိ သိျခင္း

 

ဆီေလ်ာ္ေကာင္းမြန္တဲ့ font တစ္မ်ဳိးကုိ ေရြးခ်ယ္ႏုိင္ဖုိ႔ဆုိတာ ခင္ဗ်ား လုပ္ကုိင္ေနတဲ့ ဒီဇုိင္း ဟန္က်ပန္က် ျဖစ္မွာလား ႏုံခ်ာသြားမွာလားဆုိတာအတြက္ အခရာအက်ဆုံးလုိ႔ ဆုိရပါမယ္။

 

Font တစ္မ်ဳိးတည္းနဲ႔ အလုပ္မၿပီးဘူး။ ဒီေတာ့ fonts ေတြကုိ တြဲသုံးၾကတယ္။ ဘယ္ fonts ေတြကုိ တြဲသုံးလုိက္ရင္ တင့္တင့္တယ္တယ္ ျဖစ္သြားသလဲဆုိတာ အေတြ႕အႀကံဳအရ သိေနတာလည္း ရွိမယ္။ စိတ္ထဲ အလုိလုိ သိလုိက္တာမ်ဳိးလည္း ရွိမယ္။ တျခား၀က္ဘ္ဆုိက္ေတြထံမွ အတုခုိးၿပီး သိတာလည္း ရွိမယ္။ က်က်နန ပညာသင္ခဲ့ရသူျဖစ္လုိ႔ ပညာခန္းအရ သိတာလည္း ရွိမယ္။ fonts ေတြကုိ တြဲဖုိ႔ ေရြးခ်ယ္တဲ့အခါ  x-height ကုိ အေျခခံၿပီး ေရြးရမယ္ဆုိတာမ်ဳိးလုိ သတ္မွတ္ခ်က္အရ သိတာလည္း ရွိမယ္။

ေလ့လာခ်င္တယ္ဆုိရင္ Google Fonts  ေတြကုိ လုိက္ဖက္ညီညီ တြဲေပးဖုိ႔ ကူညီေပးတဲ့ https://fontpair.co မွာ ေလ့လာလုိ႔ရတယ္။ https://www.typewolf.com/ မွာလည္း fonts ေတြ တြဲဖုိ႔အတြက္ FONT RECOMMENDATIONS & LISTS  အႀကံျပဳေပးထားတာေတြ ရႏုိင္တယ္။

Fonts စတုိင္လ္ေတြကုိ ၾကည့္႐ႈေရြးခ်ယ္ခ်င္ရင္ https://www.fonts.com/browse ကုိ သြားလုိက္ပါ။

 

၂။ စာလုံးအထူအပါး Weight

 

အထူအပါး နားလည္ဖုိ႔ အေရးႀကီးတယ္။

ပထမစည္းမ်ဥ္းက

စာလုံး အထူအပါး အမ်ဳိးမ်ဳိး ရွိေနတာမွာ ႏွစ္မ်ဳိး သုံးမ်ဳိးထက္ ပုိၿပီး မသုံးပါနဲ႔။

Fonts ေတြမွာ မိသားစု၀င္ fonts ေတြ အမ်ဳိးမ်ဳိး အဖုံဖုံ ရွိေနတာ အကုန္လုံး ပါေနေအာင္ သုံးဖုိ႔ မလုိပါဘူး။ ၂ မ်ဳိး ၃ မ်ဳိးေလာက္ပဲ သုံးသင့္ပါတယ္။

တစ္မ်ဳိးကုိ ပုံမွန္အတြက္ သုံးမယ္။

ေနာက္တစ္မ်ဳိးကုိ ေခါင္းစည္းအတြက္ သုံးမယ္။

ေနာက္တစ္မ်ဳိးကုိ ျပဴးတူးၿပဲတဲ ေခါင္းစည္းမ်ဳိးအတြက္ သုံးမယ္။

 

ဒုတိယစည္းမ်ဥ္းးက

အထူအပါးကုိ တစ္ခုေက်ာ္ ေရြးသုံးလုိက္တာ ျဖစ္ပါတယ္။

စာပုိဒ္အတြက္ regular ကုိ သုံးမယ္။ ေခါင္းစဥ္အတြက္ medium ကုိ အသုံးမျပဳဘဲ ေက်ာ္လုိက္မယ္။ semibold ကုိ သုံးမယ္။ ပုိႀကီးတဲ့ ေခါင္းစည္းအတြက္ bold ကုိ ေက်ာ္ၿပီး heavy ကုိ သုံးမယ္။

ရည္မွန္းခ်က္က အျမင္မွာ heavy ျဖစ္ေနဖုိ႔ ျဖစ္တာကုိ သတိရပါ။ တျခား စာသားေတြနဲ႔ ဘယ္လုိ ကြဲျပားေအာင္ လုပ္ေပးထားဖုိ႔ ျဖစ္ပါတယ္။ ဒီေတာ့ အထူအပါး ကြဲျပားေပးလုိက္တာအျပင္ အေရာင္ကြဲျပားတာ ထက္ေအာက္ေဘး၀န္းက်င္မွာ ေနရာလြတ္ ပုိမ်ားမ်ား ထားေပးတာေတြနဲ႔လည္း တြန္းတင္ေပးဖုိ႔ လုိပါတယ္။

တတိယစည္းမ်ဥ္းက

မည္းနက္ၿပီး ထူလြန္းတာကုိလည္း မေရြးနဲ႔ ။

ဆံခ်ည္မွ်င္လုိ ပါးလြန္းတာကုိလည္း မေရြးနဲ႔ ။

၀က္ဘ္ဆုိက္ကုိ ဖုန္းပြတ္ၿပီး ၾကည့္တဲ့ေခတ္မွာ Hairline စာသား သုံးစြဲျခင္းကုိ ေရွာင္သင့္ပါတယ္။ ၿပီးေတာ့ font အေတာ္မ်ားမ်ားမွာ hailline အပါးမ်ဳိးကုိ ေရးဆြဲ မေပးထားဘူး။ ဒီေတာ့ ေရြးခ်ယ္မႈမွာ အကန္႔အသတ္ေတြ ရွိေနတယ္။

မည္းမည္းထူထူ က်ျပန္ေတာ့ ေနရာယူတာ မ်ားလြန္းေနလိမ့္မယ္။ ၿပီးေတာ့ အက်ည္းတန္ေနတတ္တယ္။ ဒီေတာ့ hairline နဲ႔ မည္းထူ အစြန္းတရားႏွစ္ပါးကုိ ေရွာင္ၾကဥ္ဖုိ႔ တုိက္တြန္းလုိပါတယ္။

 

၃။ အကၡရာႏွစ္ခုၾကား အကြာအေ၀း Tracking (Words spacing)

 

Tracking နဲ႔ Kering မသဲကြဲတဲ့သူေတြ ရွိတယ္။

Tracking က စာလုံးတစ္လုံးနဲ႔ တစ္လုံးအၾကား အဟကုိ ေျပာခ်င္တာ ျဖစ္တယ္။

Kering က စာလုံးမွာ ပါ၀င္ေနတဲ့ အကၡရာတစ္ခုနဲ႔ တစ္ခုအၾကား အဟကုိ ေျပာခ်င္တာ ျဖစ္တယ္။

Font ေရးတဲ့အခါ Kerning ကုိ အကၡရာစာလုံးတုိင္းအတြက္ ထည့္သြင္းေပးထားၿပီးသား ျဖစ္ပါတယ္။ ဒါေပမဲ့ အတုိးအေလွ်ာ့ လုပ္ခ်င္ရင္ လုပ္လုိ႔ရတယ္။ ဒါေပမဲ့ ဘယ္ေတာ့မွ မလုပ္ပါနဲ႔။ သူ႔နဂုိအတုိင္း ထားတာ အေကာင္းဆုံးပဲ။

ဒီေတာ့ tracking ကုိပဲ ကစားပါ။

Font ကုိ ေရြးရင္ tracking ကုိ ကစားၾကည့္ပါ။ တခ်ဳိ႕ font ေတြက ေဘးဘီကုိ ခပ္က်ယ္က်ယ္ ေနရာယူတယ္။ ဒီေတာ့ tracking နဲ႔ စာလုံးကုိ ဆြဲစိၾကည့္ပါ။

tracking နဲ႔ ဆြဲက်ဳံ႕ၿပီး ရတဲ့ေနရာေလးထဲမွာ ေနာက္ထပ္ အကၡရာ ေလးငါးလုံး ျဖည့္ထည့္လုိ႔ ရသြားတာမ်ဳိး ရွိပါတယ္၊ Font အမ်ဳိးအစား ေျပာင္းလဲသုံးစြဲလုိက္လုိ႔ စာလုံးေတြ ပုိ၀င္ဆန္႔သြားတာေတြလည္း ရွိပါတယ္။ ဥပမာ condensed fonts ေတြ Narrow fonts ေတြကုိ ေျပာင္းလဲသုံးစြဲေပးလုိက္တာ ျဖစ္ပါတယ္။

 

၄။ စာေၾကာင္း ႏွစ္ခုၾကား အကြာအေ၀း Leading (Line spacing)

 

စာသားေတြ အမ်ားအျပား ေဖာ္ျပေပးရတဲ့ web page မ်ဳိးေတြမွာ leading ကုိ ဂ႐ုစုိက္ဖုိ႔ လုိတယ္။

စည္းမ်ဥ္းက ေခါင္းစည္းေတြအတြက္ဆုိရင္ leading ကုိ ေလွ်ာ့ေပးရမယ္။ ေခါင္းစဥ္လုိ စာလုံးမႀကီးတဲ့ စာလုံးေတြ သုံးထားတဲ့ စာပုိဒ္ေတြမွာ leading ကုိ တုိးေပးထားရမယ္။ ၾကဲေပးထားရမယ္။ ဆုိၾကပါစုိ႔ ေခါင္းစည္းအတြက္ font အရြယ္အစား 72 ကုိ သုံးထားတယ္ဆုိရင္ ထက္ေအာက္ စာေၾကာင္းႏွစ္ခုၾကား အေတာ္ဟေနလိမ့္မယ္။ ဒီေတာ့ ေလွ်ာ့ခ်ေပးလုိက္မွ က်စ္က်စ္လစ္လစ္ ၾကည့္ေကာင္းသြားမယ္။

 

ထည့္သြင္းေဖာ္ျပေပးစရာေတြကုိ ေနရာခင္းက်င္းၿပီးတဲ့အခါ တစ္ျပင္လုံးကုိ ၿခံဳငုံၾကည့္လုိက္ပါ။ စည္းစည္းလုံးလုံး ညီညီညႊတ္ညႊတ္ ရွိရဲ႕လား။ စာေၾကာင္းေတြ က်ဳိးက်တာ အဆင္ေျပရဲ႕လား။ အစိပ္အက်ဲေတြ ဟန္က်ရဲ႕လား။ တစ္ေျပးညီ ျဖစ္ေနရဲ႕လား။ က်ပ္သိပ္ေနတဲ့ ေနရာေတြ ရွိေနလား။ စာပုိဒ္ေတြမွာ leading က ခပ္စိပ္စိပ္ ျဖစ္ေနေပမဲ့ စာပုိဒ္ေတြကုိ ခင္းက်င္းထားသုိထားတာ ၾကားအကြာအေ၀းေတြ မ်ားလြန္းေနလုိ႔ ေခ်ာင္ေခ်ာင္ႀကီး ျဖစ္ေနသလား။ အဲဒီလုိဆုိရင္ စာပုိဒ္ထဲမွာ စာေၾကာင္းေတြ အသက္ရွဴေခ်ာင္ေအာင္ leading ကုိ က်ဲေပးၿပီး စာပုိဒ္ေတြ ေနရာယူတာ ပုိမ်ားသြားေအာင္ ကစားေပးလုိက္ျခင္းျဖင့္ စာပုိဒ္ေတြအၾကား ေ၀းကြာလြန္းေနတာ ေလ်ာ့က်ေအာင္ လုပ္ေပးလုိက္ပါ။

ေခါင္းစဥ္အႀကီးစားေတြ ပါေနရင္ ေဘးဘီမွာ ေနရာလြတ္ေတြ ဖန္တီးေပးထားဖုိ႔ လုိတယ္။ ဒါမွ ေခါင္းစဥ္က တသီးတျခား ျဖစ္ၿပီး ခန္႔ထည္ေနမယ္။ အဲဒီအတြက္ ေနရာလြတ္ေတြ တမင္ထည့္ေပးထားရဲ႕လား။

ICT Guide

Source: Why UI web design is all about typography ( AYADI GHAITH )


Read 115 times
Rate this item
(0 votes)