DEV Community

Cover image for CSS-Typography
rohit-br-k
rohit-br-k

Posted on

CSS-Typography

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




font-size😒


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
headlines
Enter fullscreen mode Exit fullscreen mode




paragraphs🤦‍♂️


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
it.
Enter fullscreen mode Exit fullscreen mode




line-height😢


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




Letter-spacing👌


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

Discussion (3)

Collapse
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)

Collapse
rohitbrk profile image
rohit-br-k Author • 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.😊

Collapse
dev_shubham profile image
Shubham Jadhav

Nice, thanks for sharing