CSS Typography & Fonts

Typography is the art of arranging text. Good typography makes content readable and visually appealing.

Font Families

/* Single font */
font-family: Arial;

/* Font stack (fallbacks) */
font-family: Arial, Helvetica, sans-serif;

/* Web fonts */
font-family: 'Roboto', sans-serif;

Font categories:

• Serif — Times, Georgia (formal, traditional)
• Sans-serif — Arial, Helvetica (clean, modern)
• Monospace — Courier, Consolas (code, technical)
• Cursive — Comic Sans, Brush Script (decorative)

Google Fonts

Import web fonts from Google Fonts:

<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"
/>

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

Font Properties

Font Size

font-size: 16px;        /* Pixels */
font-size: 1.5rem;      /* Relative to root */
font-size: 1.2em;       /* Relative to parent */
font-size: 120%;        /* Percentage of parent */
font-size: large;       /* Keyword */
font-size: 2vw;         /* Viewport width */

Font Weight

font-weight: normal;     /* 400 (default) */
font-weight: bold;       /* 700 */
font-weight: 100;        /* Thin */
font-weight: 300;        /* Light */
font-weight: 400;        /* Regular */
font-weight: 500;        /* Medium */
font-weight: 600;        /* Semi-bold */
font-weight: 700;        /* Bold */
font-weight: 900;        /* Black */

Font Style

font-style: normal;      /* Regular (default) */
font-style: italic;      /* Italic */
font-style: oblique;     /* Slanted */

Font Variant

font-variant: normal;            /* Regular (default) */
font-variant: small-caps;        /* Small capitals */

Line Height

Controls spacing between lines:

line-height: 1.5;        /* Relative to font size */
line-height: 24px;       /* Fixed height */
line-height: 150%;       /* Percentage */

Best practice: Use unitless values (1.5) for better scaling.

Text Properties

Text Alignment

text-align: left;        /* Left align (default) */
text-align: right;       /* Right align */
text-align: center;      /* Center */
text-align: justify;     /* Justify text */

Text Decoration

text-decoration: none;           /* No decoration */
text-decoration: underline;      /* Underline */
text-decoration: line-through;   /* Strikethrough */
text-decoration: overline;       /* Overline */
text-decoration: underline wavy red; /* Custom decoration */

Text Transformation

text-transform: none;            /* No change */
text-transform: uppercase;       /* UPPERCASE */
text-transform: lowercase;       /* lowercase */
text-transform: capitalize;      /* Capitalize First Letter */

Text Shadow

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 10px #3498db;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #fff;

Letter Spacing

letter-spacing: normal;          /* Default */
letter-spacing: 2px;             /* Extra space */
letter-spacing: -1px;            /* Tighter */

Word Spacing

word-spacing: normal;            /* Default */
word-spacing: 10px;              /* Extra space */

White Space

white-space: normal;             /* Wrap text (default) */
white-space: nowrap;             /* No wrapping */
white-space: pre;                /* Preserve spaces */
white-space: pre-wrap;           /* Preserve but wrap */

Text Overflow

/* Truncate with ellipsis */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

/* Clip text */
overflow: hidden;
text-overflow: clip;

Complete Example

/* Body text */
body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Headings */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #2c3e50;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  color: #34495e;
}

/* Paragraphs */
p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #555;
}

/* Links */
a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* Buttons */
.button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Code */
code {
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  background-color: #f5f5f5;
  border-radius: 3px;
}

/* Blockquote */
blockquote {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  padding-left: 20px;
  border-left: 4px solid #3498db;
  margin: 1.5rem 0;
  color: #666;
}

/* Truncated text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

Typography Scale

Use a consistent scale for headings:

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

Best Practices

1. Use rem for font sizes — Scales with user preferences
2. Set line-height: 1.5 — Improves readability
3. Limit font families — Use 2-3 max
4. Use font weights sparingly — Bold for emphasis only
5. Ensure contrast — Text must be readable

Common Mistakes

1. Using px for font sizes — Doesn’t scale with user settings
2. Too many fonts — Looks unprofessional
3. Poor line height — Text feels cramped
4. Low contrast — Hard to read
5. Overusing bold/italic — Loses emphasis