OnlineCBT
Make reading comfortable before choosing a decorative font
Typography combines family, size, weight, line height and line length. A good default remains readable when a web font fails to load, when text is translated, and when the user zooms.
.tech-lesson-content {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #0f172a;
}
.article { max-width: 65ch; margin-inline: auto; }
h1 { font-size: 2rem; line-height: 1.2; }
button, input, select, textarea { font: inherit; }The unitless line-height scales with each element's font size. The ch-based maximum width is an approximate reading measure, not a fixed character count for every language. Test actual Hindi and English paragraphs rather than assuming identical metrics.
Using a web font
A provider such as Google Fonts supplies a stylesheet link generated for the chosen family, weights and scripts. Put that link in the document head and declare the selected family with a fallback. Alternatively, self-host a properly licensed font file:
@font-face {
font-family: "Lesson Sans";
src: url("fonts/lesson-sans.woff2") format("woff2");
font-display: swap;
}
.article { font-family: "Lesson Sans", system-ui, sans-serif; }Replace the example path with an actual licensed file. swap allows fallback text while the font loads. Different metrics can shift layout when the font replaces the fallback, so reserve space and compare the two.
Load only what you need
Requesting many families, weights and language subsets increases download cost. Confirm the font includes Devanagari if you display Hindi. Do not fake meaningful bold hierarchy by using only a decorative thin font. A remote font request also creates a third-party dependency; choose hosting according to the project's privacy and performance needs.
Practice
- Compare paragraphs at line-height 1.2 and 1.6.
- Disable the web-font request and check fallback layout.
- Zoom to 200% and verify headings do not clip.
- Make form controls inherit the body font and compare their alignment.
