ওয়েব ডিজাইনের জন্য টাইপোগ্রাফি টিপস



১. ফন্ট সংখ্যা কম রাখা
৩ টিরও বেশি ফন্ট ব্যবহার করা একটি ওয়েবসাইট অগুছানো এবং অপ্রাসঙ্গিক দেখায়। মনে রাখবেন যে একাধিক ফন্টের আকার এবং স্টাইল একই সময়ে ব্যাবহার করলে যে কোন লেআউটকে ধ্বংস করতে পারে।

আপনি যদি একাধিক ফন্ট ব্যবহার করেন, তাহলে অবশ্যই খেয়াল রাখতে হবে যাতে দুইটা ফন্টের প্রস্থ সমান হয়। নীচের ফন্ট সমন্বয় উদাহরণ হিসেবে দেয়া হল। Georgia এবং Verdana ফন্টের সমন্বয় কাছাকাছি প্রস্থের আর Baskerville এবং Impact ফন্টের সমন্বয়ের মধ্যে অনেক পার্থক্য।


২. স্ট্যান্ডার্ড ফন্ট ব্যবহার করার চেষ্টা করুন
ফন্ট এম্বেডিং পরিষেবাগুলির (যেমন গুগল ওয়েব ফন্টগুলি বা টাইপকিট) অনেক আকর্ষণীয় ফন্ট রয়েছে যা আপনার ডিজাইনকে আরও সুন্দর করে তুলবে। কিছু জনপ্রিয় শীর্ষ গুগল ওয়েব ফন্টের উদাহরণ দেয়া হল।





৩. লাইন দৈর্ঘ্য সীমিত করা
প্রতিটি লাইনের সঠিক পরিমাণ অক্ষর থাকা আপনার লেখার পঠনযোগ্যতার চাবিকাঠি। প্রত্যেক লাইনে যদি ৬০টা কাছাকাছি করে অক্ষর দেয়া যায় তাহলে পাঠকের কাছে তার  পঠনযোগ্যতার বেশি থাকে এবং পাঠক পড়ে আনন্দ বুদ করে। 

মোবাইল ডিভাইসের জন্য, প্রত্যেক লাইনে ৩০-৪০ অক্ষর রাখা উচিত। নিচের উদাহরণে, দুইটা সাইটই মোবাইল থেকে দেখানো হয়েছে, প্রথম টায় প্রত্যেক লাইনে ৫০-৭৫ অক্ষর ব্যাবহার করা হয়েছে। আর দ্বিতীয় টায় ত্যেক লাইনে ৩০-৪০ অক্ষর ব্যাবহার করা হয়েছে।

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


আপনার চয়ন করা টাইপফেস ছোট স্ক্রিনে সুস্পষ্ট দেখায় তা নিশ্চিত করুন! টানা-লেখা এড়ানোর চেষ্টা করুন যেমন Vivaldi (নিচের উদাহরণে): যদিও ফন্টটা দেখতে সুন্দর, কিন্ত সহজে পড়া যায় না।



৫. পার্থক্যযোগ্য  ফন্ট ব্যবহার করুন
অনেক টাইপফেসের একই লেটারফর্মের কারণে  বিভ্রান্তির সৃষ্টি হয়, বিশেষ করে “i এবং “L” (নীচের ছবিটা খেয়াল করুণ) এবং অনবিজ্ঞ অক্ষর স্পেসিং এর জন্য যেমন “r” এবং “n” কে “m” এর মত দেখায়। সুতরাং যখন ফন্ট নির্বাচন করবেন, খেয়াল রাখবেন এই সমস্যায় যাতে আপনার ব্যাবহারকারীরা না পরে। 


৬. লাইনের সব অক্ষরে ক্যাপিটাল ব্যাবহার এড়িয়ে চলুন
সব ক্যাপিটাল টেক্সট - মানে প্রত্যেক লাইনের প্রত্যেক অক্ষর ক্যাপিটাল। আদ্যক্ষরসমস্টি বা লগোর ক্ষেত্রে ক্যাপিটাল অক্ষর ব্যাবহার করা যায়, কিন্ত যখন আপনি আপনার ব্যাবহারকারীকে কোন মেসেজ জাতিয় লেখা পরাবেন, তখন কখনোই ক্যাপিটাল অক্ষর ব্যাবহার করবেন নয়া। 

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

৮. যথেষ্ট কালার কনট্রাস্ট নিশ্চিত করা
টেক্সট এবং ব্যাকগ্রাউন্ড জন্য একই রং ব্যবহার করবেন না। W3C এর পরামর্শ অনুযায়ী বডি টেক্সট এবং ইমেজ টেক্সট কনট্রাস্ট রেসিয় হবেঃ

  • ছোট টেক্সট ব্যাকগ্রাউন্ডের বিপরীতে অন্তত ৪.৫ঃ১ অনুপাত থাকা উচিত।
  • বড় টেক্সট (14 pt বোল্ড / 18 pt রেগুলার এবং তার উপরে) ব্যাকগ্রাউন্ডের বিপরীতে অন্তত ৩ঃ১ অনুপাত থাকা উচিত।


Inspired From Shohel Rana Vai (http://shohel.net/)

Comments

Popular posts from this blog

রঙ তত্ত্বের পরিচয়

ডিজাইনের ৮ প্রাথমিক মূলনীতি

UI এবং UX ডিজাইন কি?

15 সহজ অভ্যাস যা আপনাকে আরও ভাল UX ডিজাইনার হতে সহায়তা করবে

Jobs of QA in SDLC