টাইপোগ্রাফিক হায়ারার্কির ফাউন্ডেশন ও বেস্ট প্র্যাকটিসগুলো শিখে নিন এখনি
-----লার্ন ডিজাইন//
![[svg-to-png output image]](https://lh5.googleusercontent.com/urUeZuy2yNutZy-1d3f2ElBE0XHYXrkMmEaT4dK-cQL-d7PnKVrStVPMatRcqvdtrPoc0OOmXguUg1yj091AuALmwUh9zCelQtHbvHDe1YD-bPs7G4WZVDp4pXD4ixY-6TNt4px2jN3SlJ9QCGJkYA)
“আপনি কি কখনও এমন আর্টিকেল পড়ার চেষ্টা করেছেন যা কেবলমাত্র একঘেয়ে লেখা আর লেখা? কোন হেডিং নেই, কোন টাইটেল নেই, কোন ক্যাপশন নেই, শুধু লেখা আর লেখা। এটা পড়া খুব কঠিন, তাই না? বাজি ধরে বলা যায় এই ধরণের লিখা আপনি ইগনোর করেছেন প্রতিবার। কারণ এ ধরণের একঘেয়ে লেখা আমাদের চোখে চাপ তৈরি করে এবং কোনটা বেশি গুরুত্বপূর্ণ আর কোনটা কম গুরুত্বপূর্ণ তা খুঁজে পেতে কষ্ট হয়।
তাই এই দুর্বোধ্যতা দূর করার জন্য আসলে টাইপোগ্রাফিক হায়ারার্কি জানার কোনো বিকল্প নেই।
টাইপোগ্রাফিক হায়ারার্কি আসলে কী?
টাইপোগ্রাফিক হায়ারার্কি মূলত রিটেন কন্টেন্ট ডিজাইন করার সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলির মধ্যে একটি। একটি হায়ারার্কি বা শ্রেণিবিন্যাস ছাড়া, আপনার মনে হবে একটা “wall of text” পড়ছেন যা আপনার পড়ার প্রসেসটা কঠিন করে ফেলবে।
একটি কার্যকর টাইপোগ্রাফিক হায়ারার্কি তৈরি করার জন্য কয়েকটি ইলিমেন্ট জড়িত থাকে যেগুলিকে একত্রিত করা হলে, যেকোনো রিটেন কন্টেন্ট এর জন্য একটি দৃশ্যমান আকর্ষণীয় কাঠামো তৈরি হয়। ফলে তা সুপাঠ্য হয়।
টাইপোগ্রাফিক হায়ারার্কির মৌলিক উপাদানগুলির মধ্যে রয়েছে টাইপ সাইজ, টাইপফেস এবং কম্পোনেন্ট ওয়েট (Weight), কালার, ক্যাপিটালাইজেশন এবং স্টাইল এর মতো জিনিস। এদের প্রত্যেকটিই পাঠযোগ্যতার জন্য খুবই প্রয়োজনীয়।
টাইপফেস সাইজ
টাইপোগ্রাফিক হায়ারার্কি তৈরি করার সবচেয়ে সুনির্দিষ্ট উপায় হল বিভিন্ন ইলিমেন্টের জন্য বিভিন্ন ফন্ট সাইজ ব্যবহার করা। বড় টাইপ সাইজ সাধারণত শিরোনাম এবং শিরোনামের মতো জিনিসগুলির জন্য ব্যবহৃত হয়, আবার ছোট টাইপটি বডি কপি, ক্যাপশন এবং মেটাডাটার জন্য ব্যবহৃত হয়।
![[webp-to-jpg output image]](https://lh5.googleusercontent.com/MeyTytkukunW9-UzvFAdxDXR00Qqjujiel24YA7oPokSMqcIHWgZc7o_5Rxfenkc_-SxtuW4-9FJPHyQ5qbsJTAtnA18Ya1hMTqaVLa2tEZdHLggs8dqVX6Res5eodMmIh-rOLfx38Xt2uBmDGNRGg)
আসলে ফন্ট বড় করলেই যে তা জোস হয়ে যাবে তাও না, এক্ষেত্রে এক্সপার্ট মতামত হচ্ছে গোল্ডেন রেশিও বা ফিবোনাচ্চি সিকুয়েন্স ডিজাইনকে আরো প্রাণবন্ত ও নান্দনিক করে তোলে।
এছাড়াও একটি ক্লাসিক টাইপোগ্রাফিক স্কেল রয়েছে যা বহু শতাব্দী ধরে টাইপোগ্রাফিক ডিজাইনে ব্যবহৃত হয়ে আসছে যা বিভিন্ন ওয়ার্ড প্রসেসিং সফটওয়্যারে বিল্ট ইন অবস্থায় থাকে। এতে ৬ pt থেকে ১৪৪ pt পর্যন্ত থাকে।
একটা ভুল প্রায়শই হয়ে থাকে যে, প্রিন্টেন্ড কপির জন্য ১২ pt ভালো হলেও, ডিজিটাল কপির জন্য তা পড়া কষ্টকর। তাই ডিজিটাল কপিতে ক্ষেত্রবিশেষে ফন্ট সাইজ ১৪-২৪ pt হলে ভালো হয়।
উদাহরণস্বরূপ, যদি আপনি একটি ১৮ পিক্সেল বডি টেক্সট সাইজ দিয়ে শুরু করেন, আপনি আপনার শিরোনাম বা H1 শিরোনামের জন্য একটি ৩৫ পিক্সেল ফন্ট ব্যবহার করতে চাইতে পারেন।
একাধিক টাইপফেসের ব্যবহার
আপনি বিভিন্ন ইলিমেন্টের জন্য বিভিন্ন ফন্ট ব্যবহার করে টাইপোগ্রাফিক হায়ারার্কি আরো জোস করতে পারেন। টাইপফেস একত্রিত করা অনেক নতুন ডিজাইনারের জন্য চ্যালেঞ্জিং হতে পারে, তবে কিছু জিনিস মনে রাখলে বিষয়টা সহজ হয়ে যাবে।
![[webp-to-jpg output image]](https://lh4.googleusercontent.com/54SN3Foq0M8opguHLoTz-Y14pLJlJumeK6-eBcQpcHBOKJmAiHEoNF3GRit17t5HX_NlzH6n7mriUgjFdfHNwQnBqtoIT_UQsNmGvZQgUvhhgI7yX8CKJGzS3xJVSWineXtSHmtmlLMF5Hn14CrnoA)
টাইপফেসের কনট্রাস্ট সম্পর্কে সচেতন থাকতে হবে। উল্টোপাল্টা ফন্ট ব্যবহারের ফলে একট আফন্ট আরেকটা ফন্টকে পিছিয়ে ফেলতে পারে। ফলে ডিজাইনের গ্রহনযোগ্যতা কমে যেতে পারে। উদাহরণস্বরূপ বলা যায়, আপনি যদি একটি ফন্টকে খুব মোটা স্ট্রোকের সাথে এবং অন্যটি খুব পাতলা স্ট্রোকের সাথে যুক্ত করেন, তবে প্রথমটি সম্ভবত দ্বিতীয়টিকে ডমিনেট করবে।
আবার লেটারফর্মেও মনোযোগ দিতে হবে। যদি একটা লেটারফর্ম বেশি চাপা আর অন্যটা বেশি প্রশস্ত হয় দেখতে কেমন বিদঘুটে লাগবে আপনিই ভাবুন। একটা ব্যালেন্স রাখা লাগবে।
লেটার শেপটাও বুঝেশুনে সিলেক্ট করতে হবে। জ্যামিতিক শেইপগুলো এক্ষেত্রে ভালো পারফর্ম করে।
নতুনরা বিষয়টাকে সহজে আয়ত্ত্ব করার জন্য শুরুতে দুটি ভিন্ন ক্লাসিফিকেশন ট্রাই করতে পারেন। যেমন একটি Serif ও অন্যটি Sans-serif এভাবে।
শুধু ভিন্ন টাইপফেস ব্যবহার করলেই সবসময় হয়না। হেডারের সাইজ, বডি টেক্সটের সাইজের তারতম্য লেখাকে আরো জোস হায়ারার্কিতে পৌঁছে দেয়।
ক্যাপিটালাইজেশন, রঙ বিন্যাস, ওয়েট এবং স্টাইল
(Capitalization, Color, Weight, and Style)
টাইপোগ্রাফিক হায়ারার্কি তৈরির চূড়ান্ত পদ্ধতি হল ক্যাপিটালাইজেশন, রঙ, ওয়েট বা টাইপফেসের স্টাইল পরিবর্তন করে। এই উপাদানগুলির যে কোনও একটি হেডার বা অন্যান্য ইলিমেন্টকে সুন্দরভাবে আলাদা করে ফুটিয়ে তুলতে পারে।
![[webp-to-jpg output image]](https://lh3.googleusercontent.com/YVNOIa0BYW3VBIufQ2rkySw-va5b6NI6z8XRb01cguXEWDob10NYtIU-RwWR44XtkRUEFtRdEioqUlKyOpQpjvg3i3ZIrDU5KMMLFT1wequCSYpZU8VrzqlIlsCAKjSVBuQGks38uOliY6gIXNsSyQ)
একটি হেডারের জন্য অল-ক্যাপ (সব ক্যাপিটাল লেটার) ব্যবহার করা এটিকে পার্শ্ববর্তী টেক্সট থেকে আলাদা করে তোলে। যদিও অল-ক্যাপ থাকলে বডি টেক্সটের বড় ব্লকগুলো পড়া কঠিন হতে পারে হিজিবিজি লাগতে পারে। তবে হেডারের জন্য এটা ভালো একটা স্টাইল।
টাইপফেসের রঙ পরিবর্তন করা টেক্সটের গুরুত্বের উপর নাটকীয় প্রভাব ফেলতে পারে। ধরুন, টেক্সট কালার যদি গ্রে (ধূসর) করেন তাহলে ডিজাইন রিডিং ফ্রেন্ডলি হবেনা। এই কালার সাধারণত মেটাডাটা বা ছবির ক্যাপশনে দেয়া হয়। অতটাও ইম্পরট্যান্ট না।
একটা কন্ট্রাস্ট তৈরি করার জন্য অনেক সময় ভাইব্রেন্ট কালার ব্যবহার করতে হয়। এ কারণেই সাধারণত হাইপারলিংকের টেক্সট উজ্জ্বল-নীল হয়।
আরেকটি গুরুত্বপূর্ণ বিষয় হচ্ছে টেক্সট ওয়েট। ভারি বা হালকা। যেমন বোল্ড ও ব্ল্যাক/ডার্ক কালার ওয়েট বাড়িয়ে দেয়। তবে বড় টেক্সট বডিতে ওয়েট ম্যানেজমেন্ট বুঝেশুনবে করতে হবে।
টাইপোগ্রাফিক হায়ারার্কি তৈরির জন্য স্টাইলিং হল চূড়ান্ত পদ্ধতি। হেডারে বা সাব-হেডারে ইটালিক করা যেতে পারে অন্য টেক্সট থেকে আলাদা করার জন্য।
এবার সব একত্রে চেষ্টা করার পালা
(Capitalization, Color, Weight, and Style)
টাইপোগ্রাফিক হায়ারার্কিতে আসলে একেবারে one-size-fit-all সলিউশন নেই। ডিজাইনারগণ আসলে তাদের উদ্দেশ্য ও প্রজেক্টের চাহিদা অনুযায়ী তা বিভিন্নভাবে ব্যবহার করতে পারেন।
নতুন হিসেবে বডি টেক্সট ও স্টাইলিং দিয়ে শুরু করা যেতে পারে। এটাই মূলত টাইপোগ্রাফির বেজ-লাইন। হেডার সাইজ (H1-H6) ভালোভাবে বুঝে সঠিকভাবে সঠিক হেডার ব্যবহার শিখতে হবে।
ধরাযাক আপনি একটি টেক্সট ডকুমেন্ট লিখার জন্য বডি টেক্সটের জন্য ১৬ পিক্সেল ব্যবহার করবেন। আপনি ৪টি হেডার লেভেল নিয়ে কাজ করবেন (H1 – H4). সাথে ক্যাপশন থাকবে এবং লেখকের বাইলাইন লেখার জন্য মেটাডাটা টেক্সট থাকবে।
এই উদাহরণ থেকে বুঝতে পারবেন টাইপোগ্রাফিক হায়ারার্কিতে কিভাবে আসলে ফরম্যাট করতে হবে। আমরা এখানে ২ ধরণের ফন্ট ব্যবহার করব হেডিং, বডি টেক্সট ও মেটাডাটার জন্য। হেডিং ও মেটার জন্য Evolve Sans ও বডি টেক্সটের জন্য Cardo ফন্ট ব্যবহার করব।
![[webp-to-jpg output image]](https://lh3.googleusercontent.com/ijxWt_HgGBhh_iS4c5tzhQrr_tMu4Ot_YHrcNNsfq7fssKrOzXXTJSxKNHBoreaF8xgu8ra3-HeexT8rujePkU60Ivi1DhjtAJmGyUL3c5P-YWaQW4x9al26tFlF5Y5qZmmppZ2PY954fDByG7VDaA)
Evolve Sans ও Cardo ফন্ট দুটি ব্যবহারের ফলে একটা হায়ারার্কি তৈরি হয়েছে। কারণ তারা একজন Sans-serif অন্যটি Serif.
প্রথম ও দ্বিতীয় স্তরের হেডারের জন্য ক্যাপিটাল লেটার রাখা হয়েছে কন্ট্রাস্ট তৈরি করার জন্য। বডি টেক্সটের জন্য ১৬ পিক্সেল, H2 এর জন্য ২৪ পিক্সেল, H1 এর জন্য ৪৮ পিক্সেল ও মেটাডাটায় ১০ পিক্সেল করা হয়েছে। H3 কে বডি টেক্সটের সাইজেই রাখা হয়েছে কিন্তু আলাদা করার জন্য বোল্ড করা হয়েছে।
দেখতেই পাচ্ছেন উপরের সব কৌশলগুলো একত্রিত করার ফলে একটা সুন্দর সুপাঠ্য লে-আউট তৈরি হয়েছে।
আসলে ইফেক্টিভ টাইপোগ্রাফিক হায়ারার্কিতে এই কৌশল, প্রিন্সিপাল এর পাশাপাশি এক্সপেরিমেন্টেরও প্রয়োজন। প্রচুর প্র্যাক্টিস ও ট্রায়াল-এন্ড-ইরোর এর মাধ্যমে আসলে প্রকৃত হায়ারার্কি এক্সপার্ট হওয়া সম্ভব।
কি? ডিজাইন হায়ারার্কি সম্পর্কে জানলেন তো? Now Just Practice!
এখনই শুরু করে দিন আপনার UI/UX ডিজাইন জার্নিটা। ভালো ডিজাইন ফাউন্ডেশন, ডিজাইন সেন্স, কোনো একটি স্পেসিফিক নিশ- এ দক্ষ হবার এখনই তো সময়।
হ্যাপি ডিজাইনিং…