Typography A to Z in Bangla । টাইপোগ্রাফি সম্পর্কে জানুন সম্পূর্ণ বাংলায়।

Typography

What is Typography?

Typography is the art of arranging type.

ডিজাইনে ব্যবহৃত টেক্সট বা লেখা সাধারণ ভাবে উপস্থাপন না করে শৈল্পিক ভাবে বা ক্রিয়েটিভ ভাবে উপস্থাপন করার নামই টাইপোগ্রাফি 

অথবা,

টেক্সট বা লেখা কে শৈল্পিক ভাবে বা ক্রিয়েটিভ ভাবে উপস্থাপন করার নামই টাইপোগ্রাফি 

অর্থাৎ,

আমরা ডিজাইনে যা কিছু লিখছি ,সে লিখা গুলোকে বিভিন্ন পদ্ধতিতে উপস্থাপন করার নামই Typography. বা শৈল্পিক ভাবে উপস্থাপন করার নামই Typography.

অথবা,

টাইপোগ্রাফি হলো গ্রাফিক্যল ইলিমেন্টস এর অন্যতম একটি উপাদান।
কোন সমস্যার গ্রাফিক্যলি সমাধান কারার জন্য যে কয়টি ইলিমেন্টস ব্যবহৃত হয় তার মধ্যে অন্যতম ইলিমেন্টস হলো টাইপোগ্রাফি। টাইপোগ্রাফি খারাপ হলো পুরো উদ্দেশ্যটি ব্যহত হয়। অর্থাৎ যে ম্যাসেজ বা ইনফরমেশন টি দিতে চাই সেটি পুরোপুরি দেওয়া যায় না, যদি টাইপোগ্রাফি খারাপ হয়।

উপরের ছবিটি লক্ষ্য করুন তো, কোন ব্যাংক এর ডিজাইন টি আপনার কাছে প্রফেশনাল মনে হচ্ছে?  

নিশ্চয়ই  Pocket Bank কারণ তাদের সার্ভিস টি  সুন্দর করে প্রফেশনাল ভাবে ফুটিয়ে তুলেছে । তারা তাদের সার্ভিস এর সাথে যে Font ব্যবহার কারার দরকার তারা সেটাই করেছে যার ফলে যে কোন গ্রাহক তাদের সার্ভেস টি সহজে পড়তে পারে এবং বুঝতে পারে। 

অন্যদিগে Socket Bank তাদের সার্ভিস টি যে Font ব্যবহার করে উপস্থাপন করেছে সেটি প্রফেশনাল মানের নয় বা তাদের মতো কর্পোরেট বিজনেস এর সাথে যায় না। যে Font ব্যবহার করেছে সেই Font এর ফলে তাদের সার্ভিস টি ততভালো ভাবে ফুটে উঠেনি। গ্রাহক সেটা সহজে পড়তে পারে না, তাই তাদের কে প্রফেশনাল মানের মনে হচ্ছে না।

আরো কিছু উদাহরণ দেখা যাক:

উপরের উদাহরণ গুলো দেখে আপনি নিশ্চয়ই বুঝতে পেরেছেন একই লিখা নরমালি লিখার করণে আপনার কাছে তত গুরুত্বপূর্ণ মনে হচ্ছে না বা সহজে এর অর্থ মনে রাখতে পারছেন না।

কিন্তু শৈল্পিক ভাবে উপস্থাপন করার করণে আপনি বিষয়টি সহজেই বুঝতে পারছেন এবং মনে রাখতে পারছেন । এ কাজটাই হলো Typography.

For Add

Typefaces vs font

Typeface হল Font Family. কোন Font এর Family কে বলে Typeface

Font হল এর Family Member. কোন Typefacet এর প্রতিটি Member কে Font বলে

বিষয়টি উদাহরণ এর মাধ্যমে দেখা যাক:

উপরের উদাহরণ থেকে আমরা স্পস্ট বুঝতে পারলাম যে Montserrat হল Typeface.

আর Montserrat Bold, Montserrat Regular, Montserrat Light, etc হল Font.

Typefaces Classification

Typeface মূলত ৫ প্রকারের।

যথা:

1. Serif
2. Sans Serif
3. Blackletter
4. Monospaced
5. Display

01. Serif:

Serif হল পুরাতন Typeface, যে গুলোর মধ্যে আলাদা কিছু অতিরিক্ত অংশ থাক

• এ Font গুলো পুরাতন বা ট্রেডিশনাল ডিজাইনের ক্ষেত্রে ব্যবহৃত হয় ।
• ইংরেজী পত্রিকার ক্ষেত্রে ব্যবহৃত হয় ।
• টি-শার্ট ডিজাইনের ক্ষেত্রেও এ Typeface ব্যবহৃত হয়।

উপরে চিত্রে Serif Typeface এর অতিরিক্ত অংশ গুলো দেখানো হল।

02. Sans Serif:

Sans Serif হল আধুনিক Typeface. এ ধরণের Typeface এ Serif এর মত অতিরিক্ত অংশ থাকেনা

• আধুনিক সকল ডিজাইনে এটি ব্যবহৃত হয়।
• কর্পোরেট ডিজাইনের ক্ষেত্রে এ ধরণের Typeface ব্যবহৃত হয়।
• বর্তমানে সকল ওয়েবসাইটে এ ধরণের Typeface ব্যবহৃত হয়।
• মডার্ন সকল লোগোতে এ ধরণের Typeface ব্যবহৃত হয়।

উপরের চিত্রতে ‍Sans Serif Typeface এর একটি উদাহরণ দেওয়া হল।
এ Typeface টি Serif Typeface এর আধুনিক বা পরিবর্তীত রূপ।

03. BlackLetter:

BlackLetter একধরণের স্টাইলিস Typefac

নিচের উদাহরণ টি দেখলে স্পস্ট বুঝতে পারবেনঃ

উপরে চিত্রে BlackLetter Typeface এর একটি উদাহরণ দেখানো হল।
BlackLetter Typeface এই রকমের হয়ে থাকে।

04. Monospaced:

Monospaced Typeface এমন এক প্রকারের Typeface যেটার প্রতিটি অক্ষরের পরপর সমান স্পেস বা ফাকা থাকে

একটি উদাহরণ দেওয়া হল:

উপরের  Monospaced লেকাটির দিগে লক্ষ্য করুন  প্রতিটি অক্ষরের পরপর সমান স্পেস বা ফাকা রয়েছে। এ ধরণের  Typeface কে Monospaced  Typeface বলে।

05. Display: 

Display Typeface আরো ৫ প্রাকারের।

যথা:

1. Script
2. Signature
3. Fancy
4. all small
5. ALL CAPITALS

01. Script:

Script Typeface গুলো হল একধরণের পেচানো Typeface

এ ধরণের Typeface সার্টিফিকেট ও টিশার্ট ডিজাইনে বেশী ব্যবহৃত হয়।  

02. Signature :

Signature Typeface  গুলো হল একধরণের পেচানো এবং সিগনেচারের মতো Typeface

এ ধরণের Typeface Signature logo design  এ বেশী ব্যবহৃত হয়। 

03. Fancy:

Fancy Typeface  গুলো হল একধরণের স্টাইলিশ Typeface

এ ধরণের Typeface স্টাইলিশ ডিজাইন গুলোতে  ব্যবহৃত হয়।

04. all small:

all small Typeface গুলো হল এমন একশ্রেণির Typeface, যেগুলো আমরা যতোই বড় করার চেষ্টা করিনা কেন, এ ধরণের Typeface কখনোই বড় অক্ষরে বা Capital Letter এ লিখা যায় না। এ ধরণের Typeface কে all small Typeface বলে

05. ALL CAPITALS:

ALL CAPITALS Typeface গুলো হল এমন একশ্রেণির Typeface, যেগুলো আমরা যতোই ছোট করার চেষ্টা করিনা কেন এ ধরণের Typeface কখনোই ছোট অক্ষরে বা Small Letter এ লিখা যায় না। এ ধরণের Typeface কে ALL CAPITALS Typeface বলে

 

 

For Add

The Anatomy Of Typography

আমাদের মানব দেহের যেমন প্রত্যেকটা অংশের আলাদা আলাদা নাম রয়েছে, ঠিক তেমনি Typography এর প্রতিটি অংশের আলাদা নাম রয়েছে। আর সে নাম গুলোকে একসাথে বলা হয় Anatomy Of Typography

Anatomy গুলো হল:

1. Baseline
2. Ascender Line
3. X Height
4. Ascender
5. Descender line
6. Descender
7. Stem
8. Arm
9. Tail
10. Serif
11. Closed Counter
12. Ear
13. Loop
14. Bowl

সব গুলো অংশের নাম একটি উদাহরণ এর মাধ্যমে চিহ্নিত করে দেখানো হল:

Anatomy গুলো মুখস্থ করতে উপরের ছবিটি ডাউনলোড করে আপনার পিসির ওয়ালপেপার হিসেবে দিয়ে রাখতে পারেন। প্রফেশনাল কাজের ক্ষেত্রে খুবই উপকারে আসবে।

For Add

Kerning, Leading, Tracking

Tracking:

প্রতিটি Letter এর মাঝে স্পেস রাখা বা একটি Letter থেকে অন্য একটি Letter এর স্পেস বাড়ানো বা কমানো কে  Tracking বলে

 

Kerning:

কিছু কিছু Typeface  আছে যেগুলোতে একটি লেটারের সাথে অন্য একটি লেটার  লেগে যায় । ঐরকম লেটার গুলোর  মাঝখানে স্পেস বাড়ানো কে Kerning বলে

অনেক সময় কিছু লেখার মাঝে একটি লেটার এর সাথে আরেকটি লেটার লেগে যায় তখন সেখানে স্পেস বাড়ানোর জন্য যে কাজ টি করা হয় । অথবা দুটি লেটারে মাঝে স্পেস বাড়ানো কে Kerning বলে।

উপরে MATTER শব্দটিতে TT এক সাথে লেগে ছিল। তাই দুটি শব্দকে আলাদা করা হয়েছে Kerning ব্যবহার করে। এরকম এক সাথে লেগে থাকা দুটি  শব্দের মাঝখানে ক্লিক না করলে  Kerning কাজ করে না ।  দুটি  শব্দের মাঝখানে ক্লিক করে  Kerning বাড়াতে বা কমাতে হয়।  

Leading:  

Paragraph বা একাধিক লাইন বিশিষ্ট টাইটেল বা Heading Text এ ক্ষেত্রে, এক লাইন থেকে অন্য লাইনের উপরে নিচে দূরত্ব বুঝাতে যে কাজটি করা হয় তাকে Leading বলে

অথবা,

একধিক লাইন উপরে নিচে লিখলে, উপরে নিচে এক লাইন থেকে অন্য লাইন এর যে দূরত্ব তা বুঝাতে যে কাজটি করতে হয় বা তাকে Leading বলে

উপরে  চিত্রে একটি Paragraph এ Auto Leading ব্যবহার করে দেখানে হয়েছে।

Leading কত দিব?

Leading কত দিবেন সেটা নির্ভর করে Typeface এবং ডিজাইন এর উপরে। তারপরও কিছু নিয়ম দেওয়া হল:

1. Auto Line Height
2. Golde Line Height
3. Standard Line Height

1. Auto Line Height : সফটওয়্যারে সাধারণত Auto Line Hight বা Auto Leading দেওয়া থাকে। এটা অনেক সময় খুবই কার্যকরী । কারণ Typeface এর ভিন্নতার কারণে বারবার যাতে Leading পরিবর্তন করা না লাগে তাই Auto Line Hight বা Auto Leading কিছু কিছু ক্ষেত্রে আমরা Auto Line Hight বা Auto Leading ব্যবহার করব।

2. Golde Line Height: Auto Line Hight অনেক সময় স্টেন্ডার্ড হয়না। তাই একটি স্টেন্ডার্ড Line Hight রয়েছে যাকে Golde Line Hight বলে। এ Golde Line Hight হল :

Font Size*1.5/1.68 আমরা ডিজাইনে এটি নির্দিধায় ব্যবহার করতে পারি।

3. Standard Line Height: Golde Line Hight এ যদি ডিজাইনটা স্টেন্ডার্ড না হয় তাহলে Standard কিছু Line Hight আছে যে গুলো ব্যবহার করা যেতে পারে। Standard Line Hight গুলো হল: Font Size*1.4/1.6

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

ট্রিক্স:  যদি Background কালার White হয়ে তাহলে Auto Line Hight ব্যবহার করতে পারেন। আর যদি ব্যাগ্রাউন্ড কালার Durk হয় তাহলে Golde Line Hight বা Standard Line Hight ব্যবহার করতে পারেন।

For Add

Rules Of Typography

01. Light+ Bold

যখন Light Font ব্যবহার করা হবে, তারপর পাশে Bold Font ব্যবহার করতে হবে।

02. Regular/ Medium + Extra Bold

যখন Regular/ Medium ব্যবহার করা হবে, পাশে Extra Bold Font ব্যবহার করতে হবে।

03. Double Point Size

Paragraph এর Font সাইজ থেকে  Heading এর ফন্ট সাইজ হবে  Paragraph এর সাইজের তুলনায় দুই থেকে তিনগুণ বেশি।

04. Don't Use Justify

Justify Align ব্যবহার করা যাবে না। কারণ Justify সমান করতে গিয়ে মাঝের Word এর Space বাড়িয়ে দেয়।

05. Don't Use Right Align, Use Left Align

Right Align ব্যবহার করা যাবে না । কারণ আমাদের মস্তিষ্ক বাম দিক থেকে পড়তে স্বচ্ছন্দ বোধ করে।

06. Make it Readable

এমন Font ব্যবহার করা যাবে না, যেটা পড়তে পারে না বা বুঝতে পারে না বা পড়তে পারলে বুঝতে পারেনা । এমন Font ব্যবহার করতে হবে যেটা মানুষ খুব সহজে পড়তে পারে বা বুঝতে পারে।

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

07. Be Careful With Capitalization

কখনোই দুই থেকে তিন লাইন Capital Letter করব না, সেটা যতই গুরুত্বপূর্ণ হোক।

যদি ছোট লাইন হয় সে ক্ষেত্রে সবগুলো Capital Letter করা যাবে সেটা অবশ্যই এক লাইনে এবং ছোট হতে হবে।

08. Use Proper Leading

Leading খুব ভালোভাবে করতে হবে । পুরো Paragraph এ যাতে সমান Leading থাকে।

09. Use Proper Tracking

Paragraph এর মাঝে এমন Traking ব্যবহার করা যাবে না, যেটার কারনে সে Word এর আসল সৌন্দর্য নষ্ট হয়ে যায়।

10. Think about Line Length

Line Length ঠিক রাখতে। Paragraph কে ভেঙ্গে ভেঙ্গে এত বড় করা যাবে না, যেটা গ্রাহক দেখামাত্র ভয় পেয়ে যাবে, পড়তে চাইবে না, সে দিকে খেয়াল রাখতে হবে।
Paragraph কে এমনভাবে সাজাতে হবে যাতে গ্রাহকের কাছে ছোট মনে হয়।

11. Never Use Similar Colors

Background Color এর সাথে মিশে যায় বা মিলে এরকম কালার ব্যবহার করা যাবে না।

12. Don't Make Stretch

কখনোই Text কে টেনে পাশেই বা উপরে নিচে ছোট বড় করা যাবে না।

13. Emphasis in Type

Paragraph এর মাঝের দুই বা তিন লাইন গুরুত্বপূর্ণ হলে তা ফুটিয়ে তোলার জন্য সবগুলো Capital Letter করার দরকার নাই, তবে Bold/Medium করে দিতে পারি। এক লাইন বা দুই , তিনটা Word হলে ভিন্ন কথা।

14. Avoid These typefaces

নিচের Typeface গুলো ব্যবহার করা যাবে না।

আশা করি বুঝতে পেরেছেন।

For Add

Pairing Typeface

যে কোনো Design এ Text একটি গুরুত্বপূর্ণ অংশ। আর সে Text এর ৩ টি অংশে থাকে।

তা হল:

1. Heading Part
2. Sub Heading Part
3. Paragraph Text

এ তিন জিনিসের মধ্যে কীভাবে Combination করব সেইটাই হলো Pairing Typeface.

Rule-01
Different Typeface

Header এবং Paragraph দুইটা ভিন্ন Font/ Typeface এ রাখলে ভালো দেখায়।

যেমন: Header Serif Font/ Typeface এবং Paragraph Sans Serif Font/ Typeface.

অথবা, Header Sans Serif Font/ Typeface এবং Paragraph Serif Font/ Typeface.

Rule-02
By Using Contrast

Header Capital Letter এবং Uppercase করে Contrast তৈরি করা।

The Header Can be Bold Size.

Header এর সাইজ টি Bold করেও Contrast করা যায়।

The Header Can be in Color.

Header এর কালার পরিবর্তন করেও Contrast করা যায়।

Rule-03
By Using Spacing

Header এর Spacing বাড়িয়ে ।

Rule-04
By Using Consistency

যে ইমশন বা থিম নিয়ে কাজ করছি সেটার সাথে মিল রেখে Typeface ব্যবহার করতে হবে।

বিঃদ্র্রঃ Hierarchy নিয়ে ডিজাইন প্রিন্সিপাল ব্লগে আলেচনা করা হবে।

সর্বশেষ আপডেট: ২২ আগস্ট ২০২৩

তথ্য সূত্র:

1. Shuvo Paul এর Graphic Design Course

2. Youtube

3. Google

লেখক ও গবেষক

--------------

মোঃ ইউসুফ

প্রফেশনাল গ্রাফিক্স ডিজাইনার
(মোশন গ্রাফিক্স ডিজাইনার)

Contact and Follow

E-mail: [email protected]
Facebook: https://www.facebook.com/mdyousuffb2
Twitter: https://twitter.com/mdyousuffb

Linkedin: https://www.linkedin.com/in/mdyousuffb/
Behance: https://www.behance.net/mdyousuffb
Dribbble: https://dribbble.com/mdyousuffb
Instagram: https://www.instagram.com/mdyousuffb/

যে কোন সমস্যায় গ্রুপে পোস্ট করুণ: FBITSchool

পেইজে মেসেজ দিতে পারেন: FBITSchool