টাইপোগ্রাফি

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

আপনি যদি লাইনের দৈর্ঘ্য নির্দিষ্ট না করেন, তাহলে ব্রাউজারগুলো স্ক্রিনের প্রান্তে টেক্সটের লাইনগুলোকে র‍্যাপ করে। তাই ওয়েবের টেক্সট ডিফল্টভাবেই রেসপন্সিভ—এটি ব্যবহারকারীর ভিউপোর্টের সাথে মানিয়ে যায়।

কিন্তু স্ক্রিনে লেখা এঁটে গেলেই যে তা পড়তে আরামদায়ক হবে, এমনটা নয়। ভালো টাইপোগ্রাফির মূল উদ্দেশ্যই হলো আপনার লেখাকে যথাযথ উপায়ে উপস্থাপন করা। শুধু উপযুক্ত ফন্ট বেছে নিলেই টাইপোগ্রাফি হয় না। আপনাকে ব্যবহারকারীর পছন্দ, লেখার আকার, লাইনের দৈর্ঘ্য এবং লাইনগুলোর মধ্যকার দূরত্বও বিবেচনা করতে হবে।

টেক্সট সাইজ

ওয়েবে টেক্সটের আকার কেমন হওয়া উচিত, তা জানা কঠিন।

যদি কেউ ছোট স্ক্রিন ব্যবহার করেন, তবে এটা ধরে নেওয়া যায় যে তার স্ক্রিনটি চোখের বেশ কাছেই থাকবে—এক হাতের নাগালের মধ্যে।

কিন্তু স্ক্রিন যত বড় হতে থাকে, এই সংযোগ স্থাপন করা তত কঠিন হয়ে পড়ে। একটি ল্যাপটপ আকারের স্ক্রিন সম্ভবত দর্শকের বেশ কাছেই থাকবে, কিন্তু একটি ওয়াইডস্ক্রিন ডেস্কটপ মনিটর প্রায় একটি টেলিভিশন স্ক্রিনের সমান আকারের হয়। লোকেরা ডেস্কটপ স্ক্রিন থেকে এক হাতের দূরত্বে বসে, কিন্তু টেলিভিশন থেকে তারা আরও অনেক দূরে বসে।

তবুও, কেউ স্ক্রিন থেকে কতটা দূরে আছে তা নিশ্চিতভাবে জানা না গেলেও, আপনি এমন টেক্সট সাইজ ব্যবহার করার চেষ্টা করতে পারেন যা আশা করা যায় উপযুক্ত হবে। ছোট স্ক্রিনের জন্য ছোট টেক্সট সাইজ এবং বড় স্ক্রিনের জন্য বড় টেক্সট সাইজ ব্যবহার করুন।

স্ক্রিনের আকার বাড়ার সাথে সাথে font-size প্রপার্টি পরিবর্তন করতে আপনি মিডিয়া কোয়েরি ব্যবহার করতে পারেন।

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

টেক্সট স্কেলিং

নির্দিষ্ট ব্রেকপয়েন্টে স্থির টেক্সট সাইজের মধ্যে পরিবর্তন বেশ ঝাঁকুনিপূর্ণ। আরও প্রতিক্রিয়াশীল একটি পদ্ধতি হলো ব্যবহারকারীর ডিভাইসের প্রস্থকে টেক্সট সাইজ নির্ধারণ করতে দেওয়া।

CSS-এ vw ইউনিটের পূর্ণরূপ হলো 'ভিউপোর্ট উইডথ'। ফন্ট সাইজকে ভিউপোর্টের প্রস্থের সাথে সংযুক্ত করার অর্থ হলো, ব্রাউজারের প্রস্থের অনুপাতে টেক্সট বড় বা ছোট হবে। এর ফলে যেকোনো নির্দিষ্ট প্রস্থে টেক্সটের আকার কেমন হবে তা আগে থেকে অনুমান করা কঠিন হয়ে পড়ে, কিন্তু এটা নিশ্চিত থাকা যায় যে টেক্সটের আকার ব্যবহারকারীর ব্রাউজারের প্রস্থের জন্য উপযুক্ত হবে।

এটা গুরুত্বপূর্ণ যে আপনি ফন্ট-সাইজ ঘোষণার ক্ষেত্রে শুধু ' vw ব্যবহার করবেন না।

html {
  font-size: 2.5vw;
}

যদি আপনি তা করেন, তাহলে ব্যবহারকারী টেক্সটটির আকার পরিবর্তন করতে পারবেন না। যদি আপনি em , rem বা ch মতো কোনো রিলেটিভ ইউনিট ব্যবহার করেন, তবেই টেক্সটটির আকার পরিবর্তন করা যাবে। এর জন্য CSS calc() ফাংশনটি একদম উপযুক্ত।

html {
  font-size: calc(0.75rem + 1.5vw);
}

ব্রাউজারকে হিসাবটা করতে দিন। এর ফলে কোনো নির্দিষ্ট প্রস্থে লেখার আকার ঠিক কত হবে তা আগে থেকে অনুমান করা কঠিন হয়ে পড়ে, কিন্তু আপনি জানেন যে লেখার আকারটি সঠিক পরিসরের মধ্যেই থাকবে। ব্যবহারকারীর ব্রাউজারই লেখার সঠিক আকারের হিসাব বের করার দায়িত্ব নেয়।

কিন্তু এখন এমন সম্ভাবনা রয়েছে যে, সরু স্ক্রিনে লেখা খুব ছোট এবং চওড়া স্ক্রিনে খুব বড় হয়ে যাবে।

ক্ল্যাম্পিং টেক্সট

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

` clamp() ` ফাংশনটি ` calc() ` ফাংশনের মতোই, তবে এটি তিনটি মান গ্রহণ করে। মাঝের মানটি calc() ফাংশনে দেওয়া মানের সমান। শুরুর মানটি সর্বনিম্ন আকার নির্দিষ্ট করে, এক্ষেত্রে এটি 1rem, যাতে ব্যবহারকারীর পছন্দের ফন্ট সাইজের নিচে না যায়। শেষের মানটি সর্বোচ্চ আকার নির্দিষ্ট করে।

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

এখন লেখার আকার ব্যবহারকারীর স্ক্রিনের অনুপাতে ছোট-বড় হবে, কিন্তু লেখার আকার কখনোই 1rem চেয়ে ছোট বা 2rem চেয়ে বড় হবে না।

লাইনের দৈর্ঘ্য

ওয়েব মুদ্রণ মাধ্যম নয়, কিন্তু আমরা মুদ্রণ জগৎ থেকে শিক্ষা নিয়ে সেগুলোকে ওয়েবে প্রয়োগ করতে পারি।

রবার্ট ব্রিংহার্স্ট তাঁর ক্লাসিক বই ‘দ্য এলিমেন্টস অফ টাইপোগ্রাফিক স্টাইল’ -এ লাইনের দৈর্ঘ্য (বা পরিমাপ) সম্পর্কে এই কথা বলেছেন:

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

CSS-এ সরাসরি লাইনের দৈর্ঘ্য নির্ধারণ করা যায় না। এর জন্য কোনো line-length প্রপার্টি নেই। কিন্তু কন্টেইনারের প্রস্থ সীমিত করে আপনি টেক্সটকে অতিরিক্ত চওড়া হওয়া থেকে আটকাতে পারেন। এর জন্য ' max-inline-size প্রপার্টিটি একদম উপযুক্ত।

আপনার লাইনের দৈর্ঘ্য px মতো কোনো নির্দিষ্ট এককে সেট করবেন না। ব্যবহারকারীরা তাদের ফন্টের আকার ছোট-বড় করতে পারেন এবং সেই অনুযায়ী আপনার লাইনের দৈর্ঘ্যও পরিবর্তিত হওয়া উচিত। rem বা ch মতো আপেক্ষিক একক ব্যবহার করুন।

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

প্রস্থের জন্য ch একক ব্যবহার করলে, ঐ ফন্ট সাইজে নতুন লাইনগুলো ৬৬তম অক্ষরে এসে শেষ হবে।

লাইনের উচ্চতা

CSS-এ line-length প্রপার্টি না থাকলেও line-height প্রপার্টি রয়েছে।

ছোট টেক্সট লাইনে বেশি line-height ব্যবহার করা যায়। কিন্তু লম্বা টেক্সট লাইনে বেশি line-height ব্যবহার করলে পাঠকের পক্ষে এক লাইনের শেষ থেকে পরের লাইনের শুরুতে চোখ নিয়ে যাওয়া কঠিন হয়ে পড়ে।

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

আপনার line-height ডিক্লারেশনে এককবিহীন মান ব্যবহার করুন। এটি নিশ্চিত করে যে লাইন হাইট font-size সাপেক্ষে নির্ধারিত হবে।

line-height: 24px;

line-height: 1.5;

সংমিশ্রণ এবং স্কেল

আরও ভালো স্পষ্টতা এবং পৃষ্ঠার সাবলীলতার জন্য আপনার ইউজার ইন্টারফেস তৈরি করার সময় স্তরবিন্যাসকে অগ্রাধিকার দিতে ভুলবেন না। এটি করার একটি চমৎকার উপায় হলো আপনার ডিজাইন সিস্টেমে একটি টাইপোগ্রাফি স্কেল অন্তর্ভুক্ত করা ।

ওয়েব ফন্ট

টাইপফেস হলো আপনার কথার কণ্ঠস্বরের মতো। দীর্ঘদিন ধরে ওয়েবে ফন্টের বিকল্প খুব কম ছিল। সিস্টেম ফন্টই ছিল একমাত্র উপায়। কিন্তু এখন আপনি এমন একটি ওয়েব ফন্ট বেছে নিতে পারেন যা আপনার কন্টেন্টের ভাবের সাথে মানানসই।

আপনার ওয়েব ফন্ট ফাইলগুলো কোথায় খুঁজে পাওয়া যাবে, তা ব্রাউজারকে জানাতে @font-face ব্যবহার করুন। আপনার ওয়েব ফন্ট ফরম্যাট হিসেবে woff2 ব্যবহার করুন। এটি ভালোভাবে সমর্থিত এবং এর পারফরম্যান্স সবচেয়ে ভালো।

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

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

ফন্ট লোড হচ্ছে

আপনি ব্রাউজারকে যত তাড়াতাড়ি সম্ভব একটি ফন্ট ফাইল ডাউনলোড করা শুরু করার জন্য অনুরোধ করতে পারেন। আপনার ডকুমেন্টের head একটি link এলিমেন্ট যোগ করুন যা আপনার ওয়েব ফন্ট ফাইলটিকে রেফারেন্স করবে। preload ভ্যালু সহ একটি rel অ্যাট্রিবিউট ব্রাউজারকে সেই ফাইলটিকে অগ্রাধিকার দিতে বলে। font ভ্যালু সহ একটি as অ্যাট্রিবিউট ব্রাউজারকে বলে দেয় এটি কী ধরনের ফাইল। type অ্যাট্রিবিউট আপনাকে আরও সুনির্দিষ্ট হতে সাহায্য করে।

<link href="/fonts/roboto-regular.woff2" type="font/woff2"
  rel="preload" as="font" crossorigin>

আপনি নিজে ফন্ট ফাইলগুলো হোস্ট করলেও আপনাকে crossorigin অ্যাট্রিবিউটটি অন্তর্ভুক্ত করতে হবে।

সিস্টেম ফন্ট থেকে ওয়েব ফন্টে পরিবর্তনের বিষয়টি ব্রাউজারকে কীভাবে পরিচালনা করতে হবে, তা জানানোর জন্য CSS-এর font-display প্রপার্টি ব্যবহার করুন। আপনি চাইলে ওয়েব ফন্ট লোড না হওয়া পর্যন্ত কোনো লেখাই না দেখানোর সিদ্ধান্ত নিতে পারেন। আবার, আপনি চাইলে সিস্টেম ফন্টটি সঙ্গে সঙ্গে প্রদর্শন করে, সেটি লোড হয়ে গেলে ওয়েব ফন্টে পরিবর্তন করার সিদ্ধান্তও নিতে পারেন। উভয় কৌশলেরই নিজস্ব অসুবিধা রয়েছে। যদি আপনি কোনো লেখা দেখানোর আগে ওয়েব ফন্ট ডাউনলোড হওয়া পর্যন্ত অপেক্ষা করেন, তবে ব্যবহারকারীরা হতাশাজনকভাবে দীর্ঘ সময় ধরে একটি খালি পৃষ্ঠার দিকে তাকিয়ে থাকতে পারেন। আর যদি আপনি প্রথমে সিস্টেম ফন্টে লেখা দেখিয়ে পরে ওয়েব ফন্টে পরিবর্তন করেন, তবে ব্যবহারকারীরা পৃষ্ঠার বিষয়বস্তুর একটি বেমানান পরিবর্তন অনুভব করতে পারেন।

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

যখনই ওয়েব ফন্টটি অবশেষে লোড হবে, তখনও যদি আপনি চান যে ওয়েব ফন্টটি সিস্টেম ফন্টকে প্রতিস্থাপন করুক, তাহলে font-display ভ্যালু হিসেবে swap ব্যবহার করুন।

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

টেক্সট রেন্ডার হয়ে যাওয়ার পর যদি আপনি সিস্টেম ফন্টটিই ব্যবহার করতে চান, তাহলে font-display ভ্যালু হিসেবে fallback ব্যবহার করুন।

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

পরিবর্তনশীল ফন্ট

আপনি যদি একই টাইপফেসের অনেকগুলো ভিন্ন ওয়েট বা স্টাইল ব্যবহার করেন, তাহলে আপনাকে অনেকগুলো আলাদা ফন্ট ফাইল ব্যবহার করতে হতে পারে—প্রতিটি ওয়েট বা স্টাইলের জন্য একটি করে আলাদা ফন্ট ফাইল।

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

এর মানে হলো, একটি ভ্যারিয়েবল ফন্ট ফাইল একটি সাধারণ ফন্ট ফাইলের চেয়ে আকারে বড় হয়, কিন্তু একটি ভ্যারিয়েবল ফন্ট ফাইল সম্ভবত একাধিক সাধারণ ফন্ট ফাইলের চেয়ে আকারে ছোট হবে। আপনি যদি বিভিন্ন ওয়েট (weight) ব্যবহার করেন, তাহলে একটি ভ্যারিয়েবল ফন্ট আপনাকে পারফরম্যান্সে বড় ধরনের উন্নতি এনে দিতে পারে।

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

এখন যেহেতু আপনি রেসপন্সিভ টেক্সট আয়ত্ত করে ফেলেছেন, এবার রেসপন্সিভ ইমেজ নিয়ে কাজ করার পালা।

আপনার বোধগম্যতা যাচাই করুন

টাইপোগ্রাফি বিষয়ে আপনার জ্ঞান পরীক্ষা করুন