Introduction to Typography on the Web
Typography is the art and technique of arranging type to make written language legible, readable, and appealing. On the web, typography plays a crucial role in user experience, readability, brand identity, and overall design effectiveness.
CSS provides a rich set of properties to control text presentation, from the basics like font families and sizes to more nuanced aspects like line spacing, letter spacing, and text decorations.
"Typography is what language looks like." — Ellen Lupton, Graphic Designer
Just as different voices can express the same message in different tones, typography gives your text a visual "voice" that conveys meaning beyond the words themselves.
Font Properties
font-family
The font-family property specifies the typeface that will be used for text. It accepts a comma-separated list of font names, falling back to the next font if one isn't available.
/* Using specific fonts with fallbacks */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Using generic font families */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;Think of font-family like specifying your preferred voice actors for a character, with backup options if the first choice isn't available.
Serif fonts have small lines at the ends of characters
Times New Roman, Georgia, Cambria
Sans-serif fonts have clean endings without decoration
Arial, Helvetica, Verdana, Roboto
Monospace fonts have equal character widths
Courier, Consolas, Monaco
Cursive fonts mimic handwriting with connected letters
Comic Sans MS, Brush Script
Best Practices for font-family
- Always include at least one generic font family as the final fallback
- Use quotation marks around font names with spaces
- Keep font stacks reasonably short (3-4 options)
- Order fonts from most to least preferred
- Choose fallbacks with similar metrics to minimize layout shifts
Web Fonts
Beyond system fonts, you can use custom web fonts using @font-face or services like Google Fonts.
Using @font-face
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}Using Google Fonts
<!-- In your HTML head -->
<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@400;700&display=swap" rel="stylesheet">
/* In your CSS */
body {
font-family: 'Roboto', sans-serif;
}Real-World Implementation
Many major brands use custom typography as part of their brand identity:
- Netflix uses "Netflix Sans" across their platform
- Airbnb developed "Cereal" for their brand
- The New York Times uses "NYT Cheltenham" for headlines
Custom fonts help create brand recognition and consistent experiences across different mediums.
Performance Considerations
Web fonts can impact page performance. Consider these optimizations:
- Use modern formats like WOFF2 which offer better compression
- Limit font weights and styles to only those you need
- Implement font-display strategies to control how fonts load
- Use variable fonts for multiple weights with single file
- Consider preloading critical fonts
font-size
The font-size property controls the text size and accepts various units.
/* Absolute sizes */
font-size: 16px;
font-size: 12pt;
/* Relative sizes */
font-size: 1.5em; /* Relative to parent element font size */
font-size: 1.5rem; /* Relative to root element font size */
font-size: 120%; /* Percentage of parent font size */
/* Keyword sizes */
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;Font Size Units Comparison
Best Practices for font-size
- Use relative units (rem, em) for better accessibility and responsive design
- Set a base font size on the html/root element (often 62.5% for easy rem calculations)
- Consider minimum font sizes for readability (typically 16px or 1rem for body text)
- Use a modular scale for consistent size relationships between headings and body text
font-weight
The font-weight property sets the thickness or boldness of text.
/* Keyword values */
font-weight: normal; /* Same as 400 */
font-weight: bold; /* Same as 700 */
/* Numeric values (100-900) */
font-weight: 300; /* Light */
font-weight: 400; /* Normal/Regular */
font-weight: 600; /* Semi-bold */
font-weight: 700; /* Bold */
font-weight: 900; /* Extra bold / Heavy */
/* Relative values */
font-weight: lighter; /* Lighter than parent */
font-weight: bolder; /* Bolder than parent */Think of font-weight like the volume or intensity of a voice. Just as a person can speak softly or loudly, text can be light, regular, or bold.
This text has font-weight: 100 (Thin)
This text has font-weight: 300 (Light)
This text has font-weight: 400 (Regular)
This text has font-weight: 700 (Bold)
This text has font-weight: 900 (Heavy)
Not all fonts support all weight values. If a specific weight isn't available, the browser will use the closest available weight.
Modern variable fonts can offer a continuum of weights between their minimum and maximum values, providing more flexibility.
font-style
The font-style property controls whether text is displayed in a normal, italic, or oblique style.
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 20deg; /* Modern browsers support angle */This text has font-style: normal
This text has font-style: italic (designed italic font)
This text has font-style: oblique (slanted normal font)
Italic vs. Oblique: Italic fonts are specifically designed with cursive characteristics, while oblique fonts are simply slanted versions of the regular font. True italic fonts have different letterforms, not just a slant.
font-variant
The font-variant property allows for different variations of a font, with small-caps being the most common.
font-variant: normal;
font-variant: small-caps;This text has font-variant: normal
This text has font-variant: small-caps
Small caps are often used for acronyms, abbreviations, and headings to provide a refined typographic look.
Modern font-variant Properties
CSS now offers more granular control with properties like:
font-variant-caps: Controls capitalization variantsfont-variant-numeric: Controls numeric figures (oldstyle, tabular, etc.)font-variant-ligatures: Controls ligature usage
/* Examples of modern font-variant properties */
font-variant-caps: small-caps;
font-variant-numeric: oldstyle-nums tabular-nums;
font-variant-ligatures: common-ligatures contextual;font Shorthand
The font shorthand property sets all font-related properties in a single declaration.
/* Syntax: font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]; */
font: italic small-caps bold 16px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
Important: When using the font shorthand, font-size and font-family are required. All other properties are optional and will reset to their initial values if omitted.
Text Properties
color
The color property sets the foreground color of text and text decorations.
/* Different ways to specify color */
color: black; /* Named color */
color: #333333; /* Hex color */
color: #333; /* Short hex */
color: rgb(51, 51, 51); /* RGB color */
color: rgba(51, 51, 51, 0.8); /* RGBA with alpha (transparency) */
color: hsl(0, 0%, 20%); /* HSL color */
color: hsla(0, 0%, 20%, 0.8); /* HSLA with alpha */
Modern CSS also supports hwb() (Hue, Whiteness, Blackness), lab(), lch(), and other color notations for more precise color control.
black
#333333
rgb(51, 51, 51)
hsl(0, 0%, 20%)
text-align
The text-align property sets the horizontal alignment of text within an element.
text-align: left;
text-align: right;
text-align: center;
text-align: justify;Left aligned text (text-align: left)
This paragraph is aligned to the left. This is the default for languages that read left-to-right. Notice how the right edge is ragged.
Right aligned text (text-align: right)
This paragraph is aligned to the right. This might be the default for languages that read right-to-left. Notice how the left edge is ragged.
Centered text (text-align: center)
This paragraph is centered. This is often used for headlines and short blocks of text. Both edges are ragged.
Justified text (text-align: justify)
This paragraph is justified, creating even left and right edges. This is common in print design but can create irregular spacing between words on the web, especially with narrow columns.
Text Alignment Best Practices
- Left-aligned text is generally more readable for left-to-right languages
- Use centered text sparingly, primarily for headings or short text blocks
- Justified text can create "rivers" of white space; use with caution
- Consider text-align: right for right-to-left languages or numeric data in tables
text-decoration
The text-decoration property sets text decorations like underlines, overlines, and strikethroughs.
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
/* Modern browsers support additional properties */
text-decoration: underline dotted red; /* style and color */
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: blue;
text-decoration-thickness: 2px;This text has text-decoration: none
This text has text-decoration: underline
This text has text-decoration: overline
This text has text-decoration: line-through
This text has multiple decorations
This text has styled decoration (modern browsers)
Real-World Applications
- Links: Traditionally underlined, though many modern designs remove underlines
- Strikethrough: Used for deleted content, outdated prices, or completed items
- Custom link styles: Wavy or dotted underlines for specific link types
- Accessibility: Ensuring interactive elements are distinguishable without relying solely on color
text-transform
The text-transform property controls text capitalization.
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;This is normal text (text-transform: none)
This is capitalized text (text-transform: capitalize)
This is uppercase text (text-transform: uppercase)
This is Lowercase Text (text-transform: lowercase)
When to Use text-transform
- uppercase: For short headings, buttons, or labels for a bold, authoritative look
- capitalize: For titles or names when you want a more elegant approach
- lowercase: For brand identity (e.g., tumblr, adidas) or modern minimalist designs
Using text-transform rather than typing text in uppercase in your HTML is better for accessibility and flexibility, as screen readers may interpret all-caps HTML text differently.
text-indent
The text-indent property specifies the indentation of the first line of text in a block.
text-indent: 2em;
text-indent: 40px;
text-indent: 10%;
text-indent: -40px; /* Negative values create hanging indents */This paragraph has a positive text indent (text-indent: 2em). Notice how the first line is indented. This is common in traditional print typography for paragraphs. Subsequent lines align with the margin.
The indent is applied to each paragraph, not just the first one. This creates a clear visual separation between paragraphs while maintaining compact spacing.
This paragraph has a negative text indent (text-indent: -2em) with added padding-left. This creates a hanging indent effect, where the first line extends to the left of the rest of the paragraph. This style is commonly used for bibliographies, glossaries, and definition lists.
Real-World Applications
- Traditional typography: Indent first line of paragraphs (except after headings)
- Hanging indents: For references, bibliographies, and glossaries
- Accessibility: Creating visual relationships between list items
- CSS trick: Creating "outdents" for pull quotes or highlighting text
line-height
The line-height property sets the height of each line of text, affecting the spacing between lines.
/* Unitless value (recommended) */
line-height: 1.5; /* 1.5 times the font size */
/* Units */
line-height: 24px;
line-height: 1.5em;
line-height: 150%;
/* Keywords */
line-height: normal;line-height: 1
This paragraph has a line height equal to the font size. The text feels cramped and is difficult to read, especially for longer content. Line height of 1 means there's no extra space between lines.
line-height: 1.5
This paragraph has a line height of 1.5 times the font size. This is often considered ideal for readability on screens. It provides enough spacing for comfortable reading while keeping the text visually connected.
line-height: 2
This paragraph has a line height of 2 times the font size. While very readable, this much spacing can make the text feel disconnected and takes up significantly more vertical space. This might be appropriate for specific design needs or for content meant to be read slowly and carefully.
Line Height Best Practices
- Use unitless values (e.g.,
1.5) for better inheritance behavior - For body text, a line-height between 1.4 and 1.6 is generally recommended for readability
- Headings often look better with slightly tighter line-height (1.2-1.3)
- Line height should increase as line length (width) increases
- Consider larger line height for smaller text sizes
Typographic Analogy
Think of line-height as the spacing between lines on ruled paper. Just as too-tight or too-loose ruling can make handwriting difficult to read, inappropriate line-height can impact the readability of digital text.
letter-spacing
The letter-spacing property adjusts the space between characters in text.
letter-spacing: normal;
letter-spacing: 0.05em;
letter-spacing: 2px;
letter-spacing: -0.03em; /* Negative values reduce spacing */This text has normal letter spacing.
This text has slightly increased letter spacing (0.05em).
This text has significant letter spacing (0.2em).
This text has reduced letter spacing (-0.05em).
Letter Spacing Applications
- All caps text: Often needs increased letter-spacing for readability
- Very large headings: May benefit from tighter letter-spacing
- Small text: Slight increase in letter-spacing can improve readability
- Brand typography: Custom letter-spacing for logos and headlines
word-spacing
The word-spacing property adjusts the space between words.
word-spacing: normal;
word-spacing: 0.2em;
word-spacing: 5px;
word-spacing: -0.1em; /* Negative values reduce spacing */This text has normal word spacing.
This text has increased word spacing (0.2em).
This text has significant word spacing (0.5em).
This text has reduced word spacing (-0.1em).
Word spacing is less commonly adjusted than letter-spacing but can be useful for specific typographic styles or to improve justified text.
text-shadow
The text-shadow property adds shadows to text, creating depth or highlighting effects.
/* Syntax: text-shadow: horizontal-offset vertical-offset blur-radius color; */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Offset shadow with blur */
text-shadow: 0 0 5px blue; /* Glow effect */
text-shadow: 1px 1px 0 white, -1px -1px 0 white; /* Outline effect */
/* Multiple shadows */
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;Offset shadow with blur
Blue glow effect
Text outline effect
Multiple shadows
Real-World Applications
- Contrast enhancement: Adding shadows to text on images or colorful backgrounds
- Subtle depth: Creating a slightly raised or inset appearance
- Decorative effects: For headlines, hero sections, or buttons
- Text outlines: Using multiple text-shadows to create outline effects
Use with Restraint
While text-shadow can create interesting effects, it should be used judiciously:
- Excessive or dramatic shadows can reduce readability
- Maintain sufficient contrast even without the shadow
- Consider browser performance with multiple complex shadows
- Test accessibility with assistive technologies
white-space
The white-space property determines how white space (spaces, tabs, line breaks) is handled.
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;| Value | New lines | Spaces and tabs | Text wrapping | Use case |
|---|---|---|---|---|
| normal | Collapsed | Collapsed | Wraps | Default text behavior |
| nowrap | Collapsed | Collapsed | No wrapping | Single-line items, preventing wrapping |
| pre | Preserved | Preserved | No wrapping | Code blocks, preserving formatting |
| pre-wrap | Preserved | Preserved | Wraps | Pre-formatted text that should wrap |
| pre-line | Preserved | Collapsed | Wraps | Preserving line breaks but not spaces |
text-overflow
The text-overflow property specifies how overflowed content is displayed when it doesn't fit in its container.
/* Requires both overflow and white-space properties */
overflow: hidden;
white-space: nowrap;
text-overflow: clip; /* Default, simply clips text */
text-overflow: ellipsis; /* Shows ... at the end */Common Uses
- Card layouts with limited space for titles
- Table cells with potentially long content
- Navigation items with variable text length
- File or product names in list views
Practice Exercise
Typography Transformation
Create a webpage that showcases different typographic styles for the same content. Include the following:
-
News Article Style: Create typography that mimics a traditional newspaper
- Serif fonts for body text
- Clear hierarchy with different heading sizes
- Justified text alignment
- First paragraph with special treatment (bold or larger first letter)
-
Modern Web Style: Create typography for a contemporary website
- Sans-serif fonts
- More generous line height
- Left-aligned text
- Different color treatment for headings
-
Poster/Advertisement Style: Create typography with visual impact
- Bold, attention-grabbing headings (experiment with letter-spacing and text-transform)
- Creative use of text-shadow
- High contrast colors
- Mix of text alignments for visual interest
The content should be identical in all three versions, but the typographic treatment should completely transform the feel of the text.
Bonus challenge: Add a toggle feature to switch between light and dark mode, adjusting your typography for optimal readability in both contexts.
Web Typography Resources
Font Sources
- Google Fonts - Free web fonts
- Font Pair - Suggested font combinations
- Font Squirrel - Free fonts for commercial use
- MyFonts - Commercial fonts
Typography Tools
- Type Scale - Calculate proportional font sizes
- Gridlover - Create harmonious type systems
- Fontjoy - Generate font combinations
- Modular Scale - Create harmonious size relationships
Typography Learning
- Practical Typography - Online typography book
- Better Web Type - Web typography course
- Typewolf - Typography inspiration and resources
- web.dev: Typography - Google's typography guide
Conclusion
Typography is both an art and a science—it requires an understanding of technical properties and an eye for aesthetic balance. CSS provides a rich toolset for typographic control, allowing you to create readable, accessible, and visually appealing text.
Remember these key principles for effective web typography:
- Readability first: Typography should serve the content, making it easy and pleasant to read
- Hierarchy: Use size, weight, and spacing to guide the reader through your content
- Consistency: Maintain consistent typographic patterns throughout your site
- Responsiveness: Ensure your typography works across all device sizes
- Performance: Consider the impact of font loading on page performance
As you develop your CSS skills, your ability to control and refine typography will become a powerful tool in your web design arsenal.