All Typography Tools

Inter

sans-serif font · inter · open-source · Google Fonts

fonts/inter

Roboto

sans-serif font · roboto · open-source · Google Fonts

fonts/roboto

Open Sans

sans-serif font · open sans · open-source · Google Fonts

fonts/open-sans

Lato

sans-serif font · lato · open-source · Google Fonts

fonts/lato

Montserrat

sans-serif font · montserrat · open-source · Google Fonts

fonts/montserrat

Poppins

sans-serif font · poppins · open-source · Google Fonts

fonts/poppins

Oswald

sans-serif font · oswald · open-source · Google Fonts

fonts/oswald

Merriweather

serif font · merriweather · open-source · Google Fonts

fonts/merriweather

Playfair Display

serif font · playfair display · open-source · Google Fonts

fonts/playfair-display

Libre Baskerville

serif font · libre baskerville · open-source · Google Fonts

fonts/libre-baskerville

DM Sans

sans-serif font · dm sans · open-source · Google Fonts

fonts/dm-sans

Nunito

sans-serif font · nunito · open-source · Google Fonts

fonts/nunito

Raleway

sans-serif font · raleway · open-source · Google Fonts

fonts/raleway

Source Sans 3

sans-serif font · source sans 3 · open-source · Google Fonts

fonts/source-sans-3

Source Serif 4

serif font · source serif 4 · open-source · Google Fonts

fonts/source-serif-4

Manrope

sans-serif font · manrope · open-source · Google Fonts

fonts/manrope

Work Sans

sans-serif font · work sans · open-source · Google Fonts

fonts/work-sans

Rubik

sans-serif font · rubik · open-source · Google Fonts

fonts/rubik

Ubuntu

sans-serif font · ubuntu · open-source · Google Fonts

fonts/ubuntu

Archivo

sans-serif font · archivo · open-source · Google Fonts

fonts/archivo

Space Grotesk

sans-serif font · space grotesk · open-source · Google Fonts

fonts/space-grotesk

Cormorant Garamond

serif font · cormorant garamond · open-source · Google Fonts

fonts/cormorant-garamond

Bebas Neue

display font · bebas neue · open-source · Google Fonts

fonts/bebas-neue

Barlow

sans-serif font · barlow · open-source · Google Fonts

fonts/barlow

Quicksand

sans-serif font · quicksand · open-source · Google Fonts

fonts/quicksand

JetBrains Mono

monospace font · jetbrains mono · open-source · Google Fonts

fonts/jetbrains-mono

Fira Code

monospace font · fira code · open-source · Google Fonts

fonts/fira-code

Caveat

handwriting font · caveat · open-source · Google Fonts

fonts/caveat

Satisfy

handwriting font · satisfy · open-source · Google Fonts

fonts/satisfy

Fraunces

serif font · fraunces · open-source · Google Fonts

fonts/fraunces

Lora

serif font · lora · open-source · Google Fonts

fonts/lora

IBM Plex Sans

sans-serif font · ibm plex sans · open-source · Google Fonts

fonts/ibm-plex-sans

IBM Plex Serif

serif font · ibm plex serif · open-source · Google Fonts

fonts/ibm-plex-serif

IBM Plex Mono

monospace font · ibm plex mono · open-source · Google Fonts

fonts/ibm-plex-mono

Plus Jakarta Sans

sans-serif font · plus jakarta sans · open-source · Google Fonts

fonts/plus-jakarta-sans

Spectral

serif font · spectral · open-source · Google Fonts

fonts/spectral

Bitter

slab font · bitter · open-source · Google Fonts

fonts/bitter

Space Mono

monospace font · space mono · open-source · Google Fonts

fonts/space-mono

Playfair Display Inter

A classic editorial pairing: high-contrast Playfair Display headings over a neutral Inter body. The contrast between the ornate serif and the technical sans establishes clear hierarchy while remaining highly readable.

font-pairings/playfair-display-inter

Montserrat Merriweather

Geometric Montserrat headlines paired with Merriweather body text, a confident modern editorial combination. The geometric sans brings energy to titles; the slab-serif body sustains long-form reading.

font-pairings/montserrat-merriweather

Inter Source Serif 4

Source Serif 4 headings over Inter body, a quiet, professional pairing that scales from documentation to long-form articles. Both fonts have optical-size axes, so headings retain their crispness at any scale.

font-pairings/inter-source-serif-4

Space Grotesk Inter

Space Grotesk headlines over Inter body, a contemporary tech-forward pairing. Space Grotesk's quirky a and g give the brand personality, while Inter keeps the body neutral and legible.

font-pairings/space-grotesk-inter

Fraunces Inter

Fraunces headlines over Inter body, a contemporary luxury editorial pairing. Fraunces' variable optical sizing and soft axis let headings move from text to display while staying coherent.

font-pairings/fraunces-inter

Bebas Neue Open Sans

Bebas Neue headlines over Open Sans body, a high-impact pairing for posters and landing pages. The condensed uppercase display demands attention; the humanist sans delivers legible body.

font-pairings/bebas-neue-open-sans

Archivo Source Serif 4

Archivo headlines over Source Serif 4 body, a contemporary news-media pairing. Archivo's grotesque headlines carry weight; Source Serif 4 sustains long-form reading.

font-pairings/archivo-source-serif-4

Raleway Lato

Raleway headlines over Lato body, a refined, minimal pairing for portfolios and fashion. Raleway's thin elegance pairs with Lato's warm humanism.

font-pairings/raleway-lato

Poppins Open Sans

Poppins headlines over Open Sans body, a friendly, approachable pairing. Poppins' geometric round forms pair with Open Sans's humanist warmth.

font-pairings/poppins-open-sans

Cormorant Garamond Lato

Cormorant Garamond headlines over Lato body, a delicate, luxurious pairing for fashion and weddings. The high-contrast Garalde serif meets a clean humanist sans.

font-pairings/cormorant-garamond-lato

Dm Sans Comfort

DM Sans in two weights, a single-family system for product UI. Clean, calm, and consistent across headings and body.

font-pairings/dm-sans-comfort

Manrope Inter

Manrope headlines over Inter body, a refined SaaS pairing. Both are modern geometric sans-serifs with subtly different personalities.

font-pairings/manrope-inter

Oswald Roboto

Oswald headlines over Roboto body, a high-impact news-media pairing. Oswald's condensed uppercase delivers authority; Roboto's mechanical skeleton keeps body text grounded.

font-pairings/oswald-roboto

Playfair Display Source Serif 4

Playfair Display headlines over Source Serif 4 body, a refined all-serif editorial pairing. Display-grade contrast up top, reading-grade stability below.

font-pairings/playfair-display-source-serif-4

Jetbrains Mono Inter

JetBrains Mono headlines over Inter body, a developer-focused pairing that signals technical credibility. Monospace headings read as 'code-aware'; Inter keeps prose legible.

font-pairings/jetbrains-mono-inter

Caveat Open Sans

Caveat headlines over Open Sans body, a casual, approachable pairing. Handwriting headings add personality; the humanist sans keeps body copy readable.

font-pairings/caveat-open-sans

Nunito Source Sans 3

Nunito headlines over Source Sans 3 body, a friendly, balanced pairing. Nunito's rounded forms warm up headings; Source Sans 3 keeps body neutral.

font-pairings/nunito-source-sans-3

Quicksand Roboto

Quicksand headlines over Roboto body, a playful, kid-friendly pairing. Quicksand's rounded geometry brings joy; Roboto's mechanical forms keep body text legible.

font-pairings/quicksand-roboto

Barlow Barlow

Barlow in two weights, a versatile single-family system. A grotesque with subtle rounded geometry that scales from headlines to fine print.

font-pairings/barlow-barlow

Archivo Source Sans 3

Archivo headlines over Source Sans 3 body, a confident news-and-brand pairing. Archivo's grotesque headlines have presence; Source Sans 3 keeps body copy neutral.

font-pairings/archivo-source-sans-3

Ubuntu Ubuntu

Ubuntu in two weights, a single-family system with technical character. Designed for clarity on screens, with subtle warmth.

font-pairings/ubuntu-ubuntu

Rubik Work Sans

Rubik headlines over Work Sans body, a friendly modern pairing with excellent screen legibility. Rubik's geometric forms warm up headings; Work Sans's grotesque body sustains reading.

font-pairings/rubik-work-sans

Fraunces Source Serif 4

Fraunces headlines over Source Serif 4 body, an all-serif editorial pairing with personality. Fraunces' expressive optical sizing up top; Source Serif 4's stability below.

font-pairings/fraunces-source-serif-4

Satisfy Open Sans

Satisfy headlines over Open Sans body, a flowing signature-style pairing. Satisfy's brush script brings elegance; Open Sans's humanist forms keep body readable.

font-pairings/satisfy-open-sans

Inter Merriweather

Inter headlines over Merriweather body, an inverse editorial pairing. Sans-serif headings bring modern clarity; slab-serif body sustains long-form reading.

font-pairings/inter-merriweather

Playfair Display Merriweather

Playfair Display headlines over Merriweather body, a classic editorial all-serif pairing. High-contrast display serif up top; slab-serif body for reading.

font-pairings/playfair-display-merriweather

Space Grotesk Jetbrains Mono

Space Grotesk headlines over JetBrains Mono body, a developer-forward pairing. Both have technical character; the sans-mono contrast signals 'for developers.'

font-pairings/space-grotesk-jetbrains-mono

Montserrat Open Sans

Montserrat headlines over Open Sans body, a popular marketing pairing. Montserrat's geometric forms bring energy to titles; Open Sans's humanist warmth keeps body approachable.

font-pairings/montserrat-open-sans

Dm Sans Source Serif 4

DM Sans headlines over Source Serif 4 body, a clean, modern editorial pairing. Calm geometric sans up top; stable serif below.

font-pairings/dm-sans-source-serif-4

Lora Ibm Plex Sans

Lora headings over IBM Plex Sans body. A warm calligraphic serif meets a neutral technical sans, so titles carry character while body copy stays legible.

font-pairings/lora-ibm-plex-sans

Ibm Plex Sans Ibm Plex Serif

IBM Plex Sans headings over IBM Plex Serif body. A unified corporate family where sans and serif were drawn to sit on the same grid.

font-pairings/ibm-plex-sans-ibm-plex-serif

Ibm Plex Mono Ibm Plex Sans

IBM Plex Mono headings over IBM Plex Sans body. A common pattern in developer docs where section titles are set in monospace and prose in a humanist sans.

font-pairings/ibm-plex-mono-ibm-plex-sans

Plus Jakarta Sans Inter

Plus Jakarta Sans headings over Inter body. A geometric sans for warm, rounded titles paired with a neutral UI sans for high-density body.

font-pairings/plus-jakarta-sans-inter

Spectral Plus Jakarta Sans

Spectral headings over Plus Jakarta Sans body. A variable serif built for screens sits on top of a rounded geometric sans built for brands.

font-pairings/spectral-plus-jakarta-sans

Bitter Inter

Bitter headings over Inter body. A slab serif tuned for screen reading sits on top of the most legible UI sans available.

font-pairings/bitter-inter

Space Mono Inter

Space Mono headings over Inter body. A retro-futuristic monospace for titles and a clean UI sans for prose. Common in developer tools and tech brands.

font-pairings/space-mono-inter

Lora Inter

Lora headings over Inter body. A calligraphic serif gives titles warmth; Inter keeps long body runs crisp and neutral.

font-pairings/lora-inter

Plus Jakarta Sans Spectral

Plus Jakarta Sans headings over Spectral body. A rounded geometric sans for friendly titles and a variable serif tuned for screen reading in body.

font-pairings/plus-jakarta-sans-spectral

Ibm Plex Sans Lora

IBM Plex Sans headings over Lora body. A neutral technical sans for section titles and a calligraphic serif for long-form prose. Used in product docs and editorial corporate sites.

font-pairings/ibm-plex-sans-lora

Lora Source Sans 3

Source Sans 3 headings over Lora body. A humanist sans sets the section titles and a calligraphic serif carries the prose. The direction is reversed from the usual serif-heading layout, which gives pages a writerly feel.

font-pairings/lora-source-sans-3

Playfair Display Source Sans 3

Playfair Display headings over Source Sans 3 body. A high-contrast display serif sits on top of a warm humanist sans. Used for magazines and editorial brands that want grand titles without losing readable body copy.

font-pairings/playfair-display-source-sans-3

Bitter Roboto

Bitter headings over Roboto body. A slab serif tuned for screens handles the titles, and Roboto carries the body with its neutral humanist forms. A solid pairing for long-form blogs and reading-heavy apps.

font-pairings/bitter-roboto

Fira Code Ibm Plex Sans

Fira Code headings over IBM Plex Sans body. A programming monospace with ligatures sets the section titles, and a humanist sans carries the prose. Useful for developer docs and API reference sites.

font-pairings/fira-code-ibm-plex-sans

Montserrat Source Sans 3

Montserrat headings over Source Sans 3 body. A geometric sans with wide forms for titles and a humanist sans for body. A common choice for marketing sites that want bold hero text and readable supporting copy.

font-pairings/montserrat-source-sans-3

Fraunces Lora

Fraunces headings over Lora body. A variable display serif with optical sizing on top of a calligraphic text serif. For long-read publications that want a full serif system without any sans.

font-pairings/fraunces-lora

Space Mono Space Grotesk

Space Mono headings over Space Grotesk body. A retro monospace and a geometric sans from the same designer. A go-to for tech brands and product sites that want a coherent technical system.

font-pairings/space-mono-space-grotesk

Cormorant Garamond Raleway

Cormorant Garamond headings over Raleway body. A high-contrast Renaissance serif for titles and a thin geometric sans for body. Used by fashion, beauty, and luxury brands that want elegant display type.

font-pairings/cormorant-garamond-raleway

Archivo Bitter

Archivo headings over Bitter body. A grotesque sans with tight spacing for headlines and a slab serif tuned for screens for body. A practical pairing for news and editorial sites with high text density.

font-pairings/archivo-bitter

Manrope Lora

Manrope headings over Lora body. A modern geometric sans for titles and a calligraphic serif for prose. A common pick for editorial brands that want a contemporary heading voice and a literary body.

font-pairings/manrope-lora

Spectral Inter

Spectral headings over Inter body. A variable serif built for screens on top of a neutral UI sans. A practical pairing for editorial SaaS sites and documentation hubs that want serif titles without losing readable UI body.

font-pairings/spectral-inter

Editorial Cream

A warm editorial palette inspired by print magazines: cream paper, ink-black text, a brick-red primary, and a muted gold secondary.

colors/editorial-cream

Midnight Brand

A deep midnight palette for premium SaaS: a near-black canvas, soft periwinkle primary, and amber accent for high-contrast CTAs.

colors/midnight-brand

Sage Studio

A calm organic palette: sage greens over warm off-white, with a terracotta accent for warmth. Ideal for wellness and lifestyle brands.

colors/sage-studio

Mono Ink

A pure monochrome palette with a single blue accent. Editorial minimalism at its purest, type and whitespace do all the work.

colors/mono-ink

Terminal Green

A terminal-inspired dark palette: deep black-green canvas, phosphor-green primary, amber accent for warnings. Built for developer tools.

colors/terminal-green

Rose Quartz

A soft rose palette: blush background, deep rose primary, lavender accent. For lifestyle, beauty, and personal-brand sites.

colors/rose-quartz

Ocean Deep

A deep ocean palette: midnight-navy canvas, sky-blue primary, amber accent. For premium tech and finance brands.

colors/ocean-deep

Warm Sand

A warm neutral palette: sand background, brown primary, forest-green accent. For artisanal and craft brands.

colors/warm-sand

Cyber Violet

A vivid cyber palette: deep violet canvas, electric purple primary, cyan accent. For bold creative and Web3 brands.

colors/cyber-violet

Paper & Ink

A pure paper-and-ink palette: warm off-white paper, ink-black text, single red accent. Built for editorial brands that want typography to lead.

colors/paper-ink

Forest Ink

A dark forest palette: deep green canvas, cream text, amber accent for highlights. For nature, sustainability, and outdoor editorial brands.

colors/forest-ink

Linen Press

A warm linen palette: undyed fabric background, ink text, muted teal primary, terracotta accent. For book publishers, journals, and craft editorial.

colors/linen-press

Grapefruit

A soft pink palette: grapefruit background, burgundy text, coral accent. For food, lifestyle, and personal-brand sites that want warmth without sweetness.

colors/grapefruit

Steel Blue

A cool steel-blue palette: gray-blue canvas, dark navy text, electric blue primary, cyan accent. For SaaS dashboards, fintech, and enterprise tools.

colors/steel-blue

Aurora Borealis

A deep aurora gradient from midnight to teal.

gradients/aurora-borealis

Mediterranean Sunset

A warm coral-to-gold sunset gradient.

gradients/sunset-mediterranean

Mint Fog

A pale mint gradient for soft surfaces.

gradients/mint-fog

Plasma Violet

A vivid plasma gradient from violet to amber.

gradients/plasma-violet

Ink Bloom

A radial ink bloom from indigo to black.

gradients/ink-bloom

Citrine Glow

A warm citrine glow from pale yellow to amber.

gradients/citrine-glow

Pacific Depth

A deep ocean gradient from sky blue to navy.

gradients/pacific-depth

Terracotta Dusk

A warm terracotta dusk gradient.

gradients/terracotta-dusk

Lime Sherbet

A fresh sherbet gradient from mint to yellow.

gradients/lime-sherbet

Graphite Glow

A subtle graphite gradient for premium dark UI.

gradients/graphite-glow

Prism Conic

A conic prism gradient cycling through primary hues.

gradients/conic-prism

Rose Quartz Bloom

A radial rose bloom from blush to deep rose.

gradients/rose-quartz-bloom

Kerning

Kerning is the adjustment of space between specific pairs of letters to improve visual rhythm. Unlike tracking (which adjusts all letters uniformly), kerning targets individual pairs like 'AV', 'To', or 'We' that would otherwise appear too tight or too loose.

typography/glossary/kerning

Tracking

Tracking (also called letterspacing) is the uniform adjustment of space between all letters in a block of text. Positive tracking loosens text; negative tracking tightens it. Tracking is applied evenly, unlike kerning which targets specific pairs.

typography/glossary/tracking

Leading

Leading (pronounced 'ledding') is the vertical space between baselines of text, named after the strips of lead once used in metal type. In CSS it is expressed as line-height. Optimal leading for body text is typically 1.4-1.6 times the font size.

typography/glossary/leading

x-height

The x-height is the height of lowercase letters (specifically 'x') in a typeface, excluding ascenders and descenders. A larger x-height generally improves readability at small sizes, which is why many screen-optimized fonts have tall x-heights.

typography/glossary/x-height

Cap Height

Cap height is the height of uppercase letters in a typeface, measured from the baseline to the top of flat-topped capitals like 'H' or 'I'. It is typically shorter than the ascender height.

typography/glossary/cap-height

Baseline

The baseline is the invisible line on which most letters in a typeface sit. Descenders (like the tail of 'g' or 'p') extend below the baseline. Most typographic measurements reference the baseline.

typography/glossary/baseline

Ascender

An ascender is the part of a lowercase letter that extends above the x-height, as in 'b', 'd', 'f', 'h', 'k', 'l', and 't'. The ascender height is typically equal to or slightly taller than the cap height.

typography/glossary/ascender

Descender

A descender is the part of a lowercase letter that extends below the baseline, as in 'g', 'j', 'p', 'q', and 'y'. The descender depth affects line spacing, fonts with deep descenders need more leading.

typography/glossary/descender

Serif

A serif is the small projecting stroke at the ends of letters in some typefaces. Serif typefaces (like Garamond, Times, or Playfair Display) are traditionally used for long-form reading and editorial contexts. Sans-serif typefaces lack these strokes.

typography/glossary/serif

Sans Serif

Sans-serif typefaces (from French 'sans' meaning 'without') lack the projecting strokes found in serif typefaces. They tend to read as modern and neutral, and are widely used for UI and digital display.

typography/glossary/sans-serif

Slab Serif

A slab serif is a typeface with thick, block-like serifs at near-perpendicular angles to the letter strokes. Slab serifs read as sturdy and confident, often used in editorial and branding contexts.

typography/glossary/slab

Display Type

Display type refers to typefaces designed for use at large sizes, headlines, posters, signage. They often have higher stroke contrast and more expressive details than text faces, which can make them unsuitable for body copy.

typography/glossary/display-type

Variable Font

A variable font is a single font file that contains a continuous range of variations along one or more axes (weight, width, optical size, slant, custom). This reduces payload compared to shipping many static instances and enables fluid typography.

typography/glossary/variable-font

Optical Size (opsz)

The optical size axis (opsz) in a variable font adjusts letterforms for optimal legibility at different sizes, small text needs more open counters and sturdier serifs; display text can use finer detail and higher contrast.

typography/glossary/opsz

Weight (wght)

The weight axis (wght) in a variable font controls stroke thickness, typically from 100 (Thin) to 900 (Black). Standard named weights are 400 (Regular), 500 (Medium), 600 (Semibold), and 700 (Bold).

typography/glossary/wght

Ligature

A ligature is a single glyph combining two or more adjacent letters, designed to avoid awkward collisions. Common ligatures include 'fi', 'fl', and 'ff'. Programming ligatures (like => and !=) are a modern convention in coding fonts.

typography/glossary/ligature

OpenType

OpenType is the dominant modern font format, supporting advanced typographic features like ligatures, small caps, old-style figures, contextual alternates, and stylistic sets. These features are exposed in CSS via the font-feature-settings property.

typography/glossary/opentype

Font Family

A font family is a collection of related typefaces sharing a design but varying in weight, style, or width. For example, the Inter family includes weights from 100 (Thin) to 900 (Black).

typography/glossary/font-family

Typeface

A typeface is the overall design of a set of letterforms (e.g., Inter, Playfair Display). A font is a specific instance of a typeface at a specific weight, style, and size. The terms are often used interchangeably in modern usage.

typography/glossary/typeface

Font Weight

Font weight is the thickness of strokes in a typeface. CSS uses numeric values from 100 (Thin) to 900 (Black), with named aliases: 400=Regular, 500=Medium, 600=Semibold, 700=Bold.

typography/glossary/font-weight

Contrast (typography)

In typography, contrast refers to the difference in thickness between thin and thick strokes in a letterform. High-contrast typefaces (like Playfair Display) have dramatic variation; low-contrast faces (like Inter) are more uniform. Also used to describe visual difference between type sizes, weights, or styles in a layout.

typography/glossary/contrast

Hierarchy

Typographic hierarchy is the visual organization of content through variations in size, weight, color, or style. Strong hierarchy guides the reader's eye through headings, subheadings, body, and captions in priority order.

typography/glossary/hierarchy

Measure

The measure is the length of a line of text, typically expressed in characters per line or in absolute units. For comfortable reading, body text should measure 45-75 characters per line. Too wide and the eye loses its place; too narrow and rhythm breaks.

typography/glossary/measure

Widows

A widow is a single short line of text (often the last line of a paragraph) that appears at the top of a new column or page. Widows break visual rhythm and are considered a typographic flaw to be corrected through rewording or adjustment.

typography/glossary/widows

Orphans

An orphan is a single short line of text (often the first line of a paragraph) that appears at the bottom of a column or page, separated from the rest of the paragraph. Like widows, orphans are a typographic flaw.

typography/glossary/orphans

Thinking with Type

A critical guide for designers, writers, and editors. Covers typography fundamentals from letter to page to screen with practical examples.

typography-books/thinking-with-type

The Elements of Typographic Style

The canonical reference on typography as craft. Bringhurst combines history, theory, and practical guidance in a single poetic volume.

typography-books/elements-of-typographic-style

Detail in Typography

A concise masterclass in the fine-grained decisions that distinguish good typesetting from great: letterspacing, kerning, line breaks, and more.

typography-books/detail-in-typography

Stop Stealing Sheep & Find Out How Type Works

An approachable, witty introduction to typography for beginners, named after an old typesetter's adage: 'He who would learn to letter-space should first steal sheep.'

typography-books/stop-stealing-sheep

Practical Typography

A free online book on typography for lawyers, writers, and professionals who care about how their words look on the page.

typography-books/practical-typography

Helvetica alternatives

Helvetica is the canonical neo-grotesque sans-serif, used ubiquitously in signage and corporate identity. These open-source alternatives approximate its neutral, structured character with varying fidelity.

font-alternatives/helvetica-alternatives

Avenir alternatives

Avenir is a geometric sans-serif with refined warmth, designed by Adrian Frutiger. These open-source alternatives approximate its geometric clarity.

font-alternatives/avenir-alternatives

Gotham alternatives

Gotham is a geometric sans-serif inspired by New York signage, with sturdy, architectural forms. These open-source alternatives approximate its confident geometry.

font-alternatives/gotham-alternatives

Proxima Nova alternatives

Proxima Nova is a hybrid geometric-humanist sans-serif widely used in marketing. These open-source alternatives balance geometry with readability.

font-alternatives/proxima-nova-alternatives

Futura alternatives

Futura is the seminal geometric sans-serif with strict circular forms. These open-source alternatives approximate its pure geometry.

font-alternatives/futura-alternatives

Garamond alternatives

Garamond refers to a family of old-style serifs originating in 16th-century France. These open-source alternatives preserve the elegance of Garalde proportions.

font-alternatives/garamond-alternatives

Fontjoy

Generate font pairings with a neural-network-based contrast slider. Useful for inspiration, though results should be reviewed by a designer.

typography-tools/font-pairing-tools

Type-Scale.com

A classic modular type scale calculator with live preview across ratios (minor third through double octave).

typography-tools/type-scale-calculator

Fluid Type Scale Calculator

Build fluid type scales with clamp() outputs, with viewport breakpoints and per-step size tuning.

typography-tools/fluid-type-scale

Axis-Praxis

Interactively explore variable font axes from many foundries. Useful for inspecting which axes a font exposes before implementing.

typography-tools/variable-fonts-playground

Wakamai Fondue

Upload a font file and instantly see what it can do, every OpenType feature, axis, and language it supports.

typography-tools/wakamai-fondue

Google Fonts

The largest free font library with webfont delivery, variable fonts, and an interactive catalog.

typography-tools/google-fonts

Fontshare

A free font service from Indian Type Foundry with curated quality fonts, many of which are not on Google Fonts.

typography-tools/fontshare

Adobe Fonts (Typekit)

Adobe's subscription font library with thousands of families, including commercial typefaces.

typography-tools/adobe-fonts

WhatTheFont

Upload an image of text and MyFonts will identify the typeface. Useful for matching existing brand typography.

typography-tools/font-identification-whatfontis