Typography: fonts and readable text

Choosing a font

font-family takes a list called a font stack. The browser uses the first font it has and falls back to the next. The last item should be a generic family: sans-serif, serif or monospace.

body {
  font-family: system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
}
h1, h2 { line-height: 1.2; }

Web fonts

A web font is a font file the browser downloads, such as one from Google Fonts or a file you host yourself with @font-face. They give a brand its look, but each weight is another download, so use only the two or three weights you need.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap; /* show fallback text at once, swap when loaded */
}
body { font-family: "Inter", system-ui, sans-serif; }

font-display: swap shows text immediately in a fallback font and switches when the web font arrives, so users on slow mobile data never stare at a blank page.

Indian scripts

If your page has Hindi, Tamil, Bengali or other scripts, choose fonts that support them, such as the Noto family (Noto Sans Devanagari, Noto Sans Tamil). Mark the language with lang, for example <p lang="hi">, so browsers and screen readers handle it correctly.

Size, weight, spacing

Line length

Very long lines tire the eye. A comfortable line holds about 45 to 75 characters. The ch unit is the width of the "0" character, so max-width: 65ch keeps paragraphs readable on wide screens.