CSS排版

2025-06-07

CSS排版

字体排印是前端设计中至关重要的部分。
在这里,我们可以了解更多字体排印技巧。👇

字体系列😊

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
headlines
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
it.
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




不要这样做🤞


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




非常感谢你带来的美好时光。我们很快再聚吧。

给我买杯咖啡

文章来源:https://dev.to/rohitbrk/css-typography-24ai
PREV
番茄工作法的失败如何让我成为更好的程序员
NEXT
如何构建基本的 RAG 应用程序