THE GITHTML FIELD GUIDE
Choose dependable typography for portable HTML
Use a system-font stack for prose and a generic monospace fallback for code, with relative font sizes and comfortable line spacing. Set a maximum reading width rather than a fixed page width. A document should remain understandable when custom fonts fail, text grows, or the available screen width changes.
Make typography independent of downloads
A custom font can reinforce a brand, but a technical report should not require it to communicate. A system-font stack uses fonts already available to the browser environment and avoids a separate network request. This is particularly useful for gitHtml documents because remote resources are optional and off by default. A missing font should never make a document blank.
If a brand font is retained as an enhancement, compare the fallback carefully. Different character widths can change line breaks, table widths, and button labels. Avoid layouts that only work with one exact font metric. Do not encode important symbols using a custom icon font when ordinary text or a static, labeled graphic would communicate more reliably.
Tune the reading rhythm
Long paragraphs become tiring when each line spans the entire width of a large screen, while excessively narrow measures create constant line breaks on a phone. A maximum width expressed in character-related units can provide a reasonable starting point. Let the container shrink with the screen and retain modest side padding so text does not touch the edges.
Use relative sizes so the document can adapt more naturally to browser and user settings. A unitless line-height gives descendants a scalable baseline. Treat the values below as an authoring starting point, not an accessibility certification. Actual readability depends on the language, content density, reader preferences, and the rendering environment.
Check difficult content, not only prose
Typography failures often appear first in inline identifiers, footnotes, captions, and tables. Those elements tend to receive smaller type in polished templates. Resist making them tiny merely to preserve visual hierarchy; important evidence should remain readable. Distinguish secondary material with spacing and wording as well as size.
- Inspect a paragraph, a caption, and a code sample without remote resources.
- Enlarge text and look for clipped labels.
- Check whether headings wrap without colliding with nearby content.
- Keep text selectable rather than converting it to a decorative image.
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
max-width: 68ch;
margin: auto;
padding: 1rem;
}
code { font-family: ui-monospace, monospace; }
small, figcaption { font-size: .95rem; }Sources and further reading
AI-assisted writing with source-linked guidance and illustrative examples. Read our editorial approach or report a correction.