Typography
This topic is going to have two blogs, in which we are going to read about what are fonts, font face, how a type face should be aligned, How to make hierarchy, font pairing, etc.
- Font - Set of characters of specific style and size.
- Font face - Specific style of a font. Also called as font style.
For example - Bold, Italics, Bold italics, etc.
3. Font families - A set of different font styles that are designed with the same style and shapes etc,
For example - Arial family ( arial black, arial HeBrew, arial narrow, arial HeBrew scholar, arial rounded MTBold, arial unicode MS.
Arial is a big family of fonts and is widely used.
4. Capline - The line at the top of a capital letter. The capital letter starts from this line.
5. Baseline - The line at which all the letters sit, basically the bottom line.
6. Meanline - Line at the top of the small letter. The small letter starts from this line.
7. Cap height - The height of the capital letter.
8. x-height - The height of the smallest letter.
If the x-height is greater, it is easier to read on small devices. Keeping in mind the ratio of x-height and cap height. The x- height should be 67% - 69% of the cap height.
9. Ascender - The portion of the small letter extended above the x mean line is called ascender.
10. Descender - The portion of the letter extended downwards the baseline.
11. Counter - There are two types of counter one is open and the other is closed.
Open counter - The portion of any letter which is open.
Closed counter - The portion of any letter which is closed.
Large counter = More legibility
12. Text alignment - Text can be aligned left, right, centre or justified. Each of them have their own significance.
Left aligned - It is mostly used all the time for body text, blog articles, books and almost all paragraphs are left aligned.
Right aligned - Not easy to read. It is suggested to use only for small amount of text.
Centre aligned - It should be used for important lined and should not be applied to a paragraph.
Justified aligned - Justified text is used mostly in books, newspaper and magazines, not recommended for websites.
13. Leading - The distance between the two base lined.
For headlines it should be 90-120%, i.e, 0.9-1.2
For body texts it should be 120-160%. i/e, 1.2-1.6
14. Kerning - Space between two characters.
15. Tracking - Space between two words.
16. Hyphens - Smallest dash, it is used between the words to join them. for example; re-examine.
17. en-dash - This is the second largest dash, it is used to show range. for example; 9-5pm, Aug-Sep, etc.
18. em - dash - This is the longest of all the dashes. This is used to show a break in thought.
19. Quotation marks - Quotation marks are of two type one is curly which is used in Talk and the other is the straight one which are simply used to bracket something important.
20. Typography hierarchy (scale) - Important things get bigger fonts than usual body text. But how to create this hierarchy.
Select a base font size, lets suppose 16px.
Now, select a scale ratio, lets go with the golden ratio which is 1.618
Step 1; Base size X Scale ratio = 16 X 1.618
which comes out to be = 25.88 px
Now, this 25.88px is called H1
Step 2; H1 X scale ratio = 25.88 X 1.618
which comes out to be = 41.88 px
Now, this 41.88 px is called H2.
Like this we can create the hole hierarchy.
21. How to know the line height - In this we have to multiply the px to 1.6