CSS Fonts and Text Styling

Typography is a crucial part of web design. CSS provides extensive control over fonts, text spacing, alignment, and other text properties to make your content readable and beautiful.

Font Family

Specify which fonts to use for text.

Generic Font Families

Fallback fonts that work on all systems.

.sans-serif {
  font-family: sans-serif; /* Arial, Helvetica, etc. */
}

.serif {
  font-family: serif; /* Times New Roman, Georgia, etc. */
}

.monospace {
  font-family: monospace; /* Courier New, Consolas, etc. */
}

Specific Fonts

Use specific font names with fallbacks.

.specific-font {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Web Fonts

Load fonts from the web using @font-face.

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.custom-text {
  font-family: 'MyCustomFont', sans-serif;
}

Font Weight

Control text thickness.

.light {
  font-weight: 300;
}

.normal {
  font-weight: 400; /* Default */
}

.bold {
  font-weight: 700;
}

.extra-bold {
  font-weight: 900;
}

Font Style

Make text italic or oblique.

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Text Alignment

Control horizontal text alignment.

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

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

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

.justify {
  text-align: justify; /* Spread text to fill width */
}

Text Decoration

Add underlines, overlines, and strikethroughs.

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

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

.multiple {
  text-decoration: underline overline;
}

Text Transform

Change text case.

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

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

Line Height

Control spacing between lines of text.

.tight {
  line-height: 1.2;
}

.normal {
  line-height: 1.5; /* Good for readability */
}

.loose {
  line-height: 2;
}

Letter Spacing and Word Spacing

Control spacing between characters and words.

.tight-letters {
  letter-spacing: -0.05em;
}

.spaced-letters {
  letter-spacing: 0.1em;
}

.spaced-words {
  word-spacing: 0.2em;
}

Text Shadow

Add shadows to text.

.shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.multiple-shadows {
  text-shadow: 1px 1px 0px #ccc, 2px 2px 0px #c9c9c9, 3px 3px 0px #bbb;
}

Practical Examples

Typography Scale

Create a consistent text hierarchy.

: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 */
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  line-height: 1.3;
}

p {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

Card Component

Style text within cards.

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.card-text {
  color: #666;
  line-height: 1.5;
}

.card-link {
  color: #007bff;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

Code Blocks

Style code and preformatted text.

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background-color: #f8f9fa;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.45;
}

pre code {
  background: none;
  padding: 0;
}

Quote Styling

Style blockquotes.

blockquote {
  border-left: 4px solid #007bff;
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #666;
}

blockquote::before {
  content: '"';
  font-size: 2rem;
  color: #007bff;
  float: left;
  margin-right: 0.5rem;
  margin-top: -0.5rem;
}

Responsive Typography

Adjust text size based on screen size.

.responsive-text {
  font-size: 1rem; /* 16px on mobile */
}

@media (min-width: 768px) {
  .responsive-text {
    font-size: 1.125rem; /* 18px on tablet */
  }
}

@media (min-width: 1024px) {
  .responsive-text {
    font-size: 1.25rem; /* 20px on desktop */
  }
}

Font Loading

Optimize font loading performance.

/* Preload critical fonts */
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

/* Use font-display for better performance */
@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap; /* Show fallback text, swap when font loads */
}

Accessibility Considerations

Ensure sufficient color contrast
Don’t rely on color alone for meaning
Test with browser zoom
Use relative units for better accessibility

Browser Support

Typography features are well supported:

Chrome: Full support
Firefox: Full support
Safari: Full support
Edge: Full support

Web fonts have excellent support in modern browsers.

Best Practices

Use a consistent typography scale
Choose readable fonts
Ensure good line height for readability
Test on different screen sizes
Optimize font loading

Common Issues

Fonts not loading (check paths and CORS)
Text looking different across browsers
Performance issues with too many font weights
Inconsistent spacing

External Resources:

Related Tutorials:

Last updated on January 10, 2026

CSS Colors and Backgrounds