Aabestfontgenerator.
THE TYPE NOTEBOOK

Typeface vs Font: What the Terms Mean

Clear typography concepts, practical examples and useful next steps.

A useful distinction is to call the visual design a typeface and a usable implementation or style a font. Everyday software often uses font more loosely. The practical task is to identify the family, style and files you actually need, rather than treating either term as a complete specification.

COMPARE REAL FONTS

Try the collection.

Read the selection notes ↓

Enter the same words in each specimen to compare. These are editorial starting points; explore each family for its background and license.

LIVE TYPEFACE SPECIMEN

See your words in Inter.

Real font preview
Loading Inter…
Get font from the official source ↗

This preview uses a real font. Copying ordinary text into another app will not carry this font with it. The PNG keeps the visual appearance.

Explore Inter: history, styles and license ↗

LIVE TYPEFACE SPECIMEN

See your words in EB Garamond.

Real font preview
Loading EB Garamond…
Get font from the official source ↗

This preview uses a real font. Copying ordinary text into another app will not carry this font with it. The PNG keeps the visual appearance.

Explore EB Garamond: history, styles and license ↗

01

Start with a design, then name the style

Inter names a family you can inspect in the specimen. Inter Regular and Inter Bold select different weights within that family. EB Garamond is a different design with a different background. In a project brief, specify the family and style instead of saying only “use a nice font.”

Modern interfaces commonly put family names in a menu labeled Font. That wording is convenient, but it does not tell you which weights or scripts the installed files contain. Keep the exact family name when handing a design to another person.

02

Why the file is a separate question

A font file supplies data used to draw and position glyphs. The OpenType specification describes separate tables for outlines, layout and naming information. One file extension does not by itself describe the whole visual design or every available style.

For a handoff, write down the family, the styles used, the source and the files included. If a colleague has a different version, compare the actual output rather than assuming the shared name guarantees identical line breaks. Read font file types for the format question.

03

Family, weight and size are different decisions

On the web, family, weight and size can be selected separately. A larger size does not turn a regular style into a designed bold, and copying words does not install the family on another device.

Use the specimen to compare a heading and a paragraph. First change only the family, then only the style, then the size. This small exercise makes the decisions easier to describe to a designer or developer without relying on vague labels.

04

A clearer way to request typography

A useful instruction might be: “Use Inter 600 for the section headings and Inter 400 for the body, from the linked official source.” Add the output sizes and any language requirements your layout needs. Those details are more actionable than debating which term the font menu uses.

For a contrasting editorial approach, compare serif examples and sans-serif designs. For decorative clipboard characters, read Unicode text versus real fonts; that is a different mechanism from selecting a family.

GOOD QUESTIONS

Your questions, answered.

Are font and typeface interchangeable?

They are often used loosely in software. For precise project work, distinguish the design or family from the specific style, file or implementation you need.

Is bold a different typeface?

Usually a designed bold is a style within a family. Check the actual family and files rather than assuming every design includes one.

Does changing font size change the family?

No. Size and family are separate choices. Some families also provide optical-size designs, so inspect the specific files and controls.

Sources & background

Sources supporting this page’s explanations. Practical examples are our editorial suggestions.