# FontFYI — Glossary

> Typography terms and definitions.

- [@font-face](https://fontfyi.com/glossary/font-face/) — A CSS at-rule that allows web designers to specify custom fonts for their web pages. The foundation of web typography.
- [Accessibility (Typography)](https://fontfyi.com/glossary/accessibility-typography/) — Typography practices ensuring content is usable by everyone — sufficient contrast, scalable text, clear hierarchy, and a
- [Anti-aliasing](https://fontfyi.com/glossary/anti-aliasing/) — Smoothing the jagged edges of rendered text by blending edge pixels. CSS: -webkit-font-smoothing: antialiased.
- [Aperture](https://fontfyi.com/glossary/aperture/) — The opening of a partially enclosed counter in letters like 'c', 'e', 's'. Wider apertures generally improve readability
- [Ascender](https://fontfyi.com/glossary/ascender/) — The part of a lowercase letter that extends above the x-height, as in 'b', 'd', 'h', 'k', 'l'.
- [Baseline](https://fontfyi.com/glossary/baseline/) — The invisible line on which most letters sit. Descenders extend below the baseline.
- [Bauhaus Typography](https://fontfyi.com/glossary/bauhaus-typography/) — The Bauhaus school (1919–1933) revolutionized typography with geometric forms, sans-serif preference, and the principle 
- [Bowl](https://fontfyi.com/glossary/bowl/) — The curved stroke creating an enclosed counter in letters like 'b', 'd', 'p', 'q'. The shape varies widely between typef
- [CLS (Font-related)](https://fontfyi.com/glossary/cls-fonts/) — Cumulative Layout Shift caused by font loading — text reflows when web font replaces fallback due to different metrics. 
- [Cap Height](https://fontfyi.com/glossary/cap-height/) — The height of a capital letter measured from the baseline to the top of flat capitals like 'H' or 'I'.
- [Contrast (Typography)](https://fontfyi.com/glossary/contrast/) — The difference between the thickest and thinnest parts of a letter's strokes. High-contrast fonts (like Didot) have dram
- [Contrast Ratio](https://fontfyi.com/glossary/contrast-ratio/) — The luminance ratio between foreground text and background color. WCAG requires 4.5:1 for normal text (AA) and 7:1 for e
- [Counter](https://fontfyi.com/glossary/counter/) — The enclosed or partially enclosed space within letters like 'o', 'e', 'p'. Open counters (as in 'c') are called apertur
- [Crossbar](https://fontfyi.com/glossary/crossbar/) — The horizontal stroke in letters like 'A', 'H', 'e', 'f'. Its position relative to the x-height affects readability.
- [Descender](https://fontfyi.com/glossary/descender/) — The part of a letter that extends below the baseline, as in 'g', 'j', 'p', 'q', 'y'.
- [Display Typeface](https://fontfyi.com/glossary/display-typeface/) — Typefaces designed for use at large sizes — headlines, posters, logos. Not optimized for body text readability at small 
- [Dyslexia-Friendly Fonts](https://fontfyi.com/glossary/dyslexia-friendly/) — Fonts designed for improved readability for dyslexic readers — with unambiguous letterforms, generous spacing, and weigh
- [Em](https://fontfyi.com/glossary/em/) — A typographic unit equal to the current font size. In CSS, 1em = the parent element's font size. The basis for relative 
- [FOIT](https://fontfyi.com/glossary/foit/) — Flash of Invisible Text — when text is hidden until the web font loads. Worse than FOUT for user experience. Prevented b
- [FOUT](https://fontfyi.com/glossary/fout/) — Flash of Unstyled Text — when a fallback font briefly appears before the web font loads. Mitigated by font-display: swap
- [Fluid Typography](https://fontfyi.com/glossary/fluid-typography/) — Typography that scales smoothly between minimum and maximum sizes using CSS clamp() — no breakpoint jumps needed.
- [Font](https://fontfyi.com/glossary/font/) — A specific instance of a typeface at a particular weight, size, and style. For example, 'Inter Bold 16px' is a font; 'In
- [Font Family](https://fontfyi.com/glossary/font-family/) — A group of related fonts that share the same basic design but vary in weight, width, or style. In CSS, the font-family p
- [Font Loading API](https://fontfyi.com/glossary/font-loading-api/) — JavaScript API (document.fonts) for programmatic font loading control — check if fonts are loaded, preload specific font
- [Font Pairing](https://fontfyi.com/glossary/font-pairing/) — The practice of selecting two or more complementary fonts to use together in a design. Usually combines a heading font w
- [Font Preloading](https://fontfyi.com/glossary/font-preloading/) — Using <link rel="preload" as="font"> to prioritize font downloads, reducing FOUT/FOIT and improving Largest Contentful P
- [Font Stack](https://fontfyi.com/glossary/font-stack/) — An ordered list of fonts in CSS font-family, providing fallbacks if the preferred font is unavailable. E.g., 'Inter, sys
- [Font Weight](https://fontfyi.com/glossary/font-weight/) — The thickness of character strokes, typically ranging from 100 (Thin) to 900 (Black). Regular is 400, Bold is 700.
- [Futura](https://fontfyi.com/glossary/futura-history/) — The geometric sans-serif designed by Paul Renner in 1927, embodying Bauhaus modernism. Its influence is seen in Poppins,
- [Garamond](https://fontfyi.com/glossary/garamond-history/) — The influential old-style serif typeface by Claude Garamond (~1530). One of the oldest typeface designs still in active 
- [Geometric Sans](https://fontfyi.com/glossary/geometric-sans-class/) — Sans-serif typefaces built on geometric shapes — circles, rectangles, triangles. Clean and modern but can feel cold at s
- [Glyph](https://fontfyi.com/glossary/glyph/) — A single visual representation of a character. One character can have multiple glyphs (e.g., regular and italic 'a').
- [Google Fonts](https://fontfyi.com/glossary/google-fonts/) — Google's free, open-source font library with 1,900+ families. The largest collection of freely-licensed web fonts, serve
- [Gutenberg](https://fontfyi.com/glossary/gutenberg/) — Johannes Gutenberg invented movable type printing around 1440, enabling mass production of books and democratizing acces
- [Helvetica](https://fontfyi.com/glossary/helvetica/) — The iconic neo-grotesque typeface designed by Max Miedinger in 1957. Defined modern graphic design and remains the world
- [Hinting](https://fontfyi.com/glossary/hinting/) — Instructions embedded in a font that improve its rendering at small sizes on low-resolution screens by aligning outlines
- [Humanist Sans](https://fontfyi.com/glossary/humanist-sans-class/) — Sans-serif typefaces inspired by Renaissance handwriting with organic stroke variation. Warmer and more readable than ge
- [Kerning](https://fontfyi.com/glossary/kerning/) — The adjustment of space between individual letter pairs to achieve visually consistent spacing.
- [Leading](https://fontfyi.com/glossary/leading/) — The vertical distance between lines of text, measured from baseline to baseline. Named after lead strips used in letterp
- [Legibility](https://fontfyi.com/glossary/legibility/) — How easily individual characters can be distinguished from each other — an intrinsic quality of the typeface design itse
- [Letter Spacing](https://fontfyi.com/glossary/letter-spacing/) — The CSS property for adjusting spacing between all characters. Positive values spread letters apart; negative values bri
- [Ligature](https://fontfyi.com/glossary/ligature/) — Two or more letters combined into a single glyph, like 'fi' or 'fl'. Common in serif fonts and coding fonts (e.g., Fira 
- [Line Height](https://fontfyi.com/glossary/line-height/) — The CSS property controlling the distance between lines of text. Typically set to 1.5 or 150% for body text readability.
- [Measure](https://fontfyi.com/glossary/measure/) — The length of a line of text, typically 45–75 characters for optimal readability. Too long or too short reduces reading 
- [Modular Scale](https://fontfyi.com/glossary/modular-scale/) — A sequence of harmonious numbers based on a ratio (e.g., 1.25 minor third, 1.333 perfect fourth, 1.618 golden ratio) use
- [Monospace](https://fontfyi.com/glossary/monospace/) — A typeface where every character occupies the same horizontal width. Essential for code editors and tabular data.
- [Neo-grotesque](https://fontfyi.com/glossary/neo-grotesque-class/) — Refined sans-serif style from the 1950s with uniform strokes and neutral appearance. The dominant style in modern UI des
- [OFL (SIL Open Font License)](https://fontfyi.com/glossary/ofl/) — The most common open-source font license. Allows free use, modification, and redistribution. All Google Fonts use OFL or
- [OpenType](https://fontfyi.com/glossary/opentype/) — A font format developed by Microsoft and Adobe supporting advanced typographic features like ligatures, alternates, and 
- [Optical Size](https://fontfyi.com/glossary/optical-size/) — Adjusting letterform details based on the intended display size. Small text needs more spacing and heavier strokes; larg
- [Proportional](https://fontfyi.com/glossary/proportional/) — A typeface where each character has a different width based on its shape — 'w' is wider than 'i'. The default for most f
- [Readability](https://fontfyi.com/glossary/readability/) — How comfortably extended text can be read in longer passages — affected by font choice, size, line-height, measure, and 
- [Rem](https://fontfyi.com/glossary/rem/) — Root em — a CSS unit relative to the root element's font size (usually 16px). More predictable than em for consistent si
- [Responsive Typography](https://fontfyi.com/glossary/responsive-typography/) — Typography that adapts to different screen sizes — using media queries, viewport units, or CSS clamp() for fluid scaling
- [Sans Serif](https://fontfyi.com/glossary/sans-serif/) — A typeface without serifs — 'sans' means 'without' in French. Clean, modern appearance popular in digital design.
- [Script Typeface](https://fontfyi.com/glossary/script-typeface/) — Typefaces based on connected, flowing handwriting. Range from formal calligraphic styles to casual brush scripts.
- [Serif](https://fontfyi.com/glossary/serif/) — A small decorative stroke added to the end of a letter's main strokes. Serif fonts (like Times New Roman) have these; sa
- [Slab Serif](https://fontfyi.com/glossary/slab-serif-class/) — Serif typefaces with thick, block-like rectangular serifs. Strong visual presence for headlines, UI elements, and brandi
- [Stem](https://fontfyi.com/glossary/stem/) — The main vertical stroke of a letter, such as the upright in 'l', 'b', 'd'. The heaviest stroke in most typeface designs
- [Stroke](https://fontfyi.com/glossary/stroke/) — Any line that forms part of a letter — vertical, horizontal, diagonal, or curved. Stroke contrast defines much of a type
- [Subsetting](https://fontfyi.com/glossary/subsetting/) — Removing unused characters from a font file to reduce download size. For example, loading only Latin characters instead 
- [Swash](https://fontfyi.com/glossary/swash/) — An extended, decorative stroke on a letter, common in italic and display fonts. Adds elegance and flair to headings.
- [Swiss Style](https://fontfyi.com/glossary/swiss-style/) — The International Typographic Style (1950s–) emphasized grids, asymmetric layouts, and sans-serif typefaces. Helvetica w
- [System Font](https://fontfyi.com/glossary/system-font/) — A font pre-installed on the operating system. Using system fonts (system-ui stack) eliminates download time but sacrific
- [Terminal](https://fontfyi.com/glossary/terminal/) — The end of a stroke that doesn't have a serif — can be ball, beak, teardrop, or flat shaped. Terminal style is a key ide
- [Tracking](https://fontfyi.com/glossary/tracking/) — The uniform adjustment of spacing across an entire range of characters, unlike kerning which targets specific pairs.
- [Type Scale](https://fontfyi.com/glossary/type-scale/) — A harmonious progression of font sizes based on a ratio (e.g., 1.25, 1.333, 1.5). Creates visual hierarchy and consisten
- [Typeface](https://fontfyi.com/glossary/typeface/) — The overall design of a set of characters — the artistic creation. Often confused with 'font', which is a specific size/
- [Typographic Color](https://fontfyi.com/glossary/typographic-color/) — The overall visual density or texture of a block of text on a page — affected by font weight, size, line-height, and let
- [Typographic Hierarchy](https://fontfyi.com/glossary/typographic-hierarchy/) — The visual organization of text using size, weight, color, and spacing to guide readers through content in order of impo
- [Variable Font](https://fontfyi.com/glossary/variable-font/) — A single font file containing an entire range of weights, widths, or other variations. Reduces HTTP requests and file si
- [Vertical Rhythm](https://fontfyi.com/glossary/vertical-rhythm/) — Consistent spacing pattern that aligns text baselines and element spacing to a baseline grid. Creates visual harmony on 
- [WCAG Typography](https://fontfyi.com/glossary/wcag-typography/) — Web Content Accessibility Guidelines as applied to text — minimum contrast ratios (4.5:1 AA, 7:1 AAA), resizable text, a
- [WOFF2](https://fontfyi.com/glossary/woff2/) — Web Open Font Format 2.0 — Brotli-compressed, the most efficient font format for the web. ~30% smaller than WOFF, suppor
- [Web Font](https://fontfyi.com/glossary/web-font/) — A font specifically designed or licensed for use on websites, loaded via CSS @font-face or services like Google Fonts.
- [Whitespace](https://fontfyi.com/glossary/whitespace/) — The intentional empty space in a design that gives text and elements room to breathe. Critical for readability and visua
- [Word Spacing](https://fontfyi.com/glossary/word-spacing/) — The CSS property controlling the distance between words — default is defined by the font's space character width.
- [font-display](https://fontfyi.com/glossary/font-display/) — A CSS descriptor that controls how a web font is displayed during loading. Values: auto, block, swap, fallback, optional
- [font-feature-settings](https://fontfyi.com/glossary/font-feature-settings/) — CSS property to control OpenType features — ligatures, small caps, tabular numbers, stylistic alternates. Use font-varia
- [font-variation-settings](https://fontfyi.com/glossary/font-variation-settings/) — CSS property to control variable font axes directly — weight, width, slant, and custom axes. Lower-level than font-weigh
- [text-rendering](https://fontfyi.com/glossary/text-rendering/) — CSS property controlling text rendering quality: auto, optimizeSpeed, optimizeLegibility, geometricPrecision. Affects ke
- [unicode-range](https://fontfyi.com/glossary/unicode-range/) — CSS descriptor in @font-face that specifies which Unicode characters to download from a font file, enabling automatic su
- [x-height](https://fontfyi.com/glossary/x-height/) — The height of lowercase letters (like 'x') measured from the baseline. A key factor in perceived font size and readabili