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
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)
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
font-weight: 300;
font-weight: 400(normal);
font-weight: 600(semi-bold);
font-weight: 700(bold);
font-weight: 900(extra-bold);
3. Text Transform
The text-transform property controls the capitalization of text.
Examples
text-transform: lowecase;
text-transform: uppercase;
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.
Last updated