Foundation ফ্রেমওয়ার্কে টিপোগ্রাফি বা Typography ডিফল্টভাবে কাস্টমাইজযোগ্য, তবে এর কিছু স্ট্যান্ডার্ড সেটিংস রয়েছে, যা ফ্রেমওয়ার্কে ব্যবহৃত হয়। Foundation এর ডিফল্ট টিপোগ্রাফি সেটিংস _settings.scss ফাইলে পাওয়া যায়, যেখানে ফন্টের আকার, ফন্ট ফ্যামিলি, লাইন হাইট, ফন্ট ওয়েট ইত্যাদি কনফিগার করা থাকে।
Foundation ফ্রেমওয়ার্কের টিপোগ্রাফি সেটিংসটি মূলত Sass ব্যবহার করে কাস্টমাইজ করা হয়, যাতে আপনি সহজেই ফন্ট এবং অন্যান্য টেক্সট সম্পর্কিত সেটিংস পরিবর্তন করতে পারেন।
Foundation এর ডিফল্ট Typography সেটিংস
Foundation-এর ডিফল্ট টিপোগ্রাফি সেটিংস অন্তর্ভুক্ত থাকে কিছু গুরুত্বপূর্ণ ভ্যারিয়েবল যা নিচে দেওয়া হলো:
১. $font-family-base
এটি বেস ফন্ট ফ্যামিলি সেট করে, যা পুরো ওয়েবসাইটে ব্যবহৃত হবে। ডিফল্ট ভ্যালু হলো:
$font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
এটি বিভিন্ন ফন্টের একটি সিরিজের মাধ্যমে চেষ্টা করে, যেখানে প্রথমে 'Helvetica Neue' ফন্টটি চেষ্টা করা হয়। যদি সেটি না পাওয়া যায়, তবে অন্য ফন্টগুলো যথাক্রমে চেষ্টা করা হয়।
২. $font-size-base
এটি বেস ফন্ট সাইজ নির্ধারণ করে, যা ওয়েবসাইটের টেক্সটের সাধারণ আকার হবে। ডিফল্ট ভ্যালু হলো:
$font-size-base: 1rem;
এটি ১ রিম (rem) সাইজে সেট করা হয়, যা সাধারণত 16px সমান।
৩. $font-size-heading
এটি হেডিং ট্যাগগুলোর জন্য ডিফল্ট ফন্ট সাইজ নির্ধারণ করে। ডিফল্ট ভ্যালু:
$font-size-heading: 2.5rem;
এটি 2.5rem (প্রায় 40px) সাইজে সেট করা হয়।
৪. $line-height-base
এটি বেস লাইন হাইট, যা টেক্সটের লাইন স্পেসিং নির্ধারণ করে। ডিফল্ট ভ্যালু:
$line-height-base: 1.5;
এটি 1.5 লাইন হাইট সেট করে, অর্থাৎ টেক্সটের মধ্যে যথেষ্ট জায়গা থাকবে।
৫. $font-weight-base
এটি সাধারণ টেক্সটের ফন্ট ওয়েট (weight) নির্ধারণ করে, ডিফল্ট ভ্যালু হলো:
$font-weight-base: 400;
এটি সাধারণত normal বা regular ফন্ট ওয়েট হিসেবে ব্যবহৃত হয়, যা সাধারণত 400 এর সমান।
৬. $font-size-small
এটি ছোট টেক্সটের জন্য ফন্ট সাইজ নির্ধারণ করে:
$font-size-small: 0.875rem;
এটি ছোট ফন্টের জন্য 0.875rem (প্রায় 14px) সাইজ নির্ধারণ করে।
৭. $font-size-large
এটি বড় টেক্সটের জন্য ফন্ট সাইজ নির্ধারণ করে:
$font-size-large: 1.25rem;
এটি বড় ফন্টের জন্য 1.25rem (প্রায় 20px) সাইজ নির্ধারণ করে।
টিপোগ্রাফি কাস্টমাইজেশন
Foundation এর ডিফল্ট টিপোগ্রাফি সেটিংস পরিবর্তন করতে হলে, আপনাকে _settings.scss ফাইলে সংশ্লিষ্ট ভ্যারিয়েবলগুলো কাস্টমাইজ করতে হবে। উদাহরণস্বরূপ:
ফন্ট ফ্যামিলি পরিবর্তন করুন:
$font-family-base: 'Arial', sans-serif;ফন্ট সাইজ পরিবর্তন করুন:
$font-size-base: 1.125rem; // 18pxলাইনের উচ্চতা পরিবর্তন করুন:
$line-height-base: 1.6;ফন্ট ওয়েট পরিবর্তন করুন:
$font-weight-base: 500; // Medium weight
এই পরিবর্তনগুলো করলে আপনার ওয়েবসাইটের পুরো টিপোগ্রাফি কনফিগারেশন বদলে যাবে এবং আপনি একটি কাস্টম ডিজাইন পেতে পারবেন।
Foundation এর টিপোগ্রাফি টিপস
- ডিভাইসের সাইজ অনুযায়ী টেক্সট সাইজ পরিবর্তন করুন: Foundation আপনাকে media queries ব্যবহার করে মোবাইল, ট্যাবলেট, এবং ডেস্কটপের জন্য আলাদা টেক্সট সাইজ সেট করার সুযোগ দেয়।
- একই ফন্ট ফ্যামিলি ব্যবহার করুন: সাইটে একটি কনসিস্টেন্ট লুক এবং ফিলের জন্য একই ফন্ট ফ্যামিলি ব্যবহার করা ভালো।
- লাইন হাইট এবং মার্জিন ব্যবহারে সতর্ক থাকুন: সঠিক লাইন হাইট এবং মার্জিন ব্যবহার করলে টেক্সট আরও সহজে পড়া যায়।
Foundation এর ডিফল্ট টিপোগ্রাফি সেটিংস _settings.scss ফাইলে সঠিকভাবে কনফিগার করা থাকে, যা আপনাকে দ্রুত এবং সহজে ওয়েবসাইটের টেক্সটের ফন্ট, সাইজ, ওয়েট, এবং অন্যান্য প্রোপার্টি কাস্টমাইজ করতে সহায়তা করে। Foundation ফ্রেমওয়ার্কের এই টিপোগ্রাফি সেটিংস আপনার ডিজাইনে একটি সুন্দর এবং পেশাদার লুক আনে, যা বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।
Read more
