8 Pro Tips to Level UP Typography.

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. (wiki)
—
Good typography makes the text more effective, it reinforces the meaning of the text.

1. Type Scale

Start by categorizing your project in 1 of these 3 web/app archetypes:

1. Product Sites
   The main focus is to showcases the features, manufacturer, uses and a lot more, about a certain product or feature.
   - “least size contrast” is usually used.
   On these cases, it is recommended to use: Major Second Rule (1.125)
2. Blog/Info Sites
   The main focus is on showcasing individual blog articles or info. Typically a lot of text is included.
   - “less size contrast” is usually used.
   On these cases, it is recommended to use: Perfect Fourth Rule (1.333)
3. Marketing Sites
   The main focus is to inform and entertain visitors to your site such as blogging, podcasting, animation, forums, etc, meaning there are a lot of priorities on the text, for example, the title, the caption, price, etc.
   - “More size contrast” is usually used.
   On these cases, it is recommended to use: Golden Ration Rule (1,618)

2. Line Height

The same method is used while generating Line Height too, start by categorizing your project in 1 of these 3 web/app archetypes and then multiplying the font size with the recommended scale.

3. Line Length

If the lines are too short then the text becomes disjointed; if they are too long the content loses rhythm as the reader searches for the start of each line.

What to keep in mind:
1. Narrower columns are read more quickly.
2. Wider columns are read more slowly.
3. The minimum number of characters for short lines is 40.
4. The maximum number of characters for long lines is 70.

4. Alignment

Left-Aligned text is the most common setting for left-to-right languages such as English.

Center alignment works best when dealing with just a few short lines of text.

Right-aligned text is the most common setting for right-left languages, such as Arabic and Hebrew.

5. Font Paring

Incorporating multiple font combinations into one design is a tricky business, get it wrong, and things start to look messy.

What to keep in mind:
1. Too much different in font wights creates too much contrast.
2. When Combining serif with sans serif look for fonts that offer serif and sans serif variations.
3. Typepafes with similar heights pair better.

6. Legibility

Legibility refers to how well you see a letter, how a typeface is designed and how well one individual character can be distinguished from another.

7. Readability

Readability refers to weather an extended amount of text is easy to read, how easy you read the words, as in the long passage of text.

8. Contrast Ratio

(WCAG AA) Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

“Writing articles for people who are in a rush, I value your time, and probably like me, you like reading on the go. Keeping it short so you don’t have to skip any paragraph.”

❓Do you have any questions? Let me know:
Instagram — Linkedin — Behance — Dribbble