CSS Font Properties: Family, Size, Weight and Style
CSS font properties control how text is rendered while HTML provides the text's meaning and structure. Start with a readable font stack, a sensible size and line height, then add weight or style only where it supports the design.
body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}font-family Top ↑
List preferred fonts first and finish with a generic family such as serif, sans-serif or monospace. Quote family names containing spaces.
.article { font-family: Georgia, "Times New Roman", serif; }font-size Top ↑
Relative units such as rem and em adapt well to scalable designs. Pixels are also valid, but avoid preventing users from zooming or increasing text size.
font-weight Top ↑
.lead { font-weight: 600; }Common values are normal, bold and numeric weights from 1 to 1000 where supported by the active font.
font-style and font-variant Top ↑
.note { font-style: italic; }
.caps { font-variant: small-caps; }line-height Top ↑
A unitless line-height such as 1.5 is often convenient because descendants inherit a proportional value rather than a fixed length.
font shorthand Top ↑
.summary {
font: italic 600 1rem/1.6 Georgia, serif;
}In the shorthand, font-size and font-family are required. The slash introduces the optional line-height.
Try the existing Plus2net font tools Top ↑
CSS font generator Font CSS demo Font/text color Legacy <font> tag Font face and modern font loading
Frequently Asked Questions Top ↑
What should the last font-family value be?
Use a suitable generic family so the browser has a fallback category.
Should font names with spaces be quoted?
Yes, quoting multi-word family names is the clearest approach.
Is the old HTML font tag still recommended?
No. Use CSS font and color properties for presentation.
What is a good line-height?
It depends on the typeface and design, but body text often benefits from a comfortable unitless value around the mid-1.x range rather than tightly packed lines.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
