Font Properties & Typography Basics

Introduction to CSS Typography

Typography is one of the most critical aspects of web design. The way text looks, feels, and reads can make or break a user's experience on your website. Good typography improves readability, establishes visual hierarchy, conveys personality, and keeps visitors engaged. CSS provides a rich set of font and text properties that give you precise control over every aspect of how text is rendered in the browser.

In this lesson, we will cover the core CSS font properties in depth -- from choosing font families and setting sizes to controlling weight, style, spacing, and more. By the end, you will have a thorough understanding of how to style text professionally and create typographic systems that work across different browsers and devices.

The font-family Property

The font-family property specifies which typeface the browser should use to render text. You can specify one or more font names, and the browser will use the first one it finds installed on the user's system. This is why we always use font stacks -- ordered lists of fonts with fallbacks.

Generic Font Families

CSS defines five generic font families. These are not specific fonts; they are categories that the browser maps to a default installed font. You should always end your font stack with one of these as a final fallback:

• serif -- Fonts with small decorative strokes (serifs) at the ends of letter strokes. Examples: Times New Roman, Georgia. These are considered more traditional and are often used for body text in print and formal contexts.
• sans-serif -- Fonts without serifs, giving them a cleaner, more modern look. Examples: Arial, Helvetica, Verdana. These are the most popular choice for web body text because they render clearly on screens.
• monospace -- Every character occupies the same horizontal space. Examples: Courier New, Consolas. These are essential for displaying code, terminal output, and any context where character alignment matters.
• cursive -- Fonts that mimic handwriting with joined or flowing strokes. Examples: Comic Sans MS, Brush Script. Use these sparingly and never for body text -- they are difficult to read at small sizes.
• fantasy -- Decorative and display fonts that do not fit other categories. Examples: Impact, Papyrus. These vary wildly between systems and are unreliable for consistent cross-platform rendering.

/* Each paragraph uses a different generic family */
.serif-text {
    font-family: serif;
}

.sans-text {
    font-family: sans-serif;
}

.mono-text {
    font-family: monospace;
}

.cursive-text {
    font-family: cursive;
}

.fantasy-text {
    font-family: fantasy;
}

Font Stacks and Fallbacks

A font stack is a comma-separated list of font names in the font-family property. The browser tries each font from left to right and uses the first one that is available. If a font name contains spaces, you must wrap it in quotes. The last font in the stack should always be a generic family name.

/* A modern sans-serif stack */
body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* A classic serif stack */
.article-body {
    font-family: Georgia, "Times New Roman", Times, serif;
}

/* A monospace stack for code */
code, pre {
    font-family: "Fira Code", "Source Code Pro", Consolas, "Courier New", monospace;
}

/* A system font stack (uses the OS default UI font) */
.system-ui {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

System Font Stacks

Modern CSS introduced the system-ui keyword, which automatically resolves to the operating system's default UI font. This is a game-changer for performance because no web font needs to be downloaded, and the text feels native to the user's device.

Here is the full system font stack used by many major websites including GitHub:

body {
    font-family:
        -apple-system,        /* Safari on macOS and iOS */
        BlinkMacSystemFont,   /* Chrome on macOS */
        "Segoe UI",           /* Windows */
        "Noto Sans",          /* Linux */
        Roboto,               /* Android */
        "Helvetica Neue",     /* Older macOS */
        Arial,                /* Fallback */
        sans-serif,           /* Generic fallback */
        "Apple Color Emoji",  /* Emoji on Apple devices */
        "Segoe UI Emoji",     /* Emoji on Windows */
        "Noto Color Emoji";   /* Emoji on Linux/Android */
}

The font-size Property

The font-size property controls how large text appears. CSS offers many different units for sizing text, and understanding when to use each one is essential for building responsive, accessible websites.

Absolute Units

• px (pixels) -- A fixed unit that does not scale based on parent elements. 16px is the default browser font size. Pixel values are precise and predictable but do not respect the user's browser font size settings, which can be an accessibility concern.
• pt (points) -- A print unit (1pt = 1/72 inch). Avoid using points for web design; they are meant for print stylesheets.

Relative Units

• em -- Relative to the font size of the parent element. If the parent is 16px, then 1.5em = 24px. The em unit compounds -- if you nest elements that each set font-size in em, the sizes multiply, which can lead to unexpectedly large or small text.
• rem (root em) -- Relative to the font size of the root element (<html>). Unlike em, rem does not compound because it always references the same base value. This makes rem the preferred unit for font sizes in modern CSS.
• % -- Percentage of the parent element's font size. 100% equals the parent's font size. Like em, percentages compound when nested.
• vw (viewport width) -- 1vw equals 1% of the viewport width. This creates text that scales with the browser window. Useful for hero headings but dangerous for body text because it can become unreadable on very small or very large screens.

Keyword Values

CSS also provides keyword values for font-size: xx-small, x-small, small, medium, large, x-large, xx-large. The medium keyword equals the browser default (usually 16px). You can also use smaller and larger, which are relative to the parent's font size.

/* Absolute sizing with pixels */
h1 {
    font-size: 32px;
}

/* Relative sizing with rem (recommended) */
h2 {
    font-size: 1.75rem;  /* 28px if root is 16px */
}

/* Relative sizing with em */
.intro {
    font-size: 1.25em;  /* 125% of parent */
}

/* Percentage sizing */
small {
    font-size: 80%;  /* 80% of parent */
}

/* Viewport-based sizing (use with caution) */
.hero-title {
    font-size: 5vw;
}

/* Clamped responsive sizing (best of both worlds) */
.responsive-heading {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

The font-weight Property

The font-weight property controls the thickness (boldness) of text. You can use keyword values or numeric values from 100 to 900.

Keyword Values

• normal -- Equivalent to 400. This is the default weight for most text.
• bold -- Equivalent to 700. This is the default weight for headings and <strong> elements.
• lighter -- One weight step lighter than the parent element. The exact result depends on the available font weights.
• bolder -- One weight step heavier than the parent element.

Numeric Values

Numeric weights go from 100 (thinnest) to 900 (thickest) in increments of 100. Common mappings are:

• 100 -- Thin / Hairline
• 200 -- Extra Light / Ultra Light
• 300 -- Light
• 400 -- Normal / Regular
• 500 -- Medium
• 600 -- Semi Bold / Demi Bold
• 700 -- Bold
• 800 -- Extra Bold / Ultra Bold
• 900 -- Black / Heavy

/* Keyword values */
.normal-text {
    font-weight: normal;    /* 400 */
}
.bold-text {
    font-weight: bold;      /* 700 */
}

/* Numeric values */
.thin {
    font-weight: 100;
}
.light {
    font-weight: 300;
}
.medium {
    font-weight: 500;
}
.semi-bold {
    font-weight: 600;
}
.extra-bold {
    font-weight: 800;
}
.black {
    font-weight: 900;
}

/* Relative values */
.lighter-than-parent {
    font-weight: lighter;
}
.bolder-than-parent {
    font-weight: bolder;
}

The font-style Property

The font-style property controls whether text is displayed in a normal, italic, or oblique style.

• normal -- The default upright style.
• italic -- Uses the font's italic variant, which is typically a specially designed version with different letterforms (for example, a single-story "a" instead of a double-story "a").
• oblique -- Slants the normal font at an angle. Unlike italic, oblique does not use redesigned letterforms; it simply tilts the existing characters. You can optionally specify an angle: oblique 14deg.

.normal {
    font-style: normal;
}

.italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

/* Oblique with a specific angle (CSS Fonts Level 4) */
.custom-slant {
    font-style: oblique 12deg;
}

/* Common use case: styling a blockquote */
blockquote {
    font-style: italic;
    font-weight: 300;
    border-left: 4px solid #ccc;
    padding-left: 1rem;
}

The font-variant Property

The font-variant property provides access to alternate glyphs and typographic features. The most commonly used value is small-caps, which displays lowercase letters as smaller versions of uppercase letters.

/* Basic small-caps */
.small-caps {
    font-variant: small-caps;
}

/* All small-caps -- even uppercase letters become small caps */
.all-small-caps {
    font-variant-caps: all-small-caps;
}

/* Tabular numbers for aligned columns */
.data-table td {
    font-variant-numeric: tabular-nums;
}

/* Old-style (lowercase) figures for body text */
.body-text {
    font-variant-numeric: oldstyle-nums;
}

/* Ligatures control */
.fancy-text {
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* Combining multiple variants */
.stylish-heading {
    font-variant: small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.05em;
}

The font Shorthand Property

The font shorthand allows you to set multiple font properties in a single declaration. The syntax is:

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

The font-size and font-family values are required; all others are optional. If you omit any optional value, it resets to its default. This reset behavior is important to understand -- the shorthand will override any individually set properties you declared earlier.

/* Full shorthand */
.complete {
    font: italic small-caps bold 1.2rem/1.6 Georgia, serif;
}

/* Minimal shorthand (only required values) */
.minimal {
    font: 16px Arial, sans-serif;
}

/* With line-height */
.with-line-height {
    font: 1rem/1.5 "Segoe UI", sans-serif;
}

/* System font keywords */
.system-caption {
    font: caption;   /* Uses the OS caption font */
}
.system-menu {
    font: menu;      /* Uses the OS menu font */
}

/* WARNING: The shorthand resets omitted values */
.danger {
    font-weight: 700;
    font-style: italic;
    font: 16px Arial, sans-serif;
    /* font-weight is now 400 (normal) and
       font-style is now normal because the
       shorthand reset them! */
}

The line-height Property

The line-height property controls the vertical spacing between lines of text. It is one of the most important properties for readability. The line-height defines the total height of each line box, and the space between the text and the line box edges is distributed equally above and below the text.

Value Types

• Unitless number (recommended) -- A multiplier of the element's font size. For example, line-height: 1.5 on text with font-size: 16px produces a line height of 24px. Unitless values are inherited as a multiplier, so child elements will calculate their own line height based on their own font size.
• Length values (px, em, rem) -- A fixed or relative line height. When using em, be aware that the computed value is inherited, not the multiplier. This means child elements with different font sizes may have inappropriate line heights.
• Percentage -- Similar to em; the computed value is inherited rather than the percentage itself.
• normal -- The browser's default, typically around 1.2. This is often too tight for body text.

/* Unitless value (RECOMMENDED) */
body {
    font-size: 16px;
    line-height: 1.6;  /* 25.6px -- great for body text */
}

/* Why unitless is better: */
.parent-em {
    font-size: 16px;
    line-height: 1.5em;  /* Computes to 24px */
}
.child-em {
    font-size: 24px;
    /* INHERITS 24px (the computed value), not 1.5em */
    /* So line-height is 24px for 24px text = cramped! */
}

.parent-unitless {
    font-size: 16px;
    line-height: 1.5;  /* Multiplier inherited */
}
.child-unitless {
    font-size: 24px;
    /* INHERITS the 1.5 multiplier */
    /* So line-height is 24px * 1.5 = 36px -- proper spacing! */
}

/* Different contexts need different line heights */
h1 {
    line-height: 1.2;  /* Tighter for large headings */
}
p {
    line-height: 1.5;  /* Comfortable for body text */
}
.small-print {
    line-height: 1.7;  /* More spacing for small text */
}

The letter-spacing Property

The letter-spacing property adjusts the horizontal space between individual characters (also known as tracking in typography). Positive values increase spacing, and negative values decrease it.

/* Increase spacing for uppercase headings */
.uppercase-heading {
    text-transform: uppercase;
    letter-spacing: 0.1em;  /* 10% of font size */
}

/* Slight tracking for readability */
.body-text {
    letter-spacing: 0.02em;
}

/* Tight tracking for large display text */
.display-text {
    font-size: 4rem;
    letter-spacing: -0.02em;
}

/* Fixed pixel spacing */
.fixed-spacing {
    letter-spacing: 2px;
}

/* Normal spacing (reset) */
.normal-spacing {
    letter-spacing: normal;
}

The word-spacing Property

The word-spacing property adjusts the space between words. Like letter-spacing, positive values add space and negative values reduce it. This property is less commonly used but can be helpful for fine-tuning justified text or creating specific typographic effects.

/* Increase word spacing */
.wide-words {
    word-spacing: 0.2em;
}

/* Decrease word spacing */
.tight-words {
    word-spacing: -0.1em;
}

/* Fixed pixel value */
.spaced-words {
    word-spacing: 4px;
}

/* Useful for justified text to reduce river effect */
.justified-text {
    text-align: justify;
    word-spacing: -0.05em;
    hyphens: auto;
}

The font-display Property

The font-display property controls how a web font is displayed while it is loading. This property is specified inside the @font-face rule (which we will cover in detail in the next lesson), but understanding it now is important because it directly impacts typography and user experience.

• auto -- The browser decides the strategy (usually similar to block).
• block -- Hides text for up to 3 seconds while the font loads (creates FOIT -- Flash of Invisible Text).
• swap -- Shows fallback text immediately, then swaps to the web font when it loads (creates FOUT -- Flash of Unstyled Text). Best for important text that must be readable immediately.
• fallback -- A compromise between block and swap. Gives the font a very short block period (about 100ms), then shows the fallback. If the font loads within about 3 seconds, it swaps in; otherwise, the fallback is used for the rest of the page's lifetime.
• optional -- The most performance-friendly option. Gives only a very short block period. The browser may decide not to use the web font at all if it does not load quickly enough. Great for slow connections.

Putting It All Together: A Typography System

Professional websites do not set font properties randomly on individual elements. Instead, they establish a typographic scale -- a consistent set of font sizes, weights, and line heights that create visual harmony across the entire site.

/* Root settings */
:root {
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-serif: "Merriweather", Georgia, serif;
    --font-mono: "Fira Code", "Source Code Pro", monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
}

/* Base typography */
html {
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

/* Code */
code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Utility classes */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }