What is a Font?
A font is a complete set of characters (letters, numbers, symbols, and punctuation) in one specific style and weight of a typeface. Helvetica is a typeface; Helvetica Bold is a font. On computers, a font is the file that tells the screen how to draw those characters at any size.
More About Fonts
The term goes back to metal printing. A font was one complete set of cast-metal characters in a single size, weight, and style. The word comes from the French fonte, “a casting,” because all the letters in a set were cast together from molten metal. Digital type kept the word: today each font is a file, and a family like Helvetica ships as several of them, as shown above.
What’s the difference between a font and a typeface?
A typeface is the design; a font is one version of it you can actually use. In everyday use the two words have blurred together, and even font menus mix them, so no one will fault you for saying “font” everywhere. The difference mostly matters when you license or organize fonts, since you buy and manage each weight and style separately.
How do fonts work on a website?
A browser can only draw text with a font it can reach. That happens two ways: system fonts already installed on the visitor’s device, or web fonts the page downloads along with its CSS. Web fonts freed designers from the short list of “web-safe” fonts that most computers already had, and they’re now the norm. Your stylesheet lists backup choices in case a font fails to load; that priority list is the font-family stack.
How do you choose fonts for a website?
Start with readability, not personality. Body text has to stay comfortable at small sizes and long lengths. That’s why most sites set paragraphs in a plain serif or sans serif and save expressive display type for headings. Two families, one for headings and one for body text, cover most designs. Check your choices on a phone screen first; type that looks elegant on a desktop can fall apart at mobile sizes.
Frequently Asked Questions
What are web-safe fonts?
The handful of fonts preinstalled on nearly every desktop and laptop, like Arial, Georgia, Times New Roman, Verdana, and Courier New. Phones are a different story: Android ships its own fonts and lacks most of these. Today web-safe fonts mostly serve as fallbacks, the fonts your text shows in if your web font fails to load.
Do fonts slow down a website?
They can. Every family, weight, and style you use is another file to download, and big font files delay how quickly text appears. Trim the list of weights, use the compressed WOFF2 format, and consider system fonts for body text if speed is critical.
What is a variable font?
A single font file that contains a continuous range of weights and widths instead of one fixed style. One variable font can replace half a dozen separate files, which saves downloads. All major browsers have supported them for years.
Are fonts free to use?
Some are, some aren't. Fonts are licensed software: open-source fonts (all of Google Fonts, for example) are free even commercially, while commercial typefaces sell licenses, often priced separately for web, print, and app use. Check the license before using a font in client work.
