নতুনদের জন্য ওয়েব ডিজাইনে ফন্ট ব্যবহারের গাইড: কিভাবে সঠিক ফন্ট বাছাই করবেন।

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

ফন্ট ব্যবহারের সময় যে বিষয়গুলো মাথায় রাখা প্রয়োজন :memo:

১. রিডেবিলিটি সবসময় প্রথমে রাখুন :mag:

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

  • Roboto
  • Open Sans
  • Lato

২. সঠিক হেডিং এবং বডি ফন্ট ব্যবহার করুন :label:

ওয়েব পেজে সাধারণত বড় শিরোনামের জন্য একটি ফন্ট এবং বডি টেক্সটের জন্য আরেকটি ফন্ট ব্যবহার করা হয়।
উদাহরণ:

  • হেডিং ফন্ট: Montserrat, Playfair Display
  • বডি ফন্ট: Roboto, Open Sans

৩. কিছু ফন্ট একসঙ্গে ভালো কাজ করে :handshake:

ফন্ট কম্বিনেশন গুরুত্বপূর্ণ। ভুল কম্বিনেশন সাইটকে এলোমেলো করে দিতে পারে।
কিছু ভালো ফন্ট কম্বিনেশন:

  • Playfair Display (হেডিং) + Lato (বডি)
  • Montserrat (হেডিং) + Roboto (বডি)
  • Poppins (হেডিং) + Nunito (বডি)

৪. কম ফন্ট ব্যবহার করুন :exclamation:

একই ওয়েবসাইটে দুই-তিনটির বেশি ফন্ট ব্যবহার করা উচিত নয়। :stop_sign: খুব বেশি ফন্ট ব্যবহার করলে সাইট এলোমেলো দেখায় এবং লোডিং টাইম বেড়ে যায়।


যে ২০টি ফন্ট একজন নতুন ডিজাইনারের স্বরণে রাখা প্রয়োজন :books:

১. Roboto
২. Open Sans
৩. Lato
৪. Montserrat
৫. Poppins
৬. Source Sans Pro
৭. Raleway
৮. Noto Sans
৯. Ubuntu
১০. Merriweather
১১. Nunito
১২. Playfair Display
১৩. Work Sans
১৪. PT Sans
১৫. Oswald
১৬. Fira Sans
১৭. Cabin
১৮. Josefin Sans
১৯. Inconsolata
২০. Droid Sans

যেভাবে গুগল ফন্ট ইউজ করবেন :chart_with_upwards_trend:

  1. গুগল ফন্টের ওয়েবসাইটে যেতে হবে।

  2. সেখান থেকে পছন্দ অনুযায়ী যেকোন একটি ফন্টকে সিলেক্ট করতে হবে।

  3. Get Font বাটনে ক্লিক করলে Get Embed Code বাটন চলে আসবে।

  4. Get Embed Code বাটনে ক্লিক করলে নিচের মত একটি ইন্টারফেস আসবে।

  5. বাম অংশ থেকে ফন্টের বিভিন্ন ওয়েট নির্দিস্ট করা যাবে।

  6. ডান অংশে বিভিন্ন অপারেটিং সিস্টেমের জন্য অপশন রয়েছে। সেখান থেকে যেকোন একটি সিলেক্ট করতে হবে।

  7. html ফাইলে ইনসার্ট করার জন্য <link> অপশন এবং css ফাইলে ইনসার্ট করার জন্য @import অপশন ইউজ করতে পারেন।

একজন ভালো ডিজাইনার হতে হলে ফন্টের সঠিক ব্যবহার শেখা জরুরি।:seedling: তাই ফন্ট সম্পর্কে যথাযথ আইডিয়া অর্জন করে আপনার ডিজাইনকে আরও প্রফেশনাল করে তুলতে পারেন :art:

হ্যাপি লার্নিং :sunflower:

11 Likes

জাযাকাল্লাহু খাইরান ভাই পোস্ট পরে অনেক কিছু জানতে পারলাম।

1 Like

আপনারা পড়েন বলেই লিখতে ভালো লাগে। :sunflower:

3 Likes

নতুনদের জন্য অনেক উপকারী পোস্ট। অনেক ধন্যবাদ ভাই।

1 Like

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

1 Like

জাযাকাল্লাহ ভাই…
ফন্টের নাম মূখস্ত করতে দাঁত ভাঙ্গে যাবে

1 Like

অটোমেটিক মুখস্ত হয়ে যাবে। ইচ্ছা করে মুখস্ত করার প্রয়োজন নাই।

1 Like