CSS Typography Styling Guide

Typography is a crucial element of web design that affects readability, accessibility, and overall user experience. This guide covers CSS properties and techniques for styling text.

1. Font Properties

Font Family

Controls the typeface used for text:

Serif

The quick brown fox jumps over the lazy dog.

.font-serif {
  font-family: 'Times New Roman', Times, serif;
}
Sans-serif

The quick brown fox jumps over the lazy dog.

.font-sans {
  font-family: Arial, Helvetica, sans-serif;
}
Monospace

The quick brown fox jumps over the lazy dog.

.font-mono {
  font-family: 'Courier New', Courier, monospace;
}
Modern Font Stack

The quick brown fox jumps over the lazy dog.

.font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 
  'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
  'Open Sans', 'Helvetica Neue', sans-serif;
}

Importing Web Fonts

Google Fonts

Roboto Regular

Roboto Light

Roboto Bold

/* In your CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

.font-roboto {
  font-family: 'Roboto', sans-serif;
}

/* Alternatively, in your HTML */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

Font Size

Controls the size of text:

Absolute Units

16px size (most common default)

.text-px {
  font-size: 16px;
}
Relative to Parent

1em size (relative to parent)

.text-em {
  font-size: 1em; /* 1em = parent element's font size */
}
Relative to Root

1rem size (relative to root)

.text-rem {
  font-size: 1rem; /* 1rem = root element's font size */
}
Viewport Relative

2vw size (2% of viewport width)

.text-viewport {
  font-size: 2vw; /* 2% of viewport width */
  /* Also available: vh, vmin, vmax */
}

Common Font Size Scale

Text Sizes (Inspired by Tailwind)

text-xs (0.75rem)

text-sm (0.875rem)

text-base (1rem)

text-lg (1.125rem)

text-xl (1.25rem)

text-2xl (1.5rem)

text-3xl (1.875rem)

text-4xl (2.25rem)

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

/* Common CSS variables for font sizes */

:root {

--font-size-xs: 0.75rem;

--font-size-sm: 0.875rem;

--font-size-base: 1rem;

--font-size-lg: 1.125rem;

--font-size-xl: 1.25rem;

--font-size-2xl: 1.5rem;

--font-size-3xl: 1.875rem;

--font-size-4xl: 2.25rem;

}

Font Weight

Controls the thickness of text:

Numeric Weights

Thin (100)

Extra Light (200)

Light (300)

Normal (400)

Medium (500)

Semi Bold (600)

Bold (700)

Extra Bold (800)

Black (900)

.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.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; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
Keyword Values

Normal

Bold

Lighter (relative)

Bolder (relative)

.font-normal-kw { font-weight: normal; } /* Same as 400 */
.font-bold-kw { font-weight: bold; } /* Same as 700 */
.font-lighter { font-weight: lighter; } /* Relative to parent */
.font-bolder { font-weight: bolder; } /* Relative to parent */

/* Common CSS variables for font weights */

:root {

--font-weight-thin: 100;

--font-weight-extralight: 200;

--font-weight-light: 300;

--font-weight-normal: 400;

--font-weight-medium: 500;

--font-weight-semibold: 600;

--font-weight-bold: 700;

--font-weight-extrabold: 800;

--font-weight-black: 900;

}

Font Style

Controls the style of text:

Font Styles

Normal style

Italic style

Oblique style

.font-normal-style { font-style: normal; }
.font-italic { font-style: italic; }
.font-oblique { font-style: oblique; }

Font Variants

Controls variant forms of text:

Font Variants

Normal text

Small-Caps text

Ligatures: fi ffl

.font-variant-normal { font-variant: normal; }
.font-variant-small-caps { font-variant: small-caps; }
.font-variant-ligatures { font-variant-ligatures: common-ligatures; }

2. Text Layout Properties

Text Alignment

Controls horizontal alignment of text:

Text Alignment

Left aligned text (default)

Center aligned text

Right aligned text

Justified text with even spacing between words to create aligned left and right edges.

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

Line Height

Controls the height of a line of text:

Line Heights

This paragraph has a line height of 1 (none), which makes lines very close together and reduces readability for multi-line text.

This paragraph has a line height of 1.25 (tight), which is compact but still readable for shorter text sections.

This paragraph has a line height of 1.5 (normal), which is recommended for body text as it creates comfortable spacing between lines.

This paragraph has a line height of 2 (loose), which creates generous spacing between lines, good for text that needs more breathing room.

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* Common CSS variables for line heights */

:root {

--line-height-none: 1;

--line-height-tight: 1.25;

--line-height-snug: 1.375;

--line-height-normal: 1.5;

--line-height-relaxed: 1.625;

--line-height-loose: 2;

}

Letter Spacing

Controls the spacing between letters:

Letter Spacing

Tighter letter spacing (-0.05em)

Tight letter spacing (-0.025em)

Normal letter spacing (0)

Wide letter spacing (0.025em)

Wider letter spacing (0.05em)

Widest letter spacing (0.1em)

.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Common CSS variables for letter spacing */

:root {

--letter-spacing-tighter: -0.05em;

--letter-spacing-tight: -0.025em;

--letter-spacing-normal: 0em;

--letter-spacing-wide: 0.025em;

--letter-spacing-wider: 0.05em;

--letter-spacing-widest: 0.1em;

}

Text Decoration

Controls lines added to text:

Text Decoration Line

Underlined text

Line-through text

No decoration (removes from links)

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }
Text Decoration Style

Solid underline

Double underline

Dotted underline

Dashed underline

Wavy underline

.decoration-solid { text-decoration-style: solid; }
.decoration-double { text-decoration-style: double; }
.decoration-dotted { text-decoration-style: dotted; }
.decoration-dashed { text-decoration-style: dashed; }
.decoration-wavy { text-decoration-style: wavy; }
Text Decoration Color & Thickness

Colored underline

1px thickness

2px thickness

3px thickness

.decoration-red { text-decoration-color: red; }
.decoration-thickness-1 { text-decoration-thickness: 1px; }
.decoration-thickness-2 { text-decoration-thickness: 2px; }
.decoration-thickness-3 { text-decoration-thickness: 3px; }

Text Transform

Controls capitalization of text:

Text Transform

Uppercase text

Lowercase text

Capitalized text

Normal case text

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

Text Shadow

Adds shadow effects to text:

Text Shadow Basics

Small text shadow

Medium text shadow

Large text shadow

.text-shadow-sm { 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
}
.text-shadow-md { 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
}
.text-shadow-lg { 
  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4); 
}
Creative Text Shadow Effects

Highlight glow

Inset/3D effect

Neon glow effect

.text-shadow-highlight { 
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); 
}
.text-shadow-inset { 
  text-shadow: 
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa;
}
.text-shadow-neon { 
  text-shadow: 
    0 0 5px #ff00de,
    0 0 10px #ff00de,
    0 0 20px #ff00de;
  color: #fff;
}

Other Text Properties

Text Indent

This paragraph has a text indent of 1em, commonly used for the first line of paragraphs in print. It creates a visual cue for the start of a new paragraph.

This paragraph has a larger text indent of 2em, creating a more pronounced indentation effect.

.text-indent-1 { text-indent: 1em; }
.text-indent-2 { text-indent: 2em; }
White Space

This text will not wrap to a new line until a br tag is used.

White space and line breaks are preserved exactly as they are in the source code.

.white-space-nowrap { white-space: nowrap; }
.white-space-pre { white-space: pre; }
.white-space-pre-wrap { white-space: pre-wrap; }
.white-space-pre-line { white-space: pre-line; }
Word Break & Overflow

Supercalifragilisticexpialidocious will break anywhere if needed.

Supercalifragilisticexpialidocious will only break if needed.

.word-break-normal { word-break: normal; }
.word-break-break-all { word-break: break-all; }
.word-break-keep-all { word-break: keep-all; }
.overflow-wrap-normal { overflow-wrap: normal; }
.overflow-wrap-break-word { overflow-wrap: break-word; }
Writing Mode

Horizontal top-to-bottom (default)

Vertical right-to-left

Vertical left-to-right

.writing-mode-horizontal-tb { 
  writing-mode: horizontal-tb; 
}
.writing-mode-vertical-rl { 
  writing-mode: vertical-rl; 
  height: 150px;
}
.writing-mode-vertical-lr { 
  writing-mode: vertical-lr; 
  height: 150px;
}

Multi-Column Text

Creates newspaper-style columns for text:

Column Count

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget arcu in quam molestie eleifend. Donec tincidunt nisl a nisi lobortis, nec faucibus neque facilisis. Proin facilisis, mi nec aliquam varius, sapien neque posuere arcu, vel viverra tellus orci at justo.

Aenean feugiat elit nec turpis tempus, vel ultrices est dignissim. Ut maximus volutpat purus, sit amet maximus orci tincidunt sed. Integer quis ex augue. Cras facilisis, augue sed luctus fringilla, mi eros dapibus velit, nec eleifend neque tellus vel ex.

Proin id ex nec metus dapibus sollicitudin. Vestibulum ut dolor nec est elementum eleifend vel vel nisi. Cras convallis diam nec augue convallis, eu dapibus lorem sollicitudin. Curabitur eget lectus odio.

.columns-3 {
  column-count: 3;
  column-gap: 2em;
}
Column Rules

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget arcu in quam molestie eleifend. Donec tincidunt nisl a nisi lobortis, nec faucibus neque facilisis. Proin facilisis, mi nec aliquam varius, sapien neque posuere arcu, vel viverra tellus orci at justo.

Aenean feugiat elit nec turpis tempus, vel ultrices est dignissim. Ut maximus volutpat purus, sit amet maximus orci tincidunt sed. Integer quis ex augue. Cras facilisis, augue sed luctus fringilla, mi eros dapibus velit, nec eleifend neque tellus vel ex.

Proin id ex nec metus dapibus sollicitudin. Vestibulum ut dolor nec est elementum eleifend vel vel nisi. Cras convallis diam nec augue convallis, eu dapibus lorem sollicitudin. Curabitur eget lectus odio.

.column-rule {
  column-rule: 1px solid #ddd;
}
Column Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget arcu in quam molestie eleifend. Donec tincidunt nisl a nisi lobortis, nec faucibus neque facilisis. Proin facilisis, mi nec aliquam varius, sapien neque posuere arcu, vel viverra tellus orci at justo.

Aenean feugiat elit nec turpis tempus, vel ultrices est dignissim. Ut maximus volutpat purus, sit amet maximus orci tincidunt sed. Integer quis ex augue. Cras facilisis, augue sed luctus fringilla, mi eros dapibus velit, nec eleifend neque tellus vel ex.

.column-width-250 {
  column-width: 250px; /* Creates as many 250px columns as will fit */
}

3. Advanced Typography Techniques

Paragraph Styling

Drop Caps and First Line

Drop caps can add visual interest to the beginning of an article or chapter. This example shows how to create a drop cap using the ::first-letter pseudo-element. The first line is also styled differently using the ::first-line pseudo-element.

Subsequent paragraphs don't have these special styles applied. They just use the standard paragraph styling that's been defined for the document.

.paragraph-styles p {
  margin-bottom: 1.5em;
}

.paragraph-styles p:first-of-type::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
  color: #3498db;
}

.paragraph-styles p:first-of-type::first-line {
  font-weight: bold;
}

Typography for UI Elements

Heading & Body Text Pairs

Typography Example 1: Editorial Style

This is an example of a serif heading paired with a sans-serif body text. This combination is often used in editorial designs, creating a classical yet readable experience. The negative letter-spacing on the heading creates a tighter, more refined look.

.typography-example-1 h2 {
  font-family: 'Georgia', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.typography-example-1 p {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
}

TYPOGRAPHY EXAMPLE 2: MODERN STYLE

This is an example of a bold, uppercase sans-serif heading paired with a serif body text. This creates a strong contrast and a contemporary feel. The added letter-spacing in the heading improves readability for all-caps text.

.typography-example-2 h2 {
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: #e74c3c;
}

.typography-example-2 p {
  font-family: 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

Typography Example 3: Technical Style

This is an example of a monospace heading paired with a serif body text. This combination works well for technical or coding-related content, where you want to evoke a feeling of code while maintaining readability in the main text.

.typography-example-3 h2 {
  font-family: 'Courier New', monospace;
  font-size: 1.8rem;
  font-weight: normal;
  margin-bottom: 0.5rem;
  color: #16a085;
}

.typography-example-3 p {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #333;
}

4. Typography System with CSS Variables

Creating a comprehensive typography system with CSS variables:

:root {

/* Font Families */

--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

--font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;

--font-family-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

/* Font Sizes */

--font-size-xs: 0.75rem;

--font-size-sm: 0.875rem;

--font-size-base: 1rem;

--font-size-lg: 1.125rem;

--font-size-xl: 1.25rem;

--font-size-2xl: 1.5rem;

--font-size-3xl: 1.875rem;

--font-size-4xl: 2.25rem;

--font-size-5xl: 3rem;

--font-size-6xl: 4rem;

/* Font Weights */

--font-weight-light: 300;

--font-weight-normal: 400;

--font-weight-medium: 500;

--font-weight-semibold: 600;

--font-weight-bold: 700;

--font-weight-extrabold: 800;

/* Line Heights */

--line-height-none: 1;

--line-height-tight: 1.25;

--line-height-snug: 1.375;

--line-height-normal: 1.5;

--line-height-relaxed: 1.625;

--line-height-loose: 2;

/* Letter Spacing */

--letter-spacing-tighter: -0.05em;

--letter-spacing-tight: -0.025em;

--letter-spacing-normal: 0em;

--letter-spacing-wide: 0.025em;

--letter-spacing-wider: 0.05em;

--letter-spacing-widest: 0.1em;

}

/* Usage Example */

h1 {

font-family: var(--font-family-serif);

font-size: var(--font-size-4xl);

font-weight: var(--font-weight-bold);

line-height: var(--line-height-tight);

letter-spacing: var(--letter-spacing-tight);

}

.text-caption {

font-family: var(--font-family-sans);

font-size: var(--font-size-sm);

font-weight: var(--font-weight-medium);

line-height: var(--line-height-normal);

}

5. Typography Best Practices

  • Readability First: Choose readable fonts and appropriate sizes, especially for body text.
  • Limit Font Families: Use 2-3 font families maximum for a cohesive design.
  • Create Contrast: Pair different styles for headings and body text.
  • Establish Hierarchy: Use size, weight, and color to create clear hierarchy.
  • Consider Line Length: Aim for 45-75 characters per line for optimal readability.
  • Use Relative Units: Prefer rem/em over pixels for better accessibility.
  • Create a Type Scale: Use a consistent scale for all font sizes.
  • Test on Multiple Devices: Ensure your typography works across screen sizes.
  • Consider Font Loading: Use font-display: swap and preload critical fonts.
  • Favor System Fonts: System font stacks avoid loading delays and provide native appearance.

6. Additional Resources

  • Google Fonts: A library of free licensed fonts
  • MDN Web Docs: Comprehensive CSS typography documentation
  • Type Scale: Tool for creating harmonious type scales
  • Fontjoy: Generate font pairings with machine learning
  • Modular Scale: Calculate harmonious proportions for typography