Font menus place family, weight and size controls beside one another, which makes the terminology easy to mix up. Enlarging text does not select another family, and making it bold does not change its family either. Keeping those decisions separate helps you describe a design request and load the right files on a website.
Font vs Typeface vs Font Size
A typeface describes a shared letter design. A font is a usable face or digital resource that delivers that design. People use the terms interchangeably in many settings. Adobe's explanation of fonts distinguishes the family from a particular style. In digital typography, however, a font should not be defined as permanently tied to one size.
Scroll sideways to read every column. Keyboard: focus the table and use the arrow keys.
| Setting | Example | What It Changes |
|---|---|---|
| Family | Arial, Georgia | The underlying letterforms |
| Weight | Regular, Bold | The weight of the strokes |
| Style | Normal, Italic | The upright or italic form |
| Size | 12 pt, 16 px | The scale of the text |
| File | TTF, OTF, WOFF2 | The resource that stores and delivers the font |
A point is a size unit. In CSS, 1 pt is 1/72 of an inch and 1 px is 1/96 of an inch, so 12 pt equals 16 CSS pixels. This does not mean every physical screen pixel has the same size. Two typefaces set at the same point size can also appear different because their letter proportions differ. See MDN's length reference for the unit definitions.
Choosing a font is only part of arranging text. Line spacing, alignment, line length and the relationship between headings belong to the broader practice of typography.
What Are the Main Types of Font?
There is no single definitive count of font categories. The following groups describe common characteristics, and some overlap. Slab serif is a serif approach; display usually describes a design intended for prominent, larger use.
- Serif: Small projections appear at the ends of strokes. Georgia and Times New Roman are familiar examples.
- Sans-serif: Those projections are absent. Arial and Verdana are examples.
- Slab serif: Substantial, block-like serifs define the appearance. Check the actual design at small sizes before using it for body text.
- Script: Letterforms suggest handwriting or calligraphy. A short invitation heading and a long explanation place different demands on the design.
- Monospace: Characters occupy equal horizontal space. This is useful for code and certain aligned text.
- Display: The design is intended for prominent uses such as headlines or posters. Test its detailed forms before using it at a small reading size.
Serifs are not restricted to print, and sans-serif typefaces are not restricted to screens. Readability also depends on size, spacing, contrast and the amount of text. The writing-style examples offer a separate starting point for comparing visual approaches.
What Should You Check Before Choosing a Font?
Do not judge a candidate from one word in a preview box. Try a real heading, a paragraph, a price and a button label from your design. Compare regular and bold text at roughly the size people will encounter on a phone.
Check Language Coverage and Similar Characters
A bilingual website needs the characters used in both languages. For Turkish, test İ, ı, Ş, ş, Ğ, ğ, Ç, ç, Ö, ö, Ü and ü in upper and lower case. A missing character may trigger a fallback font or a missing-glyph symbol; it does not always appear as an empty box.
Compare capital I, lowercase l and the number 1, as well as O and 0. Their distinction can matter more in a product code than in a decorative poster heading. A general “Latin Extended” label is not proof that the specific file you downloaded contains every character your content needs.
Read It at the Intended Size
X-height is the height of the lowercase x. It helps explain why typefaces look different at the same nominal size. Internal spaces and openings affect the appearance of small text as well. No single anatomy measurement establishes a universally readable font; read an actual paragraph in your layout.
One family and the weights you need provide a manageable starting point for a small design. Give a second family a defined role, such as headings or emphasis. That is a working approach, not a fixed numerical limit. For brand personality, different media and pairing decisions, continue with the font choice guide.
Check the License Alongside the File
“Free download” does not establish permission for every use. Desktop design, website embedding and distribution inside an application may have different terms. Keep the download source, license file and intended use together.
The official Google Fonts repository asks users to read each family's license. OFL fonts can be used in commercial designs, while modification and redistribution have additional conditions. The SIL Open Font License guidance explains that distinction. Free fonts are licensed too; a license is not a concept reserved for paid products.
How Do You Use a Font on a Website?
A font installed on your computer is not automatically available on a visitor's device. A website can use available system fonts and fallbacks, or serve a permitted font file with @font-face. In CSS font styling, family, weight, style and size are separate properties.
The example below assumes that you have a licensed regular WOFF2 file. Replace the path with its actual location; the illustrative filename is not a download link.
@font-face {
font-family: "SiteText";
src: url("/fonts/site-text-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "SiteText", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}Define suitable files for bold and italic text, or use a variable font that supports those variations. A browser's synthesized bold may differ from a deliberately designed bold face. The @font-face declaration maps a resource to its family, weight and style.
What Does a Variable Font Do?
A variable font can provide a range along supported axes, such as weight or width, in one file. Not every font includes every axis, and italics may require a separate file. It can be useful when you need several variations, but it is not guaranteed to be smaller than a single regular font. MDN's variable-font guide explains the available axes and how to use them.
Can Font Loading Affect Page Speed?
Yes. A late font can delay visible text; switching from a fallback can move lines around. The example's swap setting allows fallback text to appear, but does not automatically prevent layout shifts. Avoid unused weights, choose compatible fallback metrics and prioritize only resources that need it. Web.dev's font performance guidance covers the relationship between loading and visual stability.
Finish by checking more than appearance. Is the text readable when the file fails to load? Do accented characters change style? Does a button label overflow? Those questions connect the font to the experience of using the interface. A suitable font earns its place by working within the design.
