ওয়েব টাইপোগ্রাফির ভাল, খারাপ এবং দুর্দান্ত উদাহরণ। ওয়েব টাইপোগ্রাফির ভাল, খারাপ এবং দুর্দান্ত উদাহরণ সুন্দর টাইপোগ্রাফি

একটি দুর্দান্ত ওয়েবসাইট সুন্দর টাইপোগ্রাফি দিয়ে শুরু হয়। এবং যখন কিছু নিয়ম ভাঙা যেতে পারে, কখনও কখনও সঠিক জিনিসটি হল ভাল টাইপোগ্রাফি কী এবং কীভাবে এটি তৈরি করা যায় তার মূল নীতিগুলিতে ফিরে যাওয়া।

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

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

আকার এবং অনুক্রম

আকার বিষয়ে. পঠনযোগ্য টাইপোগ্রাফি তৈরি করতে, এটি একটি গুরুত্বপূর্ণ ফ্যাক্টর হতে পারে। ছোট টেক্সট দেখা কঠিন, একা পড়া যাক, কিন্তু খুব বড় টেক্সট লাইনের উচ্চতা ছাড়িয়ে যাবে এবং বিভ্রান্তির দিকে নিয়ে যাবে।

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

ট্র্যাকিং এবং কার্নিং

ট্র্যাকিং এবং কার্নিং প্রায়ই বিভ্রান্ত হয়। কার্নিং হল তাদের আকৃতির উপর নির্ভর করে অক্ষরগুলির মধ্যে ব্যবধান বেছে বেছে পরিবর্তন করার প্রক্রিয়া। ট্র্যাকিং অক্ষরের সেটের মধ্যে ব্যবধান পরিবর্তন করছে, যেমন, অনুচ্ছেদ বা পাঠ্যের সম্পূর্ণ ব্লক।

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

আপনি যে ফন্ট শৈলী প্রয়োগ করেন তার সংখ্যা সীমিত করুন

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

শৈলী মিশ্রিত করুন এবং তুলনা করুন

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

এই ছোট বিবরণগুলি কীভাবে এই ফন্টগুলি একসাথে দেখায় এবং পাঠ্যটি পড়তে কতটা সহজ তাতে একটি বড় পার্থক্য তৈরি করবে।

স্থানান্তর এবং প্রান্তিককরণ

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

ফন্ট পরিবর্তন করবেন না

কখনো ফন্ট পরিবর্তন করবেন না। এটি ঘন, পাতলা বা লম্বা করার চেষ্টা করবেন না। অন্য একটি চয়ন ভাল.

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

যদি ফন্টটি আপনার সাথে মানানসই না হয় তবে অন্য কিছু সন্ধান করুন। আইডেন্টিফন্ট অনুরূপ ফন্ট টুল ব্যবহার করুন, একটি টুল যা অনুরূপ ফন্ট সনাক্ত করে।

বৈপরীত্য

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

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

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

ফালা বিন্যাস ডায়াল

টাইপবার ফরম্যাট হল টেক্সট ধারণকারী পাত্রের আকার। এটি সম্পূর্ণ পাঠ্য ফ্রেমের প্রস্থ বা একটি একক কলাম হতে পারে।

লাইন বিন্যাস গুরুত্বপূর্ণ কারণ স্ক্রিনে অক্ষরের সংখ্যা (স্পেস, বিশেষ অক্ষর এবং বিরাম চিহ্ন সহ) পঠনযোগ্যতাকে প্রভাবিত করে। যদি লাইনগুলি খুব দীর্ঘ বা খুব ছোট হয় তবে ব্যবহারকারীর চোখের পক্ষে সেগুলি দিয়ে নেভিগেট করা কঠিন হবে৷

The Elements of Typographic Style থেকে: “45 থেকে 75 পর্যন্ত অক্ষরের যে কোনো সংখ্যা, একক-কলাম টাইপসেটিং-এর জন্য একটি সন্তোষজনক লাইন দৈর্ঘ্য হিসেবে বিবেচিত হয়। একটি 66-অক্ষরের স্ট্রিং (অক্ষর এবং স্পেস সহ) আদর্শ বলে বিবেচিত হয়। মাল্টি-কলাম টাইপিংয়ের জন্য, আদর্শ মধ্যম বিকল্পটি 40-50 অক্ষর দীর্ঘ একটি লাইন হবে।"

যদিও এই বইটির প্রকাশের সময় কেউ মোবাইল টাইপোগ্রাফি সম্পর্কে চিন্তা করেনি, বহু-কলাম টাইপসেটিং সুপারিশ প্রাসঙ্গিক রয়ে গেছে। ছোট পর্দার ক্ষেত্রে, আপনি প্রতি লাইনে 35টি অক্ষরও ব্যবহার করতে পারেন।

ক্যারি কাজিনের নিবন্ধটির অনুবাদ

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

পাতলা কাগজের টেক্সচারের সাথে মিলিত, এই টাইপোগ্রাফি একটি বই পড়ার অনুভূতি তৈরি করে।

সিম্পলি গাম

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

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

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

সংক্ষিপ্ত উপসংহার

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

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

এই তালিকাটি দ্বিতীয় প্রান্তিকের ফলাফলের ভিত্তিতে সংকলিত হয়েছে। 2008। আগের "হিট প্যারেড" পাওয়া যাবে এবং.

প্রতিটি উদাহরণের সাথে একটি সংক্ষিপ্ত মন্তব্য রয়েছে এবং স্ক্রিনশটে ক্লিক করলে মূল সাইটে চলে যায়।

বীজ সম্মেলন

নিউজ ডিজাইনিং

OmniTI

ডিজাইনার.আইটি

ডিজাইন ভিউ

WordPress.org এবং WP 2.5.x অ্যাডমিন

আমাদের টাইপ

জাহাজের পাটাতন

হেল হ্যাঁ দোস্ত

তথ্য স্থপতি

নাজ হামিদ

জন ট্যান

বিবেচনার মধ্যে

এলিয়ট জে স্টকস

আমরা তৈরি জিনিস

পরের প্রবন্ধে, "ওয়েবের জন্য টাইপোগ্রাফির প্রতি গভীর দৃষ্টিভঙ্গি," আমরা এই সাইটগুলির কয়েকটিকে ঘনিষ্ঠভাবে দেখব।