~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/css/7css-typography

# CSS Typography & Fonts

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

## Font Families

```css
/* 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:

```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@400;700&display=swap"
  rel="stylesheet"
/>
```

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

## Font Properties

### Font Size

```css
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

```css
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

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

### Font Variant

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

## Line Height

Controls spacing between lines:

```css
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

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

### Text Decoration

```css
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

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

### Text Shadow

```css
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

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

### Word Spacing

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

### White Space

```css
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

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

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

## Complete Example

```css
/* 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:

```css
: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

No changes yet

cancel