How to style fonts and text

Choose a font stack

List preferred fonts followed by a generic family. System fonts load quickly and match the reader's platform.

body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

Control emphasis and alignment

Use font-weight for visual weight and text-align for alignment. Keep long passages left-aligned in left-to-right languages.

h1 { font-weight: 700; }
.price { text-align: end; }

Improve reading comfort

A comfortable line is often about 45–75 characters. Relative sizes respect user preferences.

.article {
  max-width: 68ch;
  font-size: 1.125rem;
}

Load web fonts responsibly

• Provide fallback fonts to reduce layout shifts
• Use only the weights the design needs
• Prefer modern compressed formats such as WOFF2
• Do not convey meaning through typography alone