ডিজাইন

টাইপোগ্রাফি শুরুর আগে এই বিষয়গুলো জানা জরুরি

টাইপোগ্রাফি শেখার আগে ফন্ট, হায়ারার্কি, স্পেসিং ও বাংলা টাইপের যে বিষয়গুলো জানা জরুরি — নতুনদের জন্য সহজ গাইড।

স্ট্যাক অ্যালিক্স টিমস্ট্যাক অ্যালিক্স টিম২২ জুল, ২০২৬১০ মিনিট পড়া
শেয়ার করুন

টাইপোগ্রাফি শব্দটা শুনলে অনেকের মনে হয়, এটা শুধু “সুন্দর ফন্ট বেছে নেওয়া”। কিন্তু বাস্তবে টাইপোগ্রাফি হলো লেখাকে এমনভাবে সাজানো, যাতে পাঠক সহজে পড়তে পারেন, বার্তাটা পরিষ্কারভাবে বোঝেন এবং দেখতেও আরামদায়ক মনে হয়। একটা ওয়েবসাইট, পোস্টার, অ্যাপ কিংবা ভিজিটিং কার্ড — যেখানেই লেখা আছে, সেখানেই টাইপোগ্রাফি কাজ করছে। ভালো টাইপোগ্রাফি চোখে পড়ে না, কারণ সেটা এত স্বাভাবিকভাবে কাজ করে যে পাঠক শুধু বিষয়বস্তুতে মনোযোগ দিতে পারেন। আর খারাপ টাইপোগ্রাফি সাথে সাথে চোখে লাগে — লেখা ছোট, লাইন ঘেঁষাঘেঁষি, রঙের সাথে কনট্রাস্ট কম।

তাই ডিজাইন শেখা শুরু করার আগে টাইপোগ্রাফির কয়েকটি মৌলিক বিষয় বোঝা খুব দরকার। এই লেখায় আমরা একদম শুরু থেকে আলোচনা করব — ফন্ট আর টাইপফেসের পার্থক্য, হায়ারার্কি, স্পেসিং, কনট্রাস্ট এবং বিশেষভাবে বাংলা টাইপোগ্রাফির চ্যালেঞ্জগুলো। উদ্দেশ্য হলো, এই গাইড পড়ার পর আপনি যেন নিজের প্রজেক্টে সচেতনভাবে সিদ্ধান্ত নিতে পারেন, অন্ধভাবে অনুকরণ না করে। বাংলাদেশের যেকোনো ফ্রিল্যান্সার, স্টার্টআপ মালিক কিংবা শিক্ষার্থী — সবার জন্যই এই ভিত্তিটুকু কাজে লাগবে।

📌 এক নজরে

  • টাইপোগ্রাফি মানে শুধু ফন্ট নয় — এটা লেখার সাজসজ্জা, পাঠযোগ্যতা ও বার্তার স্পষ্টতার পুরো বিষয়।
  • হায়ারার্কি সবচেয়ে গুরুত্বপূর্ণ — শিরোনাম, সাবহেডিং ও বডি টেক্সটের মধ্যে স্পষ্ট পার্থক্য থাকতে হবে।
  • কম ফন্ট ব্যবহার করুন — একটা প্রজেক্টে সাধারণত ২টি টাইপফেসই যথেষ্ট।
  • স্পেসিং ও লাইন-হাইট পাঠযোগ্যতার অর্ধেক কাজ করে দেয়।
  • বাংলা টাইপোগ্রাফির নিজস্ব নিয়ম আছে — ইংরেজির হুবহু নকল করলে কাজ হয় না।
  • মোবাইল-ফার্স্ট চিন্তা করুন — বাংলাদেশে বেশিরভাগ পাঠক ফোনে পড়েন।

টাইপফেস আর ফন্ট — পার্থক্যটা কোথায়

নতুনরা প্রায়ই “ফন্ট” আর “টাইপফেস” শব্দ দুটো একই অর্থে ব্যবহার করেন, কিন্তু এদের মধ্যে সূক্ষ্ম পার্থক্য আছে। টাইপফেস হলো অক্ষরের পুরো পরিবার বা ডিজাইন — যেমন “Roboto” বা “SolaimanLipi”। আর ফন্ট হলো সেই পরিবারের একটি নির্দিষ্ট রূপ — যেমন “Roboto Bold 16px”। সহজ করে বললে, টাইপফেস হলো গানের সুর, আর ফন্ট হলো সেই সুরের একটি নির্দিষ্ট পরিবেশনা। বাস্তব কাজে এই পার্থক্য খুব বড় সমস্যা না হলেও, পেশাদার পরিভাষা জানা থাকলে ক্লায়েন্ট বা টিমের সাথে যোগাযোগ পরিষ্কার হয়।

টাইপফেস মূলত কয়েক ভাগে ভাগ করা যায়। সেরিফ টাইপফেসে অক্ষরের শেষে ছোট ছোট দাগ থাকে (যেমন Times New Roman), এগুলো ঐতিহ্যবাহী ও বিশ্বাসযোগ্য অনুভূতি দেয়। স্যান্স-সেরিফ টাইপফেসে এই দাগ থাকে না (যেমন Arial, Roboto), এগুলো আধুনিক ও পরিষ্কার দেখায় — তাই স্ক্রিনে সবচেয়ে বেশি ব্যবহৃত হয়। এছাড়া ডিসপ্লে বা স্ক্রিপ্ট টাইপফেস আছে, যেগুলো শুধু বড় শিরোনাম বা সাজসজ্জার জন্য, পুরো অনুচ্ছেদে ব্যবহারের জন্য নয়। শুরুতে স্যান্স-সেরিফ দিয়ে কাজ শুরু করাই নিরাপদ।

হায়ারার্কি — পাঠকের চোখকে পথ দেখানো

ভালো টাইপোগ্রাফির আসল রহস্য হলো ভিজ্যুয়াল হায়ারার্কি। মানে, পাঠক যখন কোনো পেজ দেখেন, তখন তার চোখ কোথা থেকে শুরু করবে, কী আগে পড়বে আর কী পরে — সেটা ডিজাইনার আগে থেকেই ঠিক করে দেন। এই কাজটা হয় আকার, ওজন (bold/regular), রঙ আর স্পেসিং দিয়ে। যেমন একটা ব্লগ পোস্টে মূল শিরোনাম সবচেয়ে বড় ও মোটা, সেকশন হেডিং তার চেয়ে ছোট, আর বডি টেক্সট সবচেয়ে ছোট ও হালকা। এই পার্থক্যগুলো না থাকলে পুরো লেখা একঘেয়ে দেখায় এবং পাঠক হারিয়ে যান।

হায়ারার্কি তৈরির একটা সহজ নিয়ম হলো টাইপ স্কেল ব্যবহার করা। অর্থাৎ এলোমেলোভাবে ১৪, ১৭, ২৩ পিক্সেল না নিয়ে একটা গাণিতিক অনুপাত মেনে আকার ঠিক করা — যেমন ১৬, ২০, ২৫, ৩১ পিক্সেল। এতে পুরো ডিজাইনে একটা ছন্দ আসে। বাংলাদেশের অনেক ছোট ব্যবসার ওয়েবসাইটে এই হায়ারার্কির অভাব দেখা যায় — সব লেখা প্রায় একই সাইজের, ফলে কোনটা গুরুত্বপূর্ণ সেটা বোঝা যায় না। মাত্র দুই-তিনটা স্পষ্ট স্তর তৈরি করলেই পেজটা অনেক পেশাদার দেখায়।

স্পেসিং ও লাইন-হাইট — চোখের আরাম

অনেকে ভাবেন, লেখার ফাঁকা জায়গা মানে নষ্ট জায়গা — তাই যত বেশি লেখা ভরে দেওয়া যায় তত ভালো। আসলে এটা একটা বড় ভুল ধারণা। হোয়াইটস্পেস বা ফাঁকা জায়গা পাঠযোগ্যতার অন্যতম গুরুত্বপূর্ণ উপাদান। লাইনের মধ্যে যথেষ্ট ফাঁক (লাইন-হাইট) না থাকলে চোখ এক লাইন থেকে পরের লাইনে যেতে কষ্ট হয়। সাধারণ নিয়ম হলো, বডি টেক্সটের লাইন-হাইট ফন্ট সাইজের প্রায় ১.৪ থেকে ১.৬ গুণ রাখা — অর্থাৎ ১৬px ফন্টের জন্য প্রায় ২৪px লাইন-হাইট।

একইভাবে লাইনের দৈর্ঘ্যও গুরুত্বপূর্ণ। এক লাইনে যদি ৮০-৯০টি অক্ষর থাকে, পাঠকের চোখ ক্লান্ত হয়ে যায়; আবার খুব ছোট লাইনেও পড়তে অসুবিধা। আদর্শ হলো প্রতি লাইনে ৪৫ থেকে ৭৫টি অক্ষর (বাংলায় কিছুটা কম)। অক্ষরের মধ্যকার ফাঁক (লেটার-স্পেসিং) সাধারণত শিরোনামে সামান্য বাড়ানো যায়, কিন্তু বডি টেক্সটে ডিফল্ট রাখাই ভালো। বাংলা টেক্সটে যুক্তাক্ষর বেশি থাকায় লাইন-হাইট একটু বাড়িয়ে দেওয়া বুদ্ধিমানের কাজ, না হলে অক্ষরের মাথা ও মাত্রা ঘেঁষে যায়।

বাংলা টাইপোগ্রাফির বিশেষ দিক

বাংলা টাইপোগ্রাফি ইংরেজির চেয়ে আলাদা এবং কিছুটা জটিল। বাংলায় মাত্রা (অক্ষরের উপরের অনুভূমিক রেখা), যুক্তাক্ষর, কার-চিহ্ন এবং নিচের অংশের জটিল গঠন থাকে। তাই একটা ভালো বাংলা ফন্ট বেছে নেওয়া খুব জরুরি, যেটা স্ক্রিনে পরিষ্কার দেখায়। জনপ্রিয় ও নির্ভরযোগ্য কিছু বাংলা ফন্ট হলো Noto Sans Bengali, Hind Siliguri, Baloo Da 2 এবং ক্লাসিক SolaimanLipi। ওয়েবের জন্য Google Fonts থেকে Hind Siliguri বা Noto Sans Bengali খুবই ভালো কাজ করে, কারণ এগুলো হালকা ও দ্রুত লোড হয়।

বাংলা ও ইংরেজি মিশিয়ে লেখার সময় (যা বাংলাদেশে খুব সাধারণ) একটা চ্যালেঞ্জ হলো দুই ভাষার ফন্ট যেন একই উচ্চতা ও ওজনের অনুভূতি দেয়। অনেক সময় বাংলা অক্ষর ইংরেজির তুলনায় ছোট দেখায়, তাই বাংলার ফন্ট সাইজ সামান্য বাড়িয়ে নেওয়া লাগতে পারে। আরেকটা সাধারণ ভুল হলো বাংলার জন্য এমন ফন্ট ব্যবহার করা যেটাতে সব যুক্তাক্ষর ঠিকমতো রেন্ডার হয় না — ফলে “ক্ষ”, “জ্ঞ”, “ত্ত” এর মতো অক্ষর ভেঙে যায়। তাই ফন্ট চূড়ান্ত করার আগে কিছু কঠিন যুক্তাক্ষর দিয়ে পরীক্ষা করে নেওয়া উচিত।

রঙ ও কনট্রাস্ট — পড়া যায় তো?

টাইপোগ্রাফিতে রঙের ভূমিকা অনেক বড়, বিশেষ করে কনট্রাস্ট। টেক্সট আর ব্যাকগ্রাউন্ডের মধ্যে যথেষ্ট পার্থক্য না থাকলে লেখা পড়া কঠিন হয়ে যায়। যেমন হালকা ধূসর ব্যাকগ্রাউন্ডে হালকা ধূসর লেখা চোখে চাপ ফেলে। অ্যাক্সেসিবিলিটির আন্তর্জাতিক মান (WCAG) অনুযায়ী, সাধারণ টেক্সটের জন্য কমপক্ষে ৪.৫:১ কনট্রাস্ট অনুপাত থাকা উচিত। অনলাইনে অনেক ফ্রি কনট্রাস্ট-চেকার টুল আছে, যেগুলো দিয়ে সহজে যাচাই করা যায়।

রঙ ব্যবহারে আরেকটা পরামর্শ — মূল বডি টেক্সট সবসময় খুব গাঢ় বা খুব হালকা না করে একটু নরম রাখা ভালো। যেমন একদম খাঁটি কালো (#000000) ব্যাকগ্রাউন্ডের সাথে অনেক সময় চোখে কড়া লাগে; এর বদলে গাঢ় ধূসর (#1a1a1a) ব্যবহার করলে পড়তে আরাম হয়। শিরোনাম বা গুরুত্বপূর্ণ অংশে ব্র্যান্ড কালার ব্যবহার করা যায়, তবে পুরো লেখা রঙিন করে ফেললে হায়ারার্কি নষ্ট হয় এবং পাঠকের মনোযোগ ছড়িয়ে যায়।

📊 পরিসংখ্যান ও তথ্য

  • ওয়েবে ব্যবহৃত সব কনটেন্টের প্রায় ৯৫ শতাংশই টেক্সট-নির্ভর, অর্থাৎ টাইপোগ্রাফিই মূল অভিজ্ঞতা তৈরি করে।
  • গবেষণা বলছে, ভালো লাইন-হাইট ও কনট্রাস্ট থাকলে পাঠের গতি প্রায় ২০ শতাংশ পর্যন্ত বাড়তে পারে।
  • বাংলাদেশে ইন্টারনেট ব্যবহারকারীর ৮৫ শতাংশের বেশি মূলত মোবাইল ফোনে ওয়েব ব্রাউজ করেন।
  • একটি পেজে ২টির বেশি টাইপফেস ব্যবহার করলে সাধারণত ডিজাইন এলোমেলো দেখায়।
  • মোবাইলে আরামদায়ক পড়ার জন্য বডি টেক্সটের সর্বনিম্ন আকার সাধারণত ১৬px ধরা হয়।
মূল কথা — পরিসংখ্যান যা-ই বলুক, লক্ষ্য একটাই: লেখা যেন যেকোনো ডিভাইসে সহজে, দ্রুত ও আরামে পড়া যায়। প্রতিটি সিদ্ধান্ত এই প্রশ্ন দিয়ে যাচাই করুন — “এতে পড়া কি সহজ হলো?”

✅ ধাপে ধাপে

  • ধাপ ১ — উদ্দেশ্য ঠিক করুন: ডিজাইনটা কার জন্য, কী বার্তা দিতে চান — আগে সেটা পরিষ্কার করুন। ব্র্যান্ডের সুর (গম্ভীর/বন্ধুসুলভ) অনুযায়ী টাইপফেস বাছুন।
  • ধাপ ২ — দুটি টাইপফেস বাছুন: একটা শিরোনামের জন্য, একটা বডি টেক্সটের জন্য। বাংলা প্রজেক্টে Hind Siliguri বা Noto Sans Bengali দিয়ে শুরু করুন।
  • ধাপ ৩ — টাইপ স্কেল ঠিক করুন: শিরোনাম, সাবহেডিং ও বডির আকার একটা অনুপাত মেনে নির্ধারণ করুন, এলোমেলোভাবে নয়।
  • ধাপ ৪ — স্পেসিং সেট করুন: লাইন-হাইট ১.৫ এর কাছাকাছি রাখুন এবং অনুচ্ছেদের মাঝে যথেষ্ট ফাঁক দিন।
  • ধাপ ৫ — কনট্রাস্ট যাচাই করুন: টেক্সট ও ব্যাকগ্রাউন্ডের কনট্রাস্ট চেকার দিয়ে পরীক্ষা করুন।
  • ধাপ ৬ — মোবাইলে পরীক্ষা করুন: আসল ফোনে খুলে দেখুন লেখা পড়তে আরাম হচ্ছে কি না, তারপর চূড়ান্ত করুন।

⚠️ সাধারণ ভুল

  • অনেক বেশি ফন্ট ব্যবহার করা — এক পেজে ৩-৪টা টাইপফেস মিশিয়ে ডিজাইন নষ্ট করা।
  • ফন্ট সাইজ খুব ছোট রাখা — বিশেষ করে মোবাইলে ১৪px এর নিচে বডি টেক্সট দেওয়া।
  • লাইন-হাইট না বাড়ানো — বাংলা যুক্তাক্ষর ঘেঁষে যাওয়া সত্ত্বেও ডিফল্ট রেখে দেওয়া।
  • কম কনট্রাস্ট — হালকা ব্যাকগ্রাউন্ডে হালকা রঙের লেখা ব্যবহার করা।
  • পুরো শব্দ বড় হাতের অক্ষরে (ALL CAPS) লেখা — দীর্ঘ টেক্সটে এটা পড়া কঠিন করে তোলে।
  • হায়ারার্কি না থাকা — সব লেখা একই আকার ও ওজনে রাখা, ফলে গুরুত্ব বোঝা যায় না।

❓ সাধারণ প্রশ্নোত্তর (FAQ)

প্রশ্ন: শুরু করার জন্য কোন বাংলা ফন্ট সবচেয়ে ভালো? ওয়েব ও স্ক্রিনের জন্য Hind Siliguri ও Noto Sans Bengali খুবই নির্ভরযোগ্য — এগুলো পরিষ্কার, হালকা এবং বেশিরভাগ যুক্তাক্ষর ঠিকমতো রেন্ডার করে।

প্রশ্ন: একটা ডিজাইনে কয়টা ফন্ট ব্যবহার করা উচিত? সাধারণত ২টি যথেষ্ট — একটা শিরোনামের জন্য, একটা বডির জন্য। প্রয়োজনে একই টাইপফেসের ভিন্ন ওজন (regular, bold) ব্যবহার করে বৈচিত্র্য আনুন।

প্রশ্ন: বডি টেক্সটের আদর্শ ফন্ট সাইজ কত? ওয়েবে সাধারণত ১৬px থেকে ১৮px ভালো কাজ করে। মোবাইলে ১৬px এর নিচে না নামাই ভালো, না হলে পড়তে কষ্ট হয়।

প্রশ্ন: সেরিফ না স্যান্স-সেরিফ — কোনটা বেছে নেব? স্ক্রিনে পড়ার জন্য স্যান্স-সেরিফ সাধারণত নিরাপদ ও আধুনিক। ছাপা বই বা ঐতিহ্যবাহী অনুভূতির জন্য সেরিফ ভালো কাজ করে।

প্রশ্ন: টাইপোগ্রাফি শিখতে কি ডিজাইনার হতে হবে? না। ব্লগার, ডেভেলপার, ছোট ব্যবসার মালিক — সবার জন্যই মৌলিক টাইপোগ্রাফি জানা কাজে লাগে, কারণ লেখা সবখানেই আছে।

টাইপোগ্রাফি প্রথমে কঠিন মনে হলেও, এর মূল নীতিগুলো আসলে সরল — পরিষ্কার হায়ারার্কি, যথেষ্ট স্পেসিং, ভালো কনট্রাস্ট আর কম কিন্তু সঠিক ফন্ট। এই কয়েকটি বিষয় মাথায় রেখে কাজ করলেই আপনার ডিজাইন, ওয়েবসাইট বা কনটেন্ট অনেক বেশি পেশাদার ও পাঠযোগ্য হয়ে উঠবে। শুরুতে নিখুঁত হওয়ার দরকার নেই — প্রতিটি প্রজেক্টে একটু একটু করে এই নিয়মগুলো প্রয়োগ করুন, আর সবসময় নিজেকে প্রশ্ন করুন: “এটা কি পড়তে সহজ?”

আপনার ব্র্যান্ড, ওয়েবসাইট কিংবা ডিজিটাল প্রোডাক্টের জন্য যদি পেশাদার, বাংলা-বান্ধব টাইপোগ্রাফি ও ডিজাইন প্রয়োজন হয়, স্ট্যাক অ্যালিক্স টিম আপনাকে সাহায্য করতে প্রস্তুত। সঠিক ফন্ট নির্বাচন থেকে শুরু করে সম্পূর্ণ ডিজাইন সিস্টেম — আমরা আপনার বার্তাকে স্পষ্ট ও সুন্দরভাবে পৌঁছে দিতে পাশে আছি।

ট্যাগ:ডিজাইন#typography#design#bangla fonts#ui design#fonts#readability#web design
স্ট্যাক অ্যালিক্স টিম
লেখক সম্পর্কে
স্ট্যাক অ্যালিক্স টিম
Stack Alix কন্ট্রিবিউটর

ডিজিটাল প্রোডাক্ট, ডেভেলপমেন্ট ও অনলাইন ব্যবসা নিয়ে নিয়মিত লেখেন।

নতুন আর্টিকেল ইনবক্সে পেতে চান?

সপ্তাহের সেরা টিপস ও গাইড সরাসরি আপনার ইমেইলে।

Typography (2026) | Stack Alix