A font is a specific instance of a typeface, defined by its weight, width and style and delivered as a file that a computer uses to render text. In typography, the typeface is the design (for example a sans-serif family), while a font is one concrete member of it, such as the bold italic, packaged in a format like OpenType or WOFF2.
The word comes from metal type, where a font was a complete set of letters in one size and one style. Digital fonts are scalable, so size is no longer part of the definition, but the distinction between design and implementation remains useful when choosing, licensing and deploying type.
Font versus typeface
In everyday speech the two words are used interchangeably, but professionals keep them apart. A typeface is the creative design shared by a family, and a font is the deliverable that implements one variant of that design. The difference matters most when discussing licensing, file formats and weights.
| Concept | What it is | Example |
|---|---|---|
| Typeface | The overall letter design | A humanist sans-serif design |
| Font family | All styles of one typeface | Light, Regular, Bold and their italics |
| Font | One style in one file or instance | Bold Italic as an OTF file |
| Variable font | One file containing a continuous range | Weight axis from 100 to 900 |
What a font file contains
A digital font is more than a set of shapes. It contains glyph outlines, a character map that links Unicode code points to glyphs, metrics such as advance widths and vertical metrics, kerning data, and often OpenType features for ligatures, small caps or alternative numerals.
Outlines are drawn on a grid of units per em, usually 1000 for PostScript-flavored fonts and 2048 for TrueType-flavored fonts. Key vertical measurements, including the x-height, cap height, ascender and descender, are defined in these units and scale proportionally with the font size.
| Component | Purpose | Effect on text |
|---|---|---|
| Glyph outlines | Shapes of letters and symbols | Visual design of each character |
| Character map | Links Unicode to glyphs | Which languages and symbols are supported |
| Metrics | Widths, line spacing values | Spacing and default leading |
| Kerning tables | Spacing adjustments for letter pairs | Even rhythm in pairs such as AV |
| OpenType features | Substitution and positioning rules | Ligatures, small caps, figure styles |
| Hinting | Instructions for low-resolution rendering | Sharpness at small screen sizes |
Font formats
Font formats differ in outline technology, compression and where they are used. For new projects, OpenType for desktop and WOFF2 for the web cover almost every need.
| Format | Characteristics | Typical use |
|---|---|---|
| OpenType (OTF, TTF) | Cross-platform, rich typographic features | Desktop design and operating systems |
| TrueType (TTF) | Quadratic outlines, strong hinting support | System fonts, older workflows |
| WOFF2 | Compressed web wrapper, smallest files | Websites and web applications |
| WOFF | Older compressed web wrapper | Fallback for very old browsers |
| Variable font (OpenType) | Interpolated design axes in one file | Responsive and flexible typography |
A variable font stores one or more design axes, such as weight, width or optical size, and lets software select any value along them. One variable file can replace many static fonts, which often reduces total download size on the web when several weights are needed.
Choosing and using fonts
Choosing a font starts with the reading situation: text size, medium, language coverage and the number of styles the hierarchy requires. Legibility at the actual size matters more than the impression of a specimen sheet.
| Situation | Recommended choice | Reason |
|---|---|---|
| Long body text on screen | Large x-height, open apertures | Readable at 16 px and above |
| Interfaces with data | Font with tabular figures | Numbers align in columns |
| Multilingual product | Font with broad character coverage | Avoids fallback fonts mid-sentence |
| Performance-sensitive website | Subset WOFF2 or one variable font | Faster loading, less layout shift |
| Display headlines | Font optimized for large sizes | Tighter spacing and finer details |
On the web, fonts are loaded through the font-face rule, and the font-display setting decides whether text appears in a fallback font first. Defining a fallback stack with similar metrics limits the visible jump when the web font arrives.
Font licensing and common mistakes
Fonts are software with licenses, and the license usually depends on the use: desktop, web, app embedding or broadcast. Open-source fonts under the SIL Open Font License may be used and embedded freely, while commercial fonts often limit page views, installations or applications.
- Using a desktop license on a website may violate the terms, because web embedding is usually licensed separately.
- Faux bold and faux italic, generated by software when a style is missing, distort the design; the real font file should be loaded.
- Loading too many fonts slows pages and weakens visual consistency; two families are usually enough.
- Missing glyphs for accented letters cause fallback characters that break the look of the text.
The idea in brief
A typeface is the design of the letters, like a recipe. A font is one specific version you actually use, like a particular dish made from that recipe, for example the bold or the italic.
On a computer, a font is a file that tells the screen or printer how to draw each letter. Choosing the right font affects how easy text is to read and how a brand or document feels.
A practical scenario
A design team rebuilds the website of a regional newspaper. The old site loads eight separate font files, two families in four styles each, totaling several hundred kilobytes, and readers on mobile see text jump as fonts arrive.
The team switches to one variable font for headlines and body text, subset to the Latin characters the paper needs, served as WOFF2. They set a fallback system font with closely matched metrics and confirm that the license covers web use at the paper’s traffic level.
The new pages download far less font data, text appears immediately in the fallback and then switches with barely visible movement, and the editorial team gains intermediate weights for headlines without extra files.