Home/CSS/Typography

CSS Typography

CSS Basics•Reading time: 7 min

Typography is the art of arranging text to make it legible, readable, and visually appealing. CSS provides powerful tools to control typography on the web.

In this tutorial, you'll learn how to use CSS to style text, specify fonts, control text layout, and create visually engaging typography for your web pages.

1Font Properties

CSS provides several properties to control how text is rendered, from the typeface and size to style and weight.

css

/* Font Properties */

/* Font family */
p {
  font-family: Arial, Helvetica, sans-serif;  /* Fallback system */
}

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

/* Font size */
body {
  font-size: 16px;  /* Base font size */
}

h1 {
  font-size: 2em;  /* 2 times the parent element's font size */
}

h2 {
  font-size: 1.5rem;  /* 1.5 times the root element's font size */
}

/* Font weight */
p {
  font-weight: normal;  /* or 400 */
}

h1 {
  font-weight: bold;  /* or 700 */
}

strong {
  font-weight: 800;  /* Extra-bold */
}

/* Font style */
em {
  font-style: italic;
}

.normal {
  font-style: normal;
}

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

/* Line height */
p {
  line-height: 1.5;  /* 1.5 times the font size */
}

.tight {
  line-height: 1.2;
}

.spacious {
  line-height: 2;
}

/* Font shorthand */
body {
  font: italic bold 16px/1.5 Arial, sans-serif;
  /* font-style font-weight font-size/line-height font-family */
}

Font Properties Examples:

Font Family:

Arial, sans-serif - Sans-serif font family

Georgia, serif - Serif font family

Monospace - Fixed-width characters

Font Size:

12px - Small text

16px - Base text (common default)

24px - Larger text

Font Weight:

font-weight: 300 - Light

font-weight: normal (400) - Regular

font-weight: 700 - Bold

Line Height:

Line height: 1 - This text has a very tight line spacing. This text has a very tight line spacing. This text has a very tight line spacing.

Line height: 1.5 - This text has a comfortable line spacing for reading. This text has a comfortable line spacing for reading. This text has a comfortable line spacing for reading.

Line height: 2 - This text has a very spacious line spacing. This text has a very spacious line spacing. This text has a very spacious line spacing.

Font Stacks:

Always use a "font stack" when specifying font families to provide fallbacks if a font isn't available on the user's device.

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

2Text Properties

CSS offers several properties to control the alignment, decoration, spacing, and transformation of text.

css

/* Text Properties */

/* Text alignment */
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify;
}

/* Text decoration */
a {
  text-decoration: none;  /* Remove underline */
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}

/* Text decoration styling */
.fancy-underline {
  text-decoration: underline wavy red;  /* style, type, color */
}

/* Text transformation */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;  /* Capitalize first letter of each word */
}

/* Text indentation */
.indented {
  text-indent: 2em;
}

/* Letter spacing */
.expanded {
  letter-spacing: 2px;
}

.condensed {
  letter-spacing: -1px;
}

/* Word spacing */
.word-spaced {
  word-spacing: 5px;
}

/* Text shadow */
.shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* White space handling */
.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

/* Text overflow */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Responsive Units:

px - Fixed size, doesn't scale
em - Relative to parent element's font size
rem - Relative to root element's font size
vw - Relative to viewport width (1vw = 1% of viewport width)
vh - Relative to viewport height
% - Percentage of parent element's font size

Modern Responsive Techniques:

calc() - Calculate values (e.g., calc(1rem + 1vw))
clamp(min, preferred, max) - Sets a value between a minimum and maximum
min() - Uses the smallest of multiple values
max() - Uses the largest of multiple values
Media queries for breakpoint-specific adjustments

Example of Fluid Typography:

Fixed Size: Always 16px regardless of screen size

Fluid Size: Scales between 16px and 24px based on viewport width

h1 {
  /* Minimum 20px, scales with viewport width, maximum 32px */
  font-size: clamp(1.25rem, 4vw, 2rem);
  
  /* Alternative with calc() */
  /* font-size: calc(1.25rem + 1vw); */
}

Resize your browser window to see how these headings would scale:

Fixed Size Heading (16px)

Fluid Heading (clamp(16px, 4vw, 24px))

5Try It Yourself

Experiment with typography properties to style this HTML example. Copy the code and apply different font and text properties to see how they affect the appearance.

index.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Typography Practice</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1 class="title">CSS Typography</h1>
      <p class="subtitle">Mastering text styling on the web</p>
    </header>
    
    <main>
      <section class="intro">
        <h2>Introduction to Typography</h2>
        <p class="lead">Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.</p>
        <p>Good typography enhances the user experience, establishes hierarchy, and conveys meaning. CSS provides powerful tools to control typography on the web.</p>
      </section>
      
      <section class="examples">
        <h2>Text Styling Examples</h2>
        
        <div class="example-card font-family">
          <h3>Font Families</h3>
          <p class="sans-serif">This text uses a sans-serif font.</p>
          <p class="serif">This text uses a serif font.</p>
          <p class="monospace">This text uses a monospace font.</p>
        </div>
        
        <div class="example-card text-decoration">
          <h3>Text Decoration</h3>
          <p class="underline">This text has an underline.</p>
          <p class="line-through">This text has a line through it.</p>
          <p class="overline">This text has an overline.</p>
          <p class="fancy-underline">This text has a fancy underline.</p>
        </div>
        
        <div class="example-card text-transform">
          <h3>Text Transformation</h3>
          <p class="uppercase">This text is uppercase.</p>
          <p class="lowercase">THIS TEXT IS LOWERCASE.</p>
          <p class="capitalize">this text is capitalized.</p>
        </div>
        
        <div class="example-card text-align">
          <h3>Text Alignment</h3>
          <p class="align-left">This text is left-aligned.</p>
          <p class="align-center">This text is center-aligned.</p>
          <p class="align-right">This text is right-aligned.</p>
          <p class="align-justify">This text is justified. This creates even spacing between words to align with both left and right margins. It works best for longer paragraphs of text.</p>
        </div>
        
        <div class="example-card spacing">
          <h3>Spacing</h3>
          <p class="letter-spacing">This text has increased letter spacing.</p>
          <p class="word-spacing">This text has increased word spacing.</p>
          <p class="line-height">This paragraph has increased line height, which improves readability for longer blocks of text. Notice how the lines have more space between them, making it easier to scan.</p>
        </div>
      </section>
      
      <section class="responsive">
        <h2>Responsive Typography</h2>
        <p>This section demonstrates responsive typography that adjusts based on screen size.</p>
        <p class="fluid-text">This text uses fluid sizing that scales with the viewport.</p>
        <h3 class="clamp-heading">This heading uses clamp() for responsive sizing</h3>
      </section>
    </main>
    
    <footer>
      <p>&copy; 2025 Typography Example</p>
    </footer>
  </div>
</body>
</html>

styles.css

Example Code

css

/* Base styles */
:root {
  /* Define root font size for rem units */
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f8f8;
  padding: 20px;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Header Typography */
header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  font-weight: 300;
}

/* Section Typography */
section {
  margin-bottom: 40px;
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: 1rem;
  color: #34495e;
}

/* Example Cards */
.example-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.example-card h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #3498db;
}

/* Font Family Examples */
.sans-serif {
  font-family: Arial, Helvetica, sans-serif;
}

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

.monospace {
  font-family: 'Courier New', Courier, monospace;
}

/* Text Decoration Examples */
.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}

.fancy-underline {
  text-decoration: underline wavy #e74c3c;
}

/* Text Transform Examples */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

/* Text Alignment Examples */
.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.align-justify {
  text-align: justify;
}

/* Spacing Examples */
.letter-spacing {
  letter-spacing: 2px;
}

.word-spacing {
  word-spacing: 5px;
}

.line-height {
  line-height: 2;
}

/* Responsive Typography */
.fluid-text {
  font-size: calc(1rem + 1vw);
  margin-bottom: 1rem;
}

.clamp-heading {
  font-size: clamp(1.2rem, 5vw, 2rem);
  color: #3498db;
  margin-bottom: 1rem;
}

/* Footer */
footer {
  margin-top: 40px;
  text-align: center;
  color: #7f8c8d;
  font-size: 0.9rem;
}

/* Media Queries for Responsive Typography */
@media screen and (min-width: 768px) {
  body {
    font-size: 17px;
  }
  
  .title {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 15px;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .container {
    padding: 15px;
  }
}

Pro Tip:

Typography is a fundamental aspect of good web design. Focus on readability first, then aesthetics. Consider line length (45-75 characters per line is ideal), contrast, and hierarchy. Use a limited number of fonts (2-3 maximum) for a cohesive design.

Summary

✓
Font properties control typeface, size, weight, and style
✓
Text properties affect alignment, decoration, spacing, and transformation
✓
Web fonts expand typography options beyond system fonts
✓
Responsive typography ensures readability across different devices

Previous: Box Model Next: Layout and Positioning