ওয়েবসাইট টাইপোগ্রাফি নির্বাচন: ভুল ফন্ট যেভাবে ব্র্যান্ড আর কনভার্সন নষ্ট করে
একটা ওয়েবসাইটে গিয়ে যদি টেক্সট পড়তে কষ্ট হয়, ভিজিটর দুই সেকেন্ডও থাকে না। কালার, লেআউট, ছবি সব ঠিক থাকলেও শুধু ভুল ওয়েবসাইট টাইপোগ্রাফির কারণে বাউন্স রেট বেড়ে যায় আর কনভার্সন কমে যায়। অথচ বেশিরভাগ ওয়েবসাইট মালিক ফন্ট নির্বাচনকে শেষ মুহূর্তের সিদ্ধান্ত হিসেবে দেখেন, ডিজাইনের একটা কোর অংশ হিসেবে না।
টাইপোগ্রাফি শুধু “সুন্দর ফন্ট” বাছাই করা না
টাইপোগ্রাফি মানে হলো টেক্সটকে এমনভাবে সাজানো, যাতে সেটা সহজে পড়া যায়, চোখে চাপ না লাগে, আর সাইটের ব্র্যান্ড পরিচয়টাও বহন করে। এখানে তিনটা জিনিস একসাথে কাজ করে: ফন্ট চয়েস, সাইজ-স্পেসিং, আর হায়ারার্কি (কোন টেক্সট আগে চোখে পড়বে)। এই তিনটার যেকোনো একটায় গোলমাল থাকলে পুরো রিডিং এক্সপেরিয়েন্স ভেঙে যায়।
একটা প্র্যাকটিক্যাল উদাহরণ: হিরো সেকশনের হেডলাইন যদি ঠিকঠাক সাইজ আর কনট্রাস্টে না থাকে, ভিজিটর প্রথম পাঁচ সেকেন্ডেই সাইট ছেড়ে চলে যায়। হিরো সেকশন ডিজাইনের নিয়মগুলো এই কারণেই টাইপোগ্রাফির সাথে মিলিয়ে ঠিক করতে হয়, আলাদাভাবে না।
ফন্ট সাইজ আর লাইন-হাইট: বেশিরভাগ সাইট এই বেসিক নিয়মটাই মানে না
বডি টেক্সটের জন্য ১৬ পিক্সেল ওয়েবের স্ট্যান্ডার্ড বেসলাইন। এর নিচে নামলে মোবাইলে পড়া কষ্টকর হয়ে যায়। লাইন-হাইট (line-height) হওয়া উচিত ফন্ট সাইজের ১.৪ থেকে ১.৬ গুণ, মানে ১৬ পিক্সেল ফন্টের জন্য ২৪ থেকে ২৬ পিক্সেল লাইন-হাইট আদর্শ। হেডিংয়ে এটা কম রাখা যায়, ১.১ থেকে ১.৩ গুণ, কারণ বড় সাইজ নিজেই লাইনগুলোর মধ্যে আলাদা জায়গা তৈরি করে দেয়।
একটা লাইনে কতগুলো ক্যারেক্টার থাকবে সেটাও পড়ার গতিতে প্রভাব ফেলে। ৪৫ থেকে ৯০ ক্যারেক্টারের মধ্যে লাইন লেংথ রাখা উচিত, আর ৬০ থেকে ৭৫ ক্যারেক্টার সবচেয়ে আরামদায়ক। ফুল-উইথ প্যারাগ্রাফ যেখানে একটা লাইনে ১৫০ ক্যারেক্টার চলে যায়, সেখানে চোখ ক্লান্ত হয়ে পড়ে আর পরের লাইন খুঁজে পেতে সময় লাগে।
ফন্ট পেয়ারিং: একসাথে কয়টা ফন্ট ব্যবহার করা ঠিক
একটা সাইটে দুইয়ের বেশি ফন্ট ফ্যামিলি ব্যবহার করলে সেটা বেশিরভাগ সময় অগোছালো দেখায়। নিরাপদ ফর্মুলা হলো: হেডিংয়ের জন্য একটা ফন্ট, বডি টেক্সটের জন্য আরেকটা। সেরিফ (Serif) ফন্ট হেডিংয়ে ব্যবহার করলে একটা অথরিটি আর ঐতিহ্যের ভাব আসে, আর স্যান্স-সেরিফ (Sans-serif) বডি টেক্সটে স্ক্রিনে বেশি পরিষ্কার পড়া যায়। দুটো ফন্ট বাছাই করার সময় দেখতে হবে তাদের x-height (ছোট হাতের অক্ষরের উচ্চতা) আর ক্যারেক্টার উইথ কাছাকাছি কিনা, নাহলে পেয়ারিংটা বেমানান লাগবে।
থার্ড একটা ফন্ট শুধু তখনই যোগ করুন যখন সেটা কোনো নির্দিষ্ট পারপাস সার্ভ করে, যেমন কোড স্নিপেট বা কোটেশনের জন্য মনোস্পেস ফন্ট। প্রতিটা নতুন ফন্ট ফাইল মানে একটা এক্সট্রা HTTP রিকোয়েস্ট, যেটা সরাসরি সাইটের লোডিং স্পিডে প্রভাব ফেলে। কালার প্যালেটের মতো টাইপোগ্রাফিও ব্র্যান্ড আইডেন্টিটির অংশ, তাই দুটোকেই একসাথে প্ল্যান করা উচিত, আলাদাভাবে না।
পোর্টফোলিও বা এজেন্সি সাইটে টাইপোগ্রাফি প্রথম দেখাতেই প্রফেশনালিজমের সিগন্যাল দেয়। Build Portfolio Website কোর্সে ফন্ট পেয়ারিং, স্পেসিং, আর পুরো ভিজ্যুয়াল হায়ারার্কি হাতে-কলমে শেখানো হয়, যাতে একটা পোর্টফোলিও সাইট শুধু “ভালো দেখতে” না, প্রফেশনালও লাগে।
Google Fonts ব্যবহার করছেন? GDPR আর স্পিডের সমস্যাটা জানুন
Google Fonts-কে Google-এর CDN থেকে সরাসরি লোড করলে ভিজিটরের IP অ্যাড্রেস Google-এর সার্ভারে চলে যায়, যেটা GDPR-এর আওতায় পার্সোনাল ডেটা হিসেবে গণ্য হয়। ২০২২ সালে জার্মানির একটা কোর্ট এই কারণে একটা ওয়েবসাইটকে GDPR ভায়োলেশনের জন্য জরিমানা করেছিল, আর এই রুলিং এখনো ইউরোপিয়ান ক্লায়েন্টদের জন্য প্রাসঙ্গিক। বাংলাদেশ থেকে কাজ করলেও ইউরোপের ক্লায়েন্টের সাইট বানালে এই বিষয়টা এড়িয়ে যাওয়ার সুযোগ নেই।
সমাধান হলো ফন্ট সেলফ-হোস্ট করা, মানে Google-এর সার্ভারের বদলে নিজের সাইটের সার্ভার থেকে ফন্ট সার্ভ করা। এতে শুধু GDPR সমস্যা মেটে না, সাইট স্পিডও বাড়ে, কারণ ফন্ট তখন সাইটের নিজের ক্যাশ থেকে লোড হয়, আলাদা একটা এক্সটার্নাল ডোমেইনে রিকোয়েস্ট পাঠাতে হয় না।
ওয়ার্ডপ্রেসে ফন্ট সেলফ-হোস্ট করার কয়েকটা উপায় আছে:
- ব্লক থিম ব্যবহার করলে (WordPress 6.5 বা তার পরের ভার্সন) বিল্ট-ইন Font Library দিয়ে সরাসরি ফন্ট ইনস্টল ও সার্ভ করা যায়, কোনো কোড লাগে না।
- ক্লাসিক থিমে OMGF (Optimize My Google Fonts)-এর মতো প্লাগইন ব্যবহার করা যায়, যেটা অটোমেটিক্যালি Google Fonts ডাউনলোড করে নিজের স্টাইলশিট বানিয়ে দেয়।
- ম্যানুয়ালি ফন্ট ফাইল ডাউনলোড করে WOFF2 ফরম্যাটে থিমে যোগ করা যায়, এটা সবচেয়ে বেশি কন্ট্রোল দেয় কিন্তু টেকনিক্যাল কাজ বেশি।
ফন্ট ফাইল সবসময় WOFF2 ফরম্যাটে ব্যবহার করা উচিত, কারণ এটা সবচেয়ে কমপ্রেসড আর সব মডার্ন ব্রাউজার এটা সাপোর্ট করে। font-display: swap CSS প্রপার্টি ব্যবহার করলে ফন্ট লোড হওয়ার আগ পর্যন্ত ব্রাউজার একটা ফলব্যাক ফন্টে টেক্সট দেখায়, ফলে ভিজিটরকে ফাঁকা স্ক্রিনের সামনে বসে থাকতে হয় না।
মোবাইলে রেসপন্সিভ টাইপোগ্রাফি কীভাবে সেট করবেন
ডেস্কটপে ভালো দেখানো ফন্ট সাইজ মোবাইলে অনেক সময় হয় বেশি বড় নাহয় বেশি ছোট লাগে। ফিক্সড পিক্সেল সাইজের বদলে CSS-এর clamp() ফাংশন ব্যবহার করলে ফন্ট সাইজ স্ক্রিন সাইজের সাথে স্বয়ংক্রিয়ভাবে স্কেল হয়, একটা মিনিমাম আর ম্যাক্সিমাম লিমিটের মধ্যে থেকে। এতে আলাদা করে প্রতিটা ব্রেকপয়েন্টে ফন্ট সাইজ মিডিয়া কোয়েরি দিয়ে ঠিক করার দরকার পড়ে না।
মোবাইলে বাটন আর লিংকের টেক্সটও যথেষ্ট বড় রাখা জরুরি, নাহলে টাচ টার্গেট মিস হয়। এই বিষয়টা ওয়েবসাইট এক্সেসিবিলিটির সাথেও সরাসরি সম্পর্কিত, কারণ ছোট টেক্সট শুধু দেখতে অসুবিধা না, ব্যবহার করতেও অসুবিধা তৈরি করে।
যেসব ভুল টাইপোগ্রাফি পুরো সাইটের প্রফেশনাল লুক নষ্ট করে দেয়
বেশিরভাগ টাইপোগ্রাফি সমস্যা কয়েকটা নির্দিষ্ট ভুল থেকে আসে, আর এগুলো ঠিক করতে বড় রিডিজাইনের দরকার হয় না।
ল্যান্ডিং পেজে এই ভুলগুলোর প্রভাব সবচেয়ে বেশি চোখে পড়ে, কারণ সেখানে প্রতিটা সেকেন্ড কনভার্সনের সাথে সরাসরি যুক্ত। ল্যান্ডিং পেজ ডিজাইনের নিয়মগুলো ফলো করলে টাইপোগ্রাফিও এমনিতেই ঠিক পথে চলে আসে, কারণ দুটোর লক্ষ্য একই: ভিজিটরকে দ্রুত বোঝানো আর অ্যাকশনে নেওয়া।
নিজে থেকে এই কাজগুলো ঠিক করার সময় বা ইচ্ছা না থাকলে, টাইপোগ্রাফি, কালার, লেআউট সব একসাথে প্ল্যান করে একটা কনভার্সন-ফোকাসড ল্যান্ডিং পেজ বানিয়ে নেওয়া যায় Landing Page Design সার্ভিসের মাধ্যমে।
শেষ কথা
টাইপোগ্রাফি ঠিক করার জন্য নতুন ডিজাইনার হওয়ার দরকার নেই। সঠিক ফন্ট সাইজ, লাইন-হাইট, বেশি হলে দুইটা ফন্ট ফ্যামিলি, আর সেলফ-হোস্টেড Google Fonts, এই চারটা নিয়ম মানলেই বেশিরভাগ সাইট আগের চেয়ে অনেক বেশি প্রফেশনাল আর পড়ার উপযোগী হয়ে যায়। আজই নিজের সাইটের বডি টেক্সট সাইজ আর ফন্ট সংখ্যা চেক করুন, ছোট একটা পরিবর্তনই কনভার্সনে বড় পার্থক্য আনতে পারে।
