টাইপোগ্রাফি

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

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

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

অক্ষরের আকার

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

যদি কেউ একটি ছোট স্ক্রিন ব্যবহার করে, তবে এটি একটি নিরাপদ বাজি হতে পারে যে তাদের স্ক্রিনটি তাদের চোখের কাছাকাছি থাকবে - এক হাত দূরে।

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

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

স্ক্রীনের আকার প্রশস্ত হওয়ার সাথে সাথে আপনি 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 এর উপরে যাবে না।

লাইন দৈর্ঘ্য

ওয়েব মুদ্রণ নয়, তবে আমরা মুদ্রণের বিশ্ব থেকে পাঠ শিখতে পারি এবং সেগুলি ওয়েবে প্রয়োগ করতে পারি।

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

45 থেকে 75 অক্ষরের যেকোন কিছুকে টেক্সট আকারে serifed টেক্সট ফেসে সেট করা একক-কলাম পৃষ্ঠার জন্য একটি সন্তোষজনক লাইন দৈর্ঘ্য হিসাবে বিবেচিত হয়। 66-অক্ষরের লাইন (অক্ষর এবং স্পেস উভয় গণনা) ব্যাপকভাবে আদর্শ হিসাবে বিবেচিত হয়। একাধিক কলাম কাজের জন্য, একটি ভাল গড় হল 40 থেকে 50 অক্ষর।

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

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

করবেন না
article {
  max-inline-size: 700px;
}
করবেন
article {
  max-inline-size: 66ch;
}

প্রস্থের জন্য ch ইউনিট ব্যবহার করলে সেই ফন্টের আকারে 66 তম অক্ষরে নতুন লাইন মোড়ানো হবে।

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

যদিও 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 বৈশিষ্ট্য ব্যবহার করুন৷ ওয়েব ফন্ট লোড না হওয়া পর্যন্ত আপনি কোনও পাঠ্য প্রদর্শন না করা বেছে নিতে পারেন। আপনি সিস্টেম ফন্টটি অবিলম্বে প্রদর্শন করতে বেছে নিতে পারেন এবং তারপর এটি লোড হয়ে গেলে ওয়েব ফন্টে স্যুইচ করতে পারেন। উভয় কৌশল তাদের downsides আছে. আপনি যদি কোনো টেক্সট দেখানোর আগে ওয়েব ফন্ট ডাউনলোড না হওয়া পর্যন্ত অপেক্ষা করেন, ব্যবহারকারীরা হতাশাজনকভাবে দীর্ঘ সময়ের জন্য একটি ফাঁকা পৃষ্ঠার দিকে তাকিয়ে থাকতে পারে। আপনি যদি প্রথমে একটি সিস্টেম ফন্টে পাঠ্যটি দেখান এবং তারপরে ওয়েব ফন্টে স্যুইচ করেন, ব্যবহারকারীরা পৃষ্ঠায় বিষয়বস্তুতে একটি ঝাঁকুনি পরিবর্তনের সম্মুখীন হতে পারে।

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

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

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

পাঠ্য রেন্ডার হয়ে গেলে আপনি সিস্টেম ফন্টের সাথে লেগে থাকতে চাইলে fallback একটি font-display মান ব্যবহার করুন।

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

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

আপনি যদি একই টাইপফেসের অনেকগুলি ভিন্ন ভিন্ন ওজন বা শৈলী ব্যবহার করেন তবে আপনি অনেকগুলি পৃথক ফন্ট ফাইল ব্যবহার করতে পারেন - প্রতিটি ওজন বা শৈলীর জন্য একটি পৃথক ফন্ট ফাইল।

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

'ক' অক্ষরটি বিভিন্ন ওজনে দেখানো হয়েছে।

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

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

এখন যেহেতু আপনি প্রতিক্রিয়াশীল পাঠ্য আয়ত্ত করেছেন, এটি প্রতিক্রিয়াশীল চিত্রগুলিতে ডুব দেওয়ার সময়।

আপনার উপলব্ধি পরীক্ষা করুন

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

ভিউপোর্টের মধ্যে টেক্সট মোড়ানোর জন্য শৈলী যোগ করা আবশ্যক।

সত্য
শৈলী যোগ করা প্রয়োজন হয় না.
মিথ্যা
কোনো অতিরিক্ত শৈলী ছাড়াই পাঠ্য ডিফল্টরূপে মোড়ানো হবে।

clamp() তরল টাইপোগ্রাফির জন্য দরকারী কারণ

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

এই নির্দেশিকায় কোন ধরনের line-height মান সুপারিশ করা হয়েছে?

24px
পোস্টটি স্পষ্টভাবে বলে যে line-height জন্য পিক্সেল মান ব্যবহার করবেন না।
2rem
যদিও rems আপেক্ষিক মান, তারা এখনও খুব ছোট বা খুব বড় লাইন-উচ্চতা তৈরি করতে পারে।
1.5
ইউনিটহীন আপেক্ষিক মান সুপারিশ করা হয়.
2vw
line-height হিসাবে ভিউপোর্ট ইউনিট সমস্যাযুক্ত হবে।

font-display কি করে?

ব্রাউজারকে বলে কিভাবে একটি সিস্টেম ফন্ট থেকে একটি ওয়েব ফন্টে স্যুইচিং পরিচালনা করতে হয়৷
একটি কাস্টম ফন্ট রূপান্তর সঙ্গে সাহায্য করে.
block বা inline-block করতে ফন্ট সেট করার অনুমতি দেয়।
ফন্টের প্রদর্শনের ধরন নেই।
ফন্ট লুকানো বা না থাকলে পরিবর্তন।
হরফ লুকানো যাবে না.
দূরবর্তী ফন্ট লোড করার সময় ব্যবহারকারীর অভিজ্ঞতার জন্য নিয়ন্ত্রণ প্রদান করে।
লেখকদের কাস্টম ফন্ট লোড করার অভিজ্ঞতা তৈরি করতে সাহায্য করে।