DEV Community

Cover image for CSS-Typography

Posted on


Typography is a main thing when it comes to front-end designing.
Here, we can look more into typography tips.👇

Font-family 😊

1.In font-family, mostly we can use serif and sans-serif.sans- 
serif is widely used in modern-websites and we can use serif
in luxury websites.
2.In sans-serif , we can use Inter, Opensas, roboto,
Montserrat , worksans , lato etc
3.In serif , we can use Merriweather, aleso, playfair-display,
cormorant , cardo, lora etc
Enter fullscreen mode Exit fullscreen mode


1.Normal text 16px-32px
2.font-size of Long text can be more than 20px.
3.Headlines 50px and font-weight:600
4.For any text don't go more than font-weight:400 expect
Enter fullscreen mode Exit fullscreen mode


1.Don't make paragraph so long and Use less than 75 characters 
per line.
2.if paragraphs are long , user's will find it difficult to
read the information that you are trying to convey through
Enter fullscreen mode Exit fullscreen mode


1.For Normal text, line-height should be in between 1.5 and 2
2.For big Text go for less than 2
Enter fullscreen mode Exit fullscreen mode


1.Decrease letter spacing in headlines
2.For small headlines , make every letter in uppercase With
low letterspacing
Enter fullscreen mode Exit fullscreen mode

Don't do🤞

1.Don't justify text
2.Small blocks are fine
3.Don't center long text blocks
Enter fullscreen mode Exit fullscreen mode

Thanks so much for your awesome time. Let's get together again soon.

Buy Me A Coffee

Top comments (3)

alvaromontoro profile image
Alvaro Montoro • Edited

These are some nice tips. Thanks for sharing.

It would be good if you put them outside of code blocks, because they are difficult to read (especially on mobile)

rohitbrk profile image
rohit-br-k • Edited

Thanks for your comment.I think i need to learn more about dev's markdowns because am totally new to this. Sorry, I will change this mistake next time.😊

dev_shubham profile image
Shubham Jadhav

Nice, thanks for sharing