টাইপোগ্রাফি বলতে বোঝায় ওয়েবসাইটে টেক্সট উপস্থাপনের পদ্ধতি। এটি শুধু টেক্সট এর সৌন্দর্য বৃদ্ধি করে না, বরং সামগ্রিক ডিজাইনের সৌন্দর্য বাড়ায়।
১. ফন্ট নির্বাচন: সঠিক ফন্ট বাছাই করুন
সঠিক ফন্ট নির্বাচনকে টাইপোগ্রাফির প্রথম ধাপ বলা হয়। উদাহরণ হিসেবে:
- Serif ফন্ট (যেমন Times New Roman): ক্ল্যাসিক এবং ফরমাল লুকের জন্য Serif ফন্ট ইউজ করতে পারেন।
- Sans-Serif ফন্ট (যেমন Roboto): আধুনিক লুকের জন্য Sans-Serif ফন্ট ইউজ করতে পারেন।
- Monospace ফন্ট (যেমন Fira Code): প্রোগ্রামিং রিলেটেড ওয়েবসাইট, কোড ব্লগ বা টেকনিক্যাল কনটেন্টের জন্য Monospace ফন্ট ইউজ করতে পারেন।
রিয়েল লাইফ উদাহরণ:
যদি আপনি একটি বিজনেস ওয়েবসাইট ডিজাইন করেন, হেডিং-এর জন্য “Poppins” এবং বডি টেক্সটের জন্য “Roboto” বেছে নিতে পারেন।
২. সঠিক ফন্ট সাইজ সেট করুন
ফন্ট সাইজ এমন হতে হবে যা ছোট বড় সকল ডিভাইসের স্ক্রীনে পড়া আরামদায়ক হয়।
- H1 (হেডিং): বড় এবং আকর্ষণীয় । যেমন 32px এর আশেপাশে রাখতে পারেন। 32px থেকে একটু বেশি হলেও অনেক ক্ষেত্রে সৌন্দর্য বৃদ্ধি পায়।
- বডি টেক্সট: আরামদায়ক (যেমন 16px এর আশেপাশে রাখতে পারেন)।
ব্যাখ্যা:
- বড় স্ক্রিনে হেডিং আকর্ষণীয় করতে সাইজ বৃদ্ধি করা প্রয়োজন।
- মোবাইল স্ক্রিনে ফন্ট সাইজ ছোট রাখা প্রয়োজন।
৩. লাইন হাইট এবং লেটার স্পেসিং ঠিক করুন
লাইন এবং অক্ষরের মধ্যে যথাযথ স্পেস রাখা খুবই গুরুত্বপূর্ণ।
- লাইন স্পেসিং (Line Height): 1.5em বা তার থেকে একটু কম বেশি করতে পারেন।
- লেটার স্পেসিং: হেডিং-এ সামান্য বেশি রাখুন। যদি লেটারগুলো খুব ঘন থাকে, সেক্ষেত্রে পাঠক পড়তে সমস্যায় পড়বে। তাই লেটার স্পেসিং একটু বাড়িয়ে দিন।
৪. ফন্ট এবং ব্যাকগ্রাউন্ডের কালার নির্বাচন
ফন্ট এবং ব্যাকগ্রাউন্ডের মধ্যে কালারের অ্যাডজাস্টমেন্ট বজায় রাখুন।
- ডার্ক ব্যাকগ্রাউন্ডে লাইট ফন্ট (যেমন লাইট গ্রে কালার) ব্যবহার করতে পারেন।
- ব্র্যান্ডেড লুকের জন্য হেডিং এবং বাটনে অ্যাকসেন্ট কালার ব্যবহার করতে পারেন।
একটি লাইট গ্রে ব্যাকগ্রাউন্ডে গাঢ় কালো ফন্ট ব্যবহার করলে সেটি চোখের জন্য আরামদায়ক হয়।
৫. রেসপন্সিভ টাইপোগ্রাফি ব্যবহার করুন
আজকের যুগে, টাইপোগ্রাফি শুধু ডেস্কটপে নয়, মোবাইল এবং ট্যাবলেটেও একইরকম আকর্ষণীয় হতে হবে।
- ডেস্কটপে: H1 এর সাইজ 32px এর আশেপাশে রাখতে পারেন।
- মোবাইলে: H1 এর সাইজ 24px এর আশেপাশে রাখতে পারেন। বডি ফন্ট 14px এর আশেপাশে রাখতে পারেন।
একটি প্রিমিয়াম টেমপ্লেটে H1 এবং প্যারাগ্রাফের সাইজ ডিভাইস অনুযায়ী পরিবর্তিত হতে দেখবেন।
৬. ফন্ট পেয়ারিং: একটি বা দুইটি ফন্ট ব্যবহার করুন
একাধিক ফন্ট ব্যবহার করলে টাইপোগ্রাফি অব্যবস্থাপনা মনে হবে।
- হেডিং-এর জন্য “Poppins” এবং বডি টেক্সটের জন্য “Roboto” ব্যবহার করতে পারেন।
- সর্বোচ্চ দুইটি ফন্ট যথেষ্ট।
একটি টেমপ্লেটে যদি হেডিং এবং বডি টেক্সটের ফন্ট মিল থাকে, তাহলে সেটি দেখতে আরও প্রফেশনাল হয়।
টাইপোগ্রাফি শেখার এই যাত্রা শুরু করুন। এটি আপনার ডিজাইন স্কিলকে
বৃদ্ধি করে আপনাকে একজন প্রফেশনাল ওয়েব ডিজাইনার হিসেবেও প্রতিষ্ঠিত করবে।