CSS Typography for Beginners: Font Properties, Text Styling & Best Practices
Typography is one of the most important aspects of web design. Good typography improves readability, establishes visual hierarchy, and makes your website look professional. In this comprehensive guide, you'll learn everything you need to know about CSS typography – from basic font properties to advanced text styling techniques. Whether you're a complete beginner or looking to refresh your skills, this tutorial will help you master the art of styling text on the web.
1. Font Family – Choosing the Right Typeface
The font-family property defines which typeface (or list of typefaces) the browser should use. You can specify multiple fonts as a fallback stack. The browser will try the first one; if it's not available, it moves to the next, and so on.
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}Always include a generic family at the end: serif, sans-serif, monospace, cursive, or fantasy. For most websites, sans-serif fonts are clean and modern. Serif fonts are often used for print-like elegance.
Web Safe Fonts
Not all fonts are installed on every computer. Web safe fonts are those that are pre-installed on most operating systems. Common examples include: Arial, Verdana, Georgia, Times New Roman, Courier New, and Trebuchet MS. Using these ensures consistent display across devices without loading external resources.
Using Custom Fonts with @font-face
To use a custom font (like a Google Font), you can either embed it via a <link> tag or use the @font-face rule in your CSS. Here's an example using Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}2. Font Size – Scaling Text
font-size sets the size of the text. You can use absolute units (px, pt), relative units (em, rem, %), or viewport units (vw, vh). For accessibility, relative units are recommended because they respect user browser settings.
- px – fixed size, does not scale.
- em – relative to the parent element's font-size.
- rem – relative to the root element (
html) font-size. Most modern sites use rem. - vw – 1% of viewport width, useful for responsive typography.
html {
font-size: 16px; /* base size */
}
h1 {
font-size: 2.5rem; /* 40px */
}
p {
font-size: 1rem; /* 16px */
}3. Font Weight – Thickness of Characters
font-weight controls how thick or thin the text appears. Common values are normal (400), bold (700), or numeric values from 100 to 900. Not all fonts support every weight; you need to load the corresponding font files.
h1 {
font-weight: 700; /* bold */
}
blockquote {
font-weight: 300; /* light */
}4. Font Style and Font Variant
font-style can be normal, italic, or oblique. Italic is a specific typeface style; oblique is a slanted version of the regular font.
font-variant is used for small-caps (small-caps) or other OpenType features. A common use is to turn lowercase letters into small capitals.
em {
font-style: italic;
}
.small-caps {
font-variant: small-caps;
}5. Line Height – Vertical Spacing
line-height defines the amount of space above and below inline elements. It's crucial for readability. A common rule is to set line-height to 1.5–1.7 for body text. You can use a unitless number – it's relative to the element's font-size.
body {
line-height: 1.6;
}
h1 {
line-height: 1.2;
}6. Text Alignment and Direction
text-align sets the horizontal alignment: left, right, center, or justify. Justify stretches lines to fill the width, but can create uneven gaps. Use with care.
direction (ltr or rtl) is for internationalization.
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }7. Text Decoration – Underline, Overline, Line-Through
text-decoration is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness. Common uses: underline links, strikethrough for deleted text.
a {
text-decoration: none; /* remove underline from links */
}
.done {
text-decoration: line-through;
}
.important {
text-decoration: underline wavy red 2px;
}8. Text Transform – Change Case
text-transform can convert text to uppercase, lowercase, or capitalize (first letter of each word). It's purely visual; the original HTML content remains unchanged.
.all-caps {
text-transform: uppercase;
}
.title-case {
text-transform: capitalize;
}9. Letter Spacing and Word Spacing
letter-spacing (tracking) adjusts space between characters. Positive values increase spacing; negative values tighten. word-spacing adjusts space between words. Use sparingly to avoid harming readability.
.spaced {
letter-spacing: 2px;
}
.tight {
letter-spacing: -0.5px;
}
.big-gap {
word-sp