Typograph Styling

Here are some guides for typograph styling. In this guide we will talking about css "Font" properties, as a Front-End Developer We need to know about font styling rules and the purpose of font property.

1. Font size

The font-size property sets the size of the text.

Rules

1. don't set body text size below 16px, if we set below 16px it's not good in UX side. in our SOP the smallest font size is 16px (Except some special cases)

2. Make sure to check the font-size in responsive, because sometime the text looks so big in smaller resolution so we need to re-adjust the font size in responsive.

2. Font weight

The font-weight property sets how thick or thin characters in text should be displayed.

Examples

1. font-weight: 300;

2. font-weight: 400(normal);

3. font-weight: 600(semi-bold);

4. font-weight: 700(bold);

5. font-weight: 900(extra-bold);

3. Text Transform

The text-transform property controls the capitalization of text.

Examples

1. text-transform: lowecase;
2. text-transform: uppercase;
3. text-transform: capitalize;

Purpose

Sometimes designer will make the Font design all letter capitalize (Uppercase) or vice versa. the text-transform property will help you to make sure the text same like design.