এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

পরিবর্তনশীল ফন্টে স্থানান্তর করা হচ্ছে

১. ভূমিকা

সর্বশেষ হালনাগাদ: ০৫/১১/২২

ভ্যারিয়েবল ফন্টের সাহায্যে আপনার UI-তে গতিশীল পরিবর্তনশীলতা আনুন, যা লেআউট, থিম এবং অ্যাক্সেসিবিলিটিতে আরও বেশি রেসপন্সিভনেস আনবে এবং একই সাথে আপনার অ্যাপগুলোকে আরও দ্রুততর করে তুলবে!

আপনি যা শিখবেন

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

পূর্বশর্ত

এই ল্যাবের জন্য আমরা কিছু মৌলিক ডিজাইন ধারণার ওপর ভিত্তি করে কাজ করব।

প্রকার স্কেল সম্পর্কে জ্ঞান।
ফিগমা সম্পর্কে জ্ঞান।
HTML ও CSS সম্পর্কে প্রাথমিক জ্ঞান।

আপনার যা যা লাগবে

ফিগমা অ্যাকাউন্ট
ফিগমা ডিজাইনল্যাব ফাইল
ওয়েবের জন্য পছন্দের কোড এডিটর

২. শুরু করুন

সেটআপ

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

প্রথমে, ফিগমাতে সাইন ইন করুন অথবা একটি অ্যাকাউন্ট তৈরি করুন ।

ফিগমা কমিউনিটি থেকে অনুলিপি

“Migrating to Variable fonts” ফাইলটিতে যান অথবা ফিগমা কমিউনিটিতে “Migrating to Variable fonts” লিখে সার্চ করুন। ফাইলটি আপনার ফোল্ডারে কপি করতে উপরের ডান কোণায় থাকা “Duplicate”- এ ক্লিক করুন।

ফাইল লেআউট

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

এই কোডল্যাবটি আপনাকে সেই ধারণা এবং অনুশীলনগুলো আরও বিস্তারিতভাবে বুঝতে সাহায্য করবে। Material You-এর নতুন ফিচারগুলো সম্পর্কে আরও জানতে কোডল্যাবটি পড়ুন।

ইন্ট্রো আর্টবোর্ড থেকে শুরু করে, আর্টবোর্ডগুলোকে ক্রমানুসারে সংযুক্ত করার জন্য বাটন রয়েছে। লিঙ্কটি অ্যাক্সেস করতে, বাটনটিতে ক্লিক করুন।

পরিবর্তনশীল ফন্টের জন্য পরীক্ষা করুন

শুরু করার আগে, আমাদের একটি ভ্যারিয়েবল ফন্ট আছে কিনা তা নিশ্চিত করতে হবে! এই ফাইলটিতে রোবোটো ফ্লেক্স (Roboto Flex) ব্যবহার করা হয়েছে, যা ফিগমাতে (Figma) আগে থেকেই উপলব্ধ, অথবা আপনি এটি fonts.google.com থেকে ডাউনলোড করতে পারেন।

৩. ভ্যারিয়েবল ফন্ট বলতে কী বোঝায়?

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

নান্দনিক অভিব্যক্তি এবং অক্ষ

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

সুবিধা

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

৪. ডিজাইনে পরিবর্তনশীল ফন্ট ব্যবহার করুন

অক্ষ পরিবর্তন করুন

চলুন আমাদের কাছে উপলব্ধ সমস্ত প্যারামিটার (বা অক্ষ) এবং তাদের প্রভাব সম্পর্কে জেনে নিই। ডানদিকে টাইপটি নির্বাচন করুন এবং অক্ষ স্লাইডারগুলি খুলতে টাইপ ডিটেইলস মডাল (মোর আইকন) খুলুন, এবং প্রতিটি প্যারামিটার পর্যালোচনা করুন।

ওয়েট একটি অক্ষরের পুরুত্ব নির্ধারণ করে। এটি স্ট্রোকের পুরুত্বের একটি সম্পূর্ণ ও অবিচ্ছিন্ন পরিসর প্রদান করে।

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

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

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

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

ফিগমার বাইরে পরিবর্তনশীল ফন্ট অ্যাক্সিস নিয়ে পরীক্ষা-নিরীক্ষা করতে ভেরিয়েবল ফন্টস ডেমোটি দেখুন।

৫. স্টাইল বাড়িয়ে তুলুন

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

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

চলুন, মূল লেখার মাধ্যমে টাইপ স্কেল কাস্টমাইজ করা শুরু করি। এর মাধ্যমে আমরা প্রথমে সাইটের বেস টাইপ সাইজ সেট করতে পারি এবং সেখান থেকে অপটিক্যালি অ্যাডজাস্ট করতে পারি। বডি লার্জ-এর জন্য ডিফল্ট হলো ১৮pt , যা সিলেক্ট করা এবং রোবোটো ফ্লেক্স- এ সেট করা আছে। আগে আরও ভালো পাঠযোগ্যতার জন্য ফন্ট সাইজ এবং ওয়েট আপডেট করতে হতো, যার জন্য আরেকটি ফন্ট ফাইলের প্রয়োজন পড়ত, কিন্তু এখন আমরা কয়েকটি অ্যাক্সিস সূক্ষ্মভাবে টিউন করতে পারি। অপটিক্যাল সাইজ, গ্রেড এবং ওয়েট অ্যাডজাস্ট করুন।
লেবেল নিয়ে কাজ চালিয়ে যান। লেবেলগুলো অধিক ব্যবহারিক এবং বোতামের মতো ছোট ও সংক্ষিপ্ত জায়গায় ব্যবহৃত হয়। বোতামের কন্টেইনার এবং চিপের উপর লেবেলটি সঠিকভাবে প্রদর্শিত হওয়ার জন্য গ্রেডটি দৃষ্টিগতভাবে সামঞ্জস্য করুন।
টাইটেল , হেডলাইন এবং ডিসপ্লে ব্যবহার করে লেখাটিকে আরও পরিমার্জন করতে থাকুন। এই তিনটিই ছোট, মাঝারি থেকে উচ্চ গুরুত্ব আরোপকারী লেখার জন্য ব্যবহৃত হয়, যেমন পৃষ্ঠার শিরোনাম এবং বিভাগ। হেডলাইন এবং ডিসপ্লে তাদের আকার এবং উচ্চ গুরুত্বের কারণে আরও বেশি অভিব্যক্তিপূর্ণ হতে পারে। এখানে সমস্ত অক্ষগুলো নিয়ে নির্দ্বিধায় পরীক্ষা-নিরীক্ষা করুন!
টাইপ নির্বাচন করা হয়ে গেলে, ৪টি ডটে ক্লিক করে (+) চিহ্নটি যোগ করে একটি টেক্সট স্টাইল সেট করুন, যা সামঞ্জস্যপূর্ণ ও পুনঃব্যবহারযোগ্য টাইপ সেটিংস নিশ্চিত করে।

আপনি ম্যাটেরিয়াল থিম বিল্ডার ব্যবহার করে, অথবা M3 ডিজাইন কিটটি ডুপ্লিকেট করে ডিফল্ট ম্যাটেরিয়াল টাইপ স্কেলকে ফিগমা স্টাইল হিসেবে তৈরি করতে পারেন।

৬. UI-তে প্রয়োগ করা হয়েছে

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

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

৭. কোডে প্রয়োগ করুন

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

আমরা বাস্তবায়নের জন্য সাধারণ HTML এবং CSS ব্যবহার করব, MWC বা কোনো ফ্রেমওয়ার্ক নয়।

গুগল ফন্টসে পরিবর্তনশীল ফন্ট

আপনার ওয়েবসাইটে ভ্যারিয়েবল ফন্টসহ অসংখ্য ফন্ট সহজে প্রয়োগ করতে ফন্ট ডেলিভারি পরিষেবা হিসেবে গুগল ফন্টস ব্যবহার করুন!

কোন কোন ভ্যারিয়েবল ফন্ট পাওয়া যায় তা জানতে fonts.google.com- এ যান। সার্চ অপশনের নিচে, ফিল্টার করার জন্য ‘Show only variable fonts’ বিকল্পটি চেক করুন। ভ্যারিয়েবল ফন্টগুলোতে পেজের নিচের দিকে একটি প্লেগ্রাউন্ড থাকে, যেখানে আপনি ফন্ট ফ্যামিলিতে উপলব্ধ প্রতিটি অ্যাক্সিসের জন্য স্লাইডার সেট করতে পারেন।

CSS দিয়ে স্টাইল করুন

সব ফন্টে কাস্টমাইজ করার জন্য একই সংখ্যক অ্যাক্সিস থাকে না। বর্তমানে, ওয়েট, উইডথ, স্ল্যান্ট, ইটালিক এবং অপটিক্যাল সাইজ হলো সবচেয়ে প্রচলিত।

ভেরিয়েবল ফন্ট আসার আগে বিদ্যমান সাধারণ CSS ফন্ট প্রোপার্টি ব্যবহার করে এগুলো সেট করা যেত। যদিও (মে ২০২২ অনুযায়ী) সবকিছু এখনও ব্যাপকভাবে সমর্থিত নয় , নতুন প্রোপার্টি font-variation-settings ব্যবহার করে সমস্ত অক্ষ নির্ভরযোগ্যভাবে সেট করা যায়।

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

ফন্ট-স্টাইলের ক্ষেত্রে Slant (slnt) এবং Italic (ital) নির্ভরযোগ্য নয়।

৮. গুগল ফন্টস এপিআই দিয়ে ইম্পোর্ট করুন

আমরা এতদিন শুধু রোবোটো ব্যবহার করে এসেছি, কিন্তু fonts.google.com-এ এখন আমাদের জন্য উপলব্ধ সমস্ত ফন্টগুলো দেখুন।

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

কার্ডের নমুনা UI সম্বলিত এই কোডটি আপনার পছন্দের ওয়েব IDE-তে কপি করুন।

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

গত অনুশীলনে আমরা হেডলাইন , টাইটেল , বডি এবং লেবেলের জন্য যে স্টাইল স্পেকস সেট করেছিলাম, তা নোট করে নিন। সেগুলো মাথায় রেখে, রোবোটো ফ্লেক্স-এর পেজে যান। ফিগমাতে আপনার সেট করা স্পেকসের সাথে মিলিয়ে স্লাইডারগুলো সেট করুন, এবং তারপর সাইড ড্রয়ারে যোগ করার জন্য প্রতিটির জন্য এই স্টাইলটি সিলেক্ট করুন ।
ড্রয়ারের ভেতরে, নির্বাচিত স্টাইলগুলোর নিচে, ‘Use on the Web’ খুঁজুন। আপনার কোডে ফন্ট যোগ করার দুটি উপায় আছে: <link> অথবা @import। আপনার শুধু একটিই প্রয়োজন, চলুন @import নির্বাচন করি।
@import থেকে সেমিকোলন পর্যন্ত অংশটি কপি করুন এবং ইম্পোর্ট কমেন্টের পরে স্টাইল ট্যাগের ভেতরে পেস্ট করুন।
যেহেতু শুধুমাত্র Roboto Flex ফন্টটি ব্যবহৃত হচ্ছে, তাই ইম্পোর্ট কোডের অধীনে থাকা "CSS rules to specify families" অংশটি যোগ করে বডিতে ফন্ট-ফ্যামিলিটিকে কল করার ব্যবস্থা করুন।

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

এটি নির্বাচিত ফন্ট এবং স্টাইল সেট ইম্পোর্ট করে, কিন্তু অ্যাক্সিস রেঞ্জ ব্যবহার করে আপনি আলাদা আলাদা স্টাইলের পরিবর্তে স্টাইলগুলোর একটি অবিচ্ছিন্ন পরিসর ব্যবহার করতে পারেন। একটি রেঞ্জ তৈরি করতে, দুটি মানকে .. দিয়ে যুক্ত করুন (যেমন, ১০০..৯০০)। নিশ্চিত করুন যে আপনি শুধুমাত্র ফন্টের স্লাইডারে বিদ্যমান রেঞ্জগুলোই যোগ করছেন, নতুবা এটি সঠিকভাবে লোড হবে না।

এটি মসৃণ অ্যানিমেশন ট্রানজিশন এবং ব্রাউজারে পরীক্ষা-নিরীক্ষার জন্য সবচেয়ে ভালো, কারণ এটি সম্পূর্ণ পরিসরটি লোড করে এবং ডাউনলোডের অনুরোধকে আরও বড় করে তোলে।

৯. CSS ভেরিয়েবল ফন্ট প্রোপার্টি

আপনার ফন্ট ইম্পোর্ট করা হয়ে গেলে, চলুন ফিগমাতে ফিরে গিয়ে স্টাইল করার জন্য কিছু CSS প্রোপার্টি নিয়ে আসি এবং font-variation-settings CSS প্রোপার্টিটি দেখে নিই।

ডান প্যানেলে হেডলাইনের h1 সিলেক্ট করা থাকা অবস্থায়, উপরে থাকা ইন্সপেক্ট ট্যাবটি সিলেক্ট করুন। এটি প্যানেলটিকে ডেভ হ্যান্ডঅফের জন্য কোড ইন্সপেক্ট মোডে পরিবর্তন করে। কোড হলো শেষ সেকশন।
যদি আগে থেকে না করে থাকেন, তাহলে ফরম্যাট ড্রপডাউনটি CSS-এ পরিবর্তন করুন। ব্যবহৃত হলে, স্ট্যান্ডার্ড অ্যাট্রিবিউটগুলো ( font-weight, font-stretch, font-style, font-optical-sizing ) তালিকাভুক্ত করা আছে, এবং এর পরে রয়েছে নিম্ন-স্তরের font-variation-settings যেটিতে অনিবন্ধিত কাস্টম অ্যাক্সিসগুলো থাকে। font-variation-settings দিকে যাওয়ার আগে, প্রথমে স্ট্যান্ডার্ড অ্যাট্রিবিউটগুলো ব্যবহার করুন।

ফিগমা প্রস্থের (wdth) জন্য ফন্ট-স্ট্রেচ-এর পরিবর্তে ফন্ট-ভেরিয়েশন-সেটিংস ব্যবহার করে।

আমাদের h1 সিলেক্টরকে স্টাইল করতে type সম্পর্কিত এই CSS কোডটি কপি করুন।

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

কেয়ার কার্ডের টাইটেলের স্টাইল h2 তে কপি করা যাবে। বডি কপির ক্ষেত্রেও একই কাজ করুন, সেটি p তে কপি করুন। লেবেলের স্টাইলগুলো .label এ কপি করা যাবে।

১০. অভিনন্দন

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

আপনার কোনো প্রশ্ন থাকলে, টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় নির্দ্বিধায় আমাদের জিজ্ঞাসা করতে পারেন।

আরও ডিজাইন কন্টেন্ট এবং টিউটোরিয়ালের জন্য youtube.com/MaterialDesign- এ চোখ রাখুন।