CSS Font

Fonts in CSS are basically your text’s wardrobe: size, weight, family, style, spacing, and color. In this tutorial, you’ll learn the essential font properties (plus a few extras) with interactive examples.

Quick idea: most font styling is done on the element containing text (like p, h2, button), but it can also be inherited from a parent (like body).

CSS font: the big picture

When people say “CSS font”, they usually mean a cluster of properties that control how text looks:

  • font-family chooses the typeface.
  • font-size sets the size.
  • font-weight sets thickness (normal, bold, or numeric).
  • font-style controls italic/oblique.
  • line-height controls the vertical spacing between lines (huge for readability).
  • letter-spacing and word-spacing adjust spacing between letters and words.
  • color sets the text color (often mentioned as “font color”).

Let’s start with a single playground where you can toggle between a few font “looks”. 

.demo-text {
  font-family: system-ui, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0;
  color: #111;
}
  
.demo-text {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #0b3d91;
}
  
.demo-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  letter-spacing: 0;
  color: #7a2e00;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.demo-wrap {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #f6f6f6;
}

.demo-title {
  font-family: system-ui, Arial, sans-serif;
  margin: 0;
}

.demo-text {
  margin: 0;
}

.demo-note {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
  

  
Font playground: same text, different feel

  

    The quick brown fox jumps over the lazy dog. 0123456789.
  

  

    Click different CSS snippets above to switch the “font vibe”.

CSS font-size

font-size controls how big text is. You’ll most commonly use: px (absolute-ish), rem (relative to the root), and sometimes em (relative to the element’s parent).

  • px is straightforward, but can be less flexible for user preferences.
  • rem is a popular default because it respects browser font settings better.
  • em is powerful but can “compound” when nested.

In most projects, using rem for type sizes is a friendly default.

Font-size interactive slider

Drag the slider to see how size affects readability and layout. 

.demo-text {
  font-size: 1.1rem;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.demo-box {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #ffffff;
}

.demo-text {
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
}
  

  

    Resize me with the slider. Notice how line breaks and rhythm change as the text grows.

Font-size common patterns

People often ask, “What font size should I use?” A decent starting point is: body text around 1rem, then scale headings up from there. But always adjust based on your design and audience.

CSS font color

In CSS, “font color” is simply the color property. It affects text, icons (SVG), and sometimes more.

Most important rule: make sure your text has enough contrast against its background. If your users have to squint, your design loses points. 

.demo-text {
  color: #111;
}
  
.demo-text {
  color: rgb(11, 61, 145);
}
  
.demo-text {
  color: hsl(155 55% 28%);
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #f6f6f6;
}

.demo-text {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
}

.mini {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
  

  

    Color is mood. Also: readability. Pick colors with enough contrast.
  

  

    Try each snippet: hex, rgb(), and hsl() are all common in modern CSS.

Learn more in the CSS Text Color Interactive Tutorial.

CSS font-weight / CSS font bold

font-weight controls how thick the strokes of the letters are. The keyword bold is common, but numeric weights give you finer control.

  • Keywords: normal (usually 400), bold (usually 700).
  • Numbers: 100 to 900 (not all fonts support all weights).

If a font doesn’t have the exact weight you request, the browser will “fake” it or pick the closest available. That’s why some weights look identical in some fonts.

Font-weight radio controls

Use the radio buttons to switch weights. This is a nice way to feel the difference quickly.

font-weight: 
.demo-text {
  font-weight: 400;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.panel {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #ffffff;
}

.demo-text {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
}

.hint {
  margin: 10px 0 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
  

  

    Font weight changes emphasis without changing size.
  

  

    If 300 and 400 look the same, the font might not support that weight.

Font-weight common uses

  • Use 600 or 700 for headings or important labels.
  • Keep body text around 400 for readability (unless your font is very light by design).
  • Avoid overusing super-bold weights for long paragraphs (it gets tiring fast).

Learn more in the CSS Bold Text Interactive Tutorial.

CSS font-family / CSS font family list / CSS fonts list

font-family sets the typeface. You typically provide a fallback list so if one font isn’t available, the next one can be used.

A great beginner rule: end your list with a generic family like serif, sans-serif, or monospace.

Font-family generic families

These are special keywords the browser maps to available fonts on the user’s system:

  • serif (traditional, with “feet”)
  • sans-serif (clean, without “feet”)
  • monospace (each character takes the same width)
  • cursive and fantasy (more decorative, less predictable)

Font-family interactive examples

Here are a few safe, short fallback lists. 

.demo-text {
  font-family: system-ui, Arial, sans-serif;
}
  
.demo-text {
  font-family: Georgia, "Times New Roman", serif;
}
  
.demo-text {
  font-family: ui-monospace, Menlo, monospace;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.frame {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #f6f6f6;
}

.demo-text {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.55;
  color: #111;
}

.small {
  margin: 10px 0 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
  

  

    Font-family changes personality. Same words, different voice.
  

  

    Notice how monospace affects spacing and rhythm.

Font-family common mistakes

  • Forgetting quotes around names with spaces (example: "Times New Roman").
  • Using a long fallback list. Keep it short and intentional.
  • Not including a generic family at the end.

CSS font style

font-style controls italic-like styling:

  • normal is default.
  • italic uses a true italic face when available.
  • oblique is a slanted version (often “fake italic”). 
.demo-text {
  font-style: normal;
}
  
.demo-text {
  font-style: italic;
}
  
.demo-text {
  font-style: oblique;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.box {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #ffffff;
}

.demo-text {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
}

.note {
  margin: 10px 0 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
  

  

    Italic and oblique can look similar, but they are not always the same under the hood.
  

  

    If the font has a real italic face, italic usually looks nicer.

Learn more in the CSS Italic Text Interactive Tutorial

Line-height for readable text

line-height controls the vertical space between lines. It’s one of the biggest readability knobs you have.

A very common beginner-friendly approach is using a unitless line-height, like 1.5. Unitless means it scales nicely with the element’s font size. 

.demo-text {
  line-height: 1.5;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.reading {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #f6f6f6;
}

.demo-text {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 1.1rem;
  color: #111;
}

.reading p + p {
  margin-top: 12px;
}
  

  

    Line-height is the secret sauce for comfortable reading. Too tight feels cramped. Too loose feels too spaced.
  

  

    Drag the slider and watch how the paragraph “breathes”.

Letter-spacing and word-spacing

letter-spacing adjusts space between characters. word-spacing adjusts space between words.

  • A tiny positive letter-spacing can help ALL CAPS look cleaner.
  • For normal paragraphs, large letter-spacing usually hurts readability. 
.demo-text {
  letter-spacing: 0em;
  word-spacing: 0em;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.space-card {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #ffffff;
}

.demo-text {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #111;
}

.caps {
  text-transform: uppercase;
  font-weight: 700;
}
  

  

    Spacing is a design knob
  

  

    Use it gently. Your readers will thank you with fewer squints per minute.

Learn more in the CSS Letter Spacing Interactive Tutorial.

Extra: font-variant and text-transform

Two extra properties often used with typography:

  • text-transform changes casing (uppercase, lowercase, etc.).
  • font-variant can enable typographic features like small-caps. 
.demo-text {
  text-transform: none;
  font-variant: normal;
}
  
.demo-text {
  text-transform: uppercase;
  font-variant: normal;
}
  
.demo-text {
  text-transform: none;
  font-variant: small-caps;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.typography {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #f6f6f6;
}

.demo-text {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #111;
}
  

  

    Small caps and casing can change the tone of a heading quickly.

Learn more in the CSS Uppercase Interactive Tutorial.

The font shorthand

CSS also has a shorthand property named font that can set multiple font-related properties at once. It’s handy, but it has rules.

The shorthand commonly includes: font-style, font-weight, font-size (required), optional line-height, and font-family (required).

A typical pattern looks like: font: italic 700 1.25rem / 1.4 system-ui, Arial, sans-serif; 

.demo-text {
  font: normal 400 1.1rem / 1.6 system-ui, Arial, sans-serif;
}
  
.demo-text {
  font: italic 700 1.2rem / 1.4 system-ui, Arial, sans-serif;
}
  
.demo-text {
  font: normal 400 1.25rem / 1.7 Georgia, "Times New Roman", serif;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.shorthand {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #ffffff;
}

.demo-text {
  margin: 0;
  color: #111;
}

.help {
  margin: 10px 0 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
  

  

    The font shorthand is compact, but it replaces several font-related properties at once.
  

  

    If you set font, don’t be surprised if earlier font settings get reset.

Web fonts basics with @font-face

If you want a custom typeface that isn’t guaranteed on the user’s device, you can load it as a web font. The low-level way is @font-face.

  • src points to the font file(s).
  • font-display: swap helps avoid invisible text while the font loads.
  • You still want fallbacks in font-family.

The playground below shows the structure. The URL is intentionally a placeholder, because your real project will host an actual font file. 

@font-face {
  font-family: "DemoFont";
  src: url("DemoFont.woff2") format("woff2");
  font-display: swap;
}

.demo-text {
font-family: "DemoFont", system-ui, sans-serif;
} 
*,
::before,
::after {
  box-sizing: border-box;
}

.webfont {
  padding: 16px;
  border: 3px solid #111;
  border-radius: 14px;
  max-width: 720px;
  background: #f6f6f6;
}

.demo-text {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #111;
}

.note {
  margin: 10px 0 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.95rem;
  color: #444;
}
  

  

    If the custom font fails to load, the fallback still keeps your text readable.
  

  

    In a real site, replace DemoFont.woff2 with your actual font file URL.

Common font recipes

Here are a few practical patterns you can use immediately.

Recipe: readable body text

  • Use a comfortable size: around 1rem to 1.125rem.
  • Use a relaxed line-height: 1.5 to 1.8.
  • Use a neutral weight: 400 or 500.

Recipe: clean headings

  • Increase weight: 600 or 700.
  • Slightly tighter line-height: around 1.2 to 1.35.
  • Be careful with letter-spacing. Small amounts only, especially in ALL CAPS.

Common mistakes and how to fix them

  • “My font-weight does nothing.” The font may not include that weight. Try another weight or another font.
  • “My custom font flashes weirdly.” Use font-display: swap and include good fallbacks.
  • “My paragraphs feel cramped.” Increase line-height and consider slightly increasing font-size.
  • “My ALL CAPS looks messy.” Add a touch of letter-spacing, like 0.06em.

Wrap-up

You now know the core “CSS font” toolkit: font-family, font-size, font-weight, font-style, plus the supporting cast: line-height, spacing, and color.

You are ready to learn about CSS Text Decoration in the CSS Text Decoration Interactive Tutorial, CSS text outline in the CSS Text Outline Interactive Tutorial, and CSS Text Shadow in the CSS Text Shadow Interactive Tutorial.