টাইপফেস এবং ফন্টের অ আ ক খ

টাইপোগ্রাফির টার্মিনোলোজি যা না জানলে আপনার UX ডিজাইন শেখা অস্পূর্ণই থেকে যাবে

-----লার্ন ডিজাইন//

“আমরা টাইপফেস এবং ফন্টের সাথে প্রতিনিয়ত ইন্টারঅ্যাক্ট করি — যেমন আপনি এই মুহূর্তে উভয়ের সাথে ইন্টারঅ্যাক্ট করছেন৷ টাইপোগ্রাফির টার্মিনোলোজি বোঝা UX ডিজাইনের একটি গুরুত্বপূর্ণ অংশ।

টাইপফেস এবং ফন্ট কি?

UX ডিজাইনের সাথে টাইপফেস ও ফন্টের কন্সেপ্টস কীভাবে কাজ করে সে সম্পর্কে পুঙ্খানুপুঙ্খভাবে বোঝা জরুরী। কেননা সঠিক টাইপফেস এবং ফন্ট নির্বাচন করতে পারা সরাসরি রিডেবিলিটি এবং ইমোশনের উপর বিশাল প্রভাব ফেলতে পারে। তাই ভুল পছন্দ ব্যবহারকারীর অভিজ্ঞতার উপর ক্ষতিকর প্রভাব ফেলতে পারে।

টাইপফেস এবং ফন্টের মধ্যে পার্থক্য কী?

যদি আমরা টাইপফেসকে প্যারেন্ট ধরি, তাহলে ফন্ট হচ্ছে তাদের সন্তান। অথবা আমরা তাদেরকে আমাদের ওয়ার্ড্রোবের কাপড়ের মতো চিন্তা করতে পারি। যদি টাইপফেস হয় পোশাক, যেমন: ড্রেস, প্যান্ট বা শার্ট। তাহলে ফন্ট হচ্চে পোষাকের ধরন, যেমন: একটি কালো ড্রেস বা কার্গো প্যান্ট।

আমরা যখন হেলভেটিকা ​​বা টাইমস নিউ রোমান সম্পর্কে কথা বলি, আমরা আসলে টাইপফেসকে বুঝিয়ে থাকি তখন। আর যখন আমরা বলি 12 pt. হেলভেটিকা ​​বা 14 pt. টাইমস নিউ রোমান বোল্ড, তখন আমরা ফন্টকে বুঝিয়ে থকি। ফন্ট হলো টাইপফেসের একটি নির্দিষ্ট ওয়েইট, স্টাইল এবং/অথবা সাইজ।

টাইপফেস ধরণ

এক্সসেপশনাল ইউজার এক্সপেরিয়েন্সেস তৈরির জন্য টাইপফেস ধরণ স সম্পর্কে জানা গুরুত্বপূর্ণ। আপনি কাকে জিজ্ঞাসা করছেন তার উপর নির্ভর করে, পাঁচ থেকে আট (বা তার বেশি) ধরণের টাইপফেস রয়েছে।

সেরিফ (Serif) টাইপফেসে অক্ষরের শেষে সামান্য ডেকোরেটিভ স্ট্রোক (যাকে সেরিফ বলা হয়) থাকে। সেরিফ প্রাচীনতম ধরণের ফন্টগুলির মধ্যে একটি।

সেরিফ (Serif) খুবই ঐতিহ্যবাহী এবং মূলত প্রথম দিকের প্রিন্ট ম্যাগাজিন দ্বারা জনপ্রিয় হয়েছিল। তাদের সমৃদ্ধ ইতিহাস এবং দীর্ঘস্থায়ী ব্যবহারের কারণে, তারা ব্যবহারকারীদের ক্লাস, রোমান্স এবং সফিস্টিকেশনের অনুভূতি দিতে পারে। এমন পণ্য বা ব্র্যান্ড যারা বাজারে তাদের একটি বিশ্বস্ত, নির্ভরযোগ্য এবং ফর্মাল ইমেজ তৈরি করতে চায়, তাদের জন্য সেরিফ দুর্দান্ত৷

সান-সেরিফ (Sans-serif) টাইপফেস আক্ষরিক অর্থে, "সেরিফ ছাড়া" টাইপফেস, অর্থাৎ অক্ষরের শেষে ডেকোরেটিভ স্ট্রোক থাকবে না। যদিও এটি তুলনামূলক মডার্ন, তবে প্রথম সান-সেরিফ টাইপফেসটি ছিল ক্যাসলন মিশরীয় (Caslon Egyptian), ১৮১৬ সালে উইলিয়াম ক্যাসলন চতুর্থ (William Caslon IV) করেন। টাইপফেসটি প্রিন্ট বিজ্ঞাপনে জনপ্রিয় হয়ে ওঠে এবং প্রায়শই সেরিফ টাইপফেসের তুলনায় সান-সেরিফ টাইপফেসকে অন-স্ক্রীনে বেশি পাঠযোগ্য বলে মনে করা হয়, যদিও এ নিয়ে বেশ বিতর্ক রয়েছে।

সান-সেরিফ টাইপফেসকে কখনও কখনও অন্যান্য টাইপফেসের তুলনায় কম পার্সোনালিটি সম্পন্ন বলে মনে করা হয়, যদিও এটি মূলত কোন প্রেক্ষাপটে ব্যবহার করা হচ্ছে তার উপর নির্ভর করে।

স্ল্যাব সেরিফ (Slab serif) টাইপফেস সমগ্র টাইপোগ্রাফি বিশ্বকে নাড়া দিয়েছিল যখন সেগুলি ১৯ শতকে প্রকাশিত হয়েছিল। এরা বোল্ড, থিক, এবং রাউন্ডেড বা অঙ্গুলার  সেরিফস যুক্ত। ব্লকি  সেইপ এবং আই-ক্যাচিং লুকের কারণে এরা প্রায়শই সংবাদপত্রের বিজ্ঞাপনে ব্যবহৃত হতো।

স্ল্যাব সেরিফগুলোর নেতিবাচক দিক হলো তাদের বিশাল, ব্লকের মতো সেইপ যার কারণে অন্যান্য টাইপফেসের সাথে যুক্ত করা চ্যালেঞ্জিং হতে পারে। এ টাইপফেসগুলো সাধারণত শিরোনাম বা শিরোনামের মতো ছোট টেক্সটের জন্য সবচেয়ে উপযুক্ত।

স্ক্রিপ্ট (Script) টাইপফেসগুলো সাধারণত লোগোতে দেখা যায় (যেমন: কোকা-কোলার লোগো)। স্ক্রিপ্ট টাইপফেসগুলোর উৎপত্তি হাতের লেখা এবং ক্যালিগ্রাফি থেকে।

স্ক্রিপ্টের টাইপফেসগুলো ব্যাপকভাবে পরিবর্তিত হয়। এগুলো হেডলাইন্, টাইটেল এবং লোগোর  জন্য উপযুক্ত, কিন্তু বড় ব্লকের টেক্সটে বা ছোট আকারে টেক্সটের জন্য উপযুক্ত নয়।

স্ক্রিপ্ট টাইপফেসের মতো, হ্যান্ডরাইটিং টাইপফেসগুলো একজন ব্যক্তির হাতের লেখার অনুকরণ করে। এগুলো সাধারণত খুব ক্যাজুয়াল টাইপফেস এবং শুধুমাত্র সৃজনশীল ফ্লেয়ারের জন্য ব্যবহার করা উচিত। হ্যান্ডরাইটিং টাইপফেসগুলো একজন ব্যক্তির স্বাক্ষর (যেমন একটি ইমেল নিউজলেটারে সাইন অফ করা) বা ছোট শিরোনামের জন্য উপস্থাপন করার জন্য একদম উপযুক্ত।

‍ ডিসপ্লে (‍Display) টাইপফেসগুলো কার্যত যেকোনো ভার্চুয়াল অনুষ্ঠান বা ডিজাইনের জন্য

মানানসই। প্রথম শিল্প বিপ্লবের সময় এই টাইপফেসগুলোর উৎপত্তি এবং মূলত পোস্টার এবং বাণিজ্যিক মুদ্রণে প্রায়শই ব্যবহৃত হতো। আধুনিক UX ডিজাইনে, আপনি এদের সাধারণত হেডলাইন্ এবং টিটেলে দেখতে পাবেন। এগুলো বডি টেক্সটে ব্যবহারের জন্য উপযুক্ত নয়, কারণ এগুলো ছোট আকারে পড়া কঠিন হতে পারে।

মনোস্পেস (Monospaced) টাইপফেসে প্রতিটি অক্ষর টাইপরাইটার বা MS-DOS বা কুরিয়ার নিউ (Courier New) টাইপফেসের মতো একই পরিমাণ হরাইজন্টাল স্পেস দখল করে। এটি অন্য টাইপফেসের ঠিক বিপরীত, যেখানে প্রতিটি অক্ষরের নিজস্ব আনুপাতিক ব্যবধান রয়েছে, অক্ষরের প্রকৃত প্রস্থের উপর ভিত্তি করে।

প্রপোর্শনাল টাইপফেসের তুলনায় মনোস্পেসড টাইপফেস স্ক্যান করা সহজ এবং তারা প্রায়শই কোডের মতো জিনিসগুলোতে ব্যবহৃত হয় কারণ ভুলগুলো সহজে সনাক্ত করা যায়। কিন্তু সামগ্রিকভাবে, প্রপোর্শনাল টাইপফেসের তুলনায় তাদের পাঠযোগ্যতা কম।

ডিংব্যাট (Dingbat) এক প্রকার টাইপফেস যাদের আপনি টেক্সটের জন্য ব্যবহার করতে দেখতে পাবেন না। মূলত ইমোজি হিসাবে ডিংব্যাট ব্যবহার করা হয়।

ডিংব্যাট টাইপফেসগুলো পিক্টোগ্রামস এবং নন-আলফাবেটিক চিহ্ন নিয়ে গঠিত এবং কখনও কখনও এদের টাইপোগ্রাফিক অর্নামেন্টস হিসাবে উল্লেখ করা হয়। যদিও এরা রিডেবল টেক্সট কনটেন্টের জন্য ব্যবহৃত হয় না, তবে এদের কার্যকরী টাইপোগ্রাফিক ব্যবহার রয়েছে। যেমন: বুলেট পয়েন্ট, বর্ডার, চেকবক্স অথবা ডেকোরেটিভ এলিমেন্টস হিসেবে ব্যবহৃত হয়।

টাইপফেস স্টাইলস

নির্দিষ্ট ধরণের টাইপফেস নির্বাচন করা গুরুত্বপূর্ণ, তবে সেই টাইপফেসের জন্য ব্যবহৃত স্টাইলসটি সেই টাইপফেসটি কীভাবে অনুভূত হবে তার উপর বিশাল প্রভাব ফেলতে পারে। এটি রিডেবিলিটিকেও প্রভাবিত করতে পারে এবং ব্যবহারকারীর অভিজ্ঞতাকে বাড়াতে সাহায্য বা ব্যাহত করতে পারে।

মানুষের কাছে ওয়েইট (Weight) নিয়ে আলোচনা করা একটি সেনসিটিভ কোনভার্সেশন হতে পারে, কিন্তু টাইপফেসের ক্ষেত্রে এটি একটি গুরুত্বপূর্ণ ব্যাপার। ফন্ট রেঞ্জ পাতলা (লাইট) থেকে কালো (হেভি) পর্যন্ত, এর মধ্যে অনেক ওয়েইট থাকে। CSS-এ, ফন্টের ওয়েইট ১০০ (পাতলা) এবং ৯০০ (কালো) এর মধ্যে যে কোনো জায়গায় সেট করা যায়। যদিও সবচেয়ে বেশি দেখা যায় বোল্ড এবং রেগুলার ওয়েইট। ‍

রেগুলার হলো সবচেয়ে ইমোশনাললি নিউট্রাল ফন্ট এবং সাধারণত বেশিরভাগ টাইপফেসের জন্যই ডিফল্ট ওয়েইট। রেগুলার ফন্টগুলি খুব বেশি পুরু বা খুব বেশি পাতলা নয়। এই ফন্টগুলো বড় টেক্সট প্যাসেজগুলোর জন্য উপযুক্ত যেগুলো বেশি পড়ার প্রয়োজন৷ যদিও এদের হেডলাইনে সাধারণত দেখা যায় না, তবে হেডলাইন হিসেবেও এদের ব্যবহার করা যায়।

রেগুলারের পর, বোল্ডই সবচেয়ে বেশি ব্যবহৃত ফন্ট ওয়েইট। তারা গাঢ় এবং ঘন স্ট্রোকের কারণে তাদের পার্শ্ববর্তী টেক্সট থেকে আলাদা করার যায়। এই ক্ষমতার কারণে, আপনি যেখানে ব্যবহারকারীর মনোযোগ আকর্ষণ করতে চান বা জোর দিতে চান সেখানে ব্যবহারের জন্য এই ফন্ট ওয়েটটি দুর্দান্ত।

টেক্সটে জোর দেওয়ার জন্য বোল্ডই একমাত্র উপায় নয়। ইটালিক  ফন্টগুলো একইভাবে জোর দেওয়ার জন্য ব্যবহার করা যেতে পারে। তবে, বোল্ড ফন্টের মতো, এগুলোকে জোর দেওয়ার জন্য অল্প ব্যবহার করা উচিত - শুধুমাত্র কয়েকটি শব্দ বা বাক্য।

ইটালিক  ফন্টকে কখনও অবলিক হরফ হিসাবেও উল্লেখ করা হয়। টেক্সটে জোর দেওয়া ছাড়াও,

এগুলি সাধারণত সিনেমা, বই বা নাটকের মতো জিনিসের শিরোনাম হিসেবে ব্যবহৃত হয়।

আপনি যে বোল্ড বা ইটালিক ফন্ট ব্যবহার করেছেন সেটি ব্রাউজার লোড করতে না পারলে কী হবে? সেক্ষেত্রে, ব্রাউজার যদি একটি নির্ধারিত ফন্ট স্টাইল লোড করতে না পারেন, তাহলে এটি একটি ফেইক স্টাইল লোড করে যাকে ফৌক্স স্টাইল (Faux style) বলে।

ফৌক্স স্টাইল দিয়ে বোল্ড এবং ইটালিক ফন্ট অনুকরণ করা হয়। বেশিরভাগ ক্ষেত্রেই এতে, টেক্সটের রিডেবিলিটি হ্রাস পায় এবং ডিজাইনের নান্দনিকতাকে ব্যাহত করে। আপনি যদি একটি ডিজাইনে বোল্ড বা ইটালিক ফন্ট ব্যবহার করতে চান, তাহলে অবশ্যই টাইপফেস বাছাই করতে ভুলবেন না যাতে সেই স্টাইলটি নেটিভভাবে পাওয়া যায়, একে ট্রু স্টাইল ফন্টও (True style) বলা হয়।

ট্রু স্টাইল ফন্টে একটি টাইপফেসের নেটিভ বোল্ড এবং ইটালিক সংস্করণ রয়েছে। যদি ওয়েব ফন্ট ব্যবহার করেন, তাহলে CSS-এ বিভিন্ন ধরণের ওয়েইট অন্তর্ভুক্ত করা হয়েছে কিনা নিশ্চিত হোন; অন্যথায়, ব্রাউজার ফৌক্স স্টাইল ফন্ট দ্বারা প্রতিস্থাপন করতে পারে। ‍

আন্ডারলাইনড টেক্সট (Underlined text) সাধারণত ইন্টারনেট লিংকের সাথে সম্পর্কিত। এর ব্যবহার ব্যবহারকারীদের জন্য বিভ্রান্তিকর এবং হতাশাজনক হতে পারে। সেই কারণে, জোর দেওয়ার জন্য বোল্ড বা ইটালিক ফন্ট বাছাই করা উত্তম।

আপনি যদি কোনো শিক্ষক কখনো কোনো পরীক্ষার উত্তরপত্রে উজ্জ্বল লাল রঙে ক্রস আউট দিয়ে থাকেন, তাহলে আপনি ইতিমধ্যেই স্ট্রাইকথ্রু (Strikethrough) -এর সাথে পরিচিত। এই ধরনের টেক্সট স্টাইল সাধারণত পড়ার জন্য ব্যবহৃত না হলেও, সাধারণত কয়েকটি ক্ষেত্রে এর ব্যবহার দেখতে পাওয়া যায়।

যার মধ্যে একটি হলো মার্কেটিং পেইজে ডিসকাউন্ট বা প্রচারের উপর জোর দেওয়ার জন্য এই কৌশলটি ব্যবহার করা হয় ("সম্পূর্ণ" মূল্য ক্রস করে, বা একটি ভাল শব্দ দিয়ে প্রতিস্থাপন করার জন্য একটি শব্দ ক্রস করে)। দ্বিতীয়টি হলো, টেক্সটে সংশোধন করার ক্ষেত্রে, ভুল তথ্য মুছে ফেলার পরিবর্তে, লেখকরা স্ট্রাইকথ্রু ব্যবহার করেন স্বচ্ছতার স্বার্থে।

‍

বিশেষ ধরনের ক্যারেক্টার

UX টাইপোগ্রাফি সম্পর্কে সঠিকভাবে আলোচনা করার জন্য আপনাকে কিছু গুরুত্বপূর্ণ টাইপোগ্রাফিক টার্মস শিখতে হবে।

আপনি মাজুসকুল (Majuscule) শব্দটির সাথে পরিচিত না থালেও আপার্কেস বা ক্যাপিটালাইজেড  শব্দটির সাথে পরিচিত। এটি প্রাথমিকভাবে একটি বাক্যের প্রথম শব্দকে বড় করার জন্য, নামবাচক বিশেষ্যের (Proper Nouns) জন্য এবং কখনও কখনও শিরোনাম বা লেবেলে ব্যবহৃত হয়। মাজুসকুল টাইপটি বড় ব্লকগুলোতে পড়া কঠিন হতে পারে। তাই সাধারণ ব্যাকরণগত নিয়মের বাইরে এটিকে বডি কপিতে সামান্যমাত্রায় ব্যবহার করুন।

মাজুসকুলের বিপরীত হল মিনিসকুল (Minuscule), যা লওয়ার্কাসে (Lowercase) বা নন-ক্যাপিটাল (Non-Capital) লেটারস হিসাবেও পরিচিত। এটি পাঠ্য তৈরি ডিজিটাল ইন্টারফেসের বেশিরভাগ টেক্সটি মিনিসকুলে লিখিত। এটি মাজুসকুল টাইপের তুলনায় অনেক বেশি সুস্পষ্ট। মাজুসকুল টাইপ একদিকে পাঠককে ধীর করে দেয়, অন্যদিকে মাইনাসকুল টাইপ এ পড়াকে দ্রুত এবং সহজ করে তোলে।

শব্দ (যেমন "এক") বা প্রতীক (যেমন "১") দিয়ে সংখ্যা (Number) প্রকাশ করা হয়। UX-এ, তারিখ থেকে শুরু করে ডেলিভারি ঠিকানা নির্দিষ্ট করার জন্য সংখ্যা ব্যবহার করা হয়। মূল্য নির্ধারণ এবং নতুন কন্টাক্টস যুক্ত করতেও সংখ্যা ব্যবহৃত হয়। টাইপোগ্রাফিতে, সংখ্যাকে ফিগারস বা নুমেরালস হিসাবেও উল্লেখ করা হয়।

আপনি যদি টেবিল বা চার্টসে সংখ্যা নিয়ে কাজ করেন তবে আপনি একটি টাইপফেস সন্ধান চাইতেই পারেন যাতে একটি ট্যাবুলার ফিগার (Tabular figure) স্টাইল অন্তর্ভুক্ত থাকে। ট্যাবুলার ফিগার হল সংখ্যা, কোলন এবং কমার মনোস্পেস সংস্করণ যা তুলনা করার জন্য টেক্সটকে সারিবদ্ধ করা সহজ করে তোলে। অন্যথায়, অনুরূপ মানের সংখ্যাগুলি (যেমন 1,000,000 এবং 1,111,111) বিভিন্ন পরিমাণ স্পেস নেয়, যা তাদের স্ক্যান করা এবং তুলনা করা কঠিন করে তোলে।

রেগুলার টেক্সট অ্যাপ্লিকেশনে, প্রপোর্শনাল ফিগারস (Proportional figures) আরও কার্যকর। প্রপোর্শনাল ফিগারে, প্রতিটি সংখ্যা, কোলন এবং কমার প্রস্থ তাদের প্রকৃত আকারের উপর নির্ভর করে। এগুলি বডি কপির মতো জায়গায় ভাল দেখায় তবে টেবিলে কম দরকারী। ‍

সিম্বলস (Symbols) হলো স্পেশাল ক্যারেক্টার স্টাইল যা আমরা ডিংব্যাট টাইপফেস নিয়ে আলোচনা করার সময় দেখেছি। সিম্বল হলো নন-আলফাবেটিক্যাল ক্যারেক্টার যা সাধারণত প্রোডাক্ট ডিজাইনের ক্ষেত্রে দেখা যায়। আমরা UX ডিজাইনের সকল ক্ষেত্রে সিম্বল ব্যবহার করি,  ইমেল ঠিকানাগুলিতে @ (at) চিহ্ন থেকে শুরু করে একটি সার্চ ক্যোয়ারীতে ওয়াইল্ডকার্ড ব্যবহার করার সময় * (asterisk) পর্যন্ত, এমনকি সোশ্যাল মিডিয়ার ট্যাগগুলিতেও ব্যবহৃত # (number or hashtag) হয়।

লিগ্যাচার্স (Ligatures) হল দুই বা ততোধিক অক্ষর যা মিলে একক অক্ষর তৈরি হয়। প্রিন্টিং প্রেসের প্রথম দিকে এগুলো মুদ্রিত পদার্থে উল্লেখযোগ্যভাবে বেশি সাধারণ ছিল, কিন্তু আজও বিভিন্ন ক্ষেত্রে এরা ব্যবহৃত হয়।

এর মধ্যে সবচেয়ে বিখ্যাত—এবং আপনি হয়তো বুঝতেও পারবেন না এটি একটি লিগ্যাচার—অ্যাম্পারস্যান্ড (&), যা “e” এবং “t” অক্ষরের সংমিশ্রণ। ল্যাটিন ভাষায়, "et" হল "এবং," আর অ্যাম্পারস্যান্ড শব্দটি দিয়ে তাই বোঝায়। তাছাড়া লিগ্যাচার দিয়ে সম্পূর্ণ নতুন শব্দ তৈরি করতে ব্যবহার করা যেতে পারে, যেমন যখন "a" এবং "e" একত্রিত হয়ে "æ" তৈরি করে। আপনি লোগোতেও লিগ্যাচার দেখে থাকতে পারেন, যেমন CNN (যেখানে "N" দুটি একত্রিত হয়েছে)।

উপসংহার

UX ডিজাইন শিক্ষার একটি গুরুত্বপূর্ণ বিল্ডিং ব্লক হলো এই টাইপোগ্রাফিক কন্সেপ্টস। আর এর ভিত্তি হল টাইপোগ্রাফি টার্মিনোলোজি।

মাজুসকুল এবং মিনিসকুলের মতো জিনিসগুলোর মধ্যে পার্থক্য জানা, লিগ্যাচার কী, কখন ট্যাবুলার বনাম প্রপোর্শনাল ফিগারস ব্যবহার করতে হবে এবং বিভিন্ন টাইপোগ্রাফিক স্টাইল রিডেবিলিটির উপর কি প্রভাব ফেলতে পারে তা জানা টাইপোগ্রাফি তৈরির জন্য অপরিহার্য।

কি? টাইপফেস ও ফন্ট সম্পর্কে জানলেন তো? Now Just Practice!

এখনই শুরু করে দিন আপনার UI/UX ডিজাইন জার্নিটা। ভালো ডিজাইন ফাউন্ডেশন, ডিজাইন সেন্স, কোনো একটি স্পেসিফিক নিশ- এ দক্ষ হবার এখনই তো সময়।

হ্যাপি ডিজাইনিং…