Typography & Font Tools

Font Mood Matcher – Find Fonts by Emotion & Style

Choose a mood (elegant, playful, modern, classic) and see a curated list of free Google Fonts that match. Copy the @import code for immediate use.

Design design font mood style tool

CSS tab‑size Property Demo - Online Control Indentation

Set tab‑size to any number and see how tabs are displayed in a pre element. Essential for code snippets.

Developer Tools CSS demo indentation tab‑size

Font Loading Strategy Tester - Online FOIT vs FOUT

Compare font‑display values (block, swap, fallback, optional) on the fly. See how text renders during web font load. Choose the right strategy.

Developer Tools FOIT font‑display font loading FOUT

hyphens CSS Tester - Online Auto, Manual, None

Set hyphens: auto with lang attribute and see automatic hyphenation. Perfect for justified text. Browser built‑in.

Developer Tools auto CSS hyphens justify

Font Loading API Demo - Online Wait for Fonts Ready

Use the document.fonts API to check if a font is loaded. Watch the ready promise. Avoid FOUT. JavaScript demo.

Developer Tools API demo document.fonts Font Loading

text‑spacing CSS Demo - Online trim‑start & space‑first

New CSS text‑spacing property for fine control over punctuation spacing. See the effect live. For advanced typography.

Developer Tools CSS Japanese text‑spacing typography

text‑wrap: balance Playground - Online Beautiful Typography

Apply text‑wrap: balance to headings and paragraphs. See the visual difference and copy the CSS. Avoid orphans.

Developer Tools balance CSS text‑wrap typography

font-synthesis Demo - Online Control Browser Bold/Italic Generation

Toggle browser‑generated bold and italic when a real italic is missing. Understand and control font fallback rendering.

Developer Tools bold CSS font-synthesis italic

text‑orientation Tester - Online Upright & Sideways Glyphs

Change text orientation within vertical writing mode. See mixed, upright, sideways. Useful for CJK layout.

Developer Tools CSS text‑orientation upright vertical

initial‑letter CSS Playground - Online Drop Caps

Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.

Developer Tools CSS drop cap initial‑letter typography

Responsive Text Size Calculator - Online clamp() Helper

Enter min and max font sizes and viewport widths to generate a perfect CSS clamp() expression. Fluid typography without media queries.

Developer Tools clamp CSS responsive typography

Color Readability Tester - Online Visual Contrast Meter

Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.

Color Tool color contrast readability text

CSS Baseline Grid Overlay - Online Typography Rhythm

Generate a CSS background that shows a baseline grid. Adjust line‑height and offset. Perfect for aligning text.

Developer Tools baseline grid CSS rhythm typography

Variable Font Axis Slider - Online Weight, Width & More

Load a variable font (default or custom) and play with weight, width, slant, and custom axes. Download the CSS.

Developer Tools axis CSS typography variable fonts

font‑feature‑settings Playground - Online OpenType Features

Toggle OpenType features like liga, smcp, tnum, and see the text update. Support for variable fonts. Typography nerds.

Developer Tools CSS font‑feature‑settings ligatures OpenType

Vertical Text Layout Generator - Online writing‑mode CSS

Create vertically oriented text layouts with `writing‑mode`. See the effect and copy the complete CSS. For vertical languages.

Developer Tools CSS generator vertical writing‑mode

font‑variant‑numeric Demo - Online Table Figures & Fractions

Choose tabular‑nums, diagonal‑fractions, ordinal and see the effect on a numeric list. Elegant data presentation.

Developer Tools CSS font‑variant‑numeric numbers table

Font Kerning Pair Explorer - Online See Glyph Spacing

Type two letters and see if your chosen font has a kerning pair for them. Adjust tracking and see live spacing.

Developer Tools explorer font kerning pair

text‑indent & hanging‑punctuation Demo - Online

Set up first‑line indentation and hanging punctuation. See how they affect reading flow. Copy the CSS.

Developer Tools CSS hanging‑punctuation paragraph text‑indent

initial‑letter CSS Playground - Online Drop Caps

Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.

Developer Tools CSS drop cap initial‑letter typography

text‑rendering Tester - Online Optimize Legibility

Compare text‑rendering: auto, optimizeSpeed, optimizeLegibility, geometricPrecision. See kerning and ligature changes live.

Developer Tools CSS legibility optimize text‑rendering

font-variant-east-asian Demo - Online JIS & Proportional

Apply East Asian glyph variants like jis78, proportional-width, ruby. See the difference instantly. For CJK typography.

Developer Tools CJK CSS font-variant-east-asian Japanese

text‑emphasis CSS Playground - Online Decorative Marks

Apply text‑emphasis marks (filled dot, open circle, etc.) with color. Ideal for East Asian typography. Copy the style.

Developer Tools CSS decoration Japanese text‑emphasis

Fluid Typography Scale Calculator - Online clamp() Generator

Define min and max font sizes and viewport widths. Generate a complete fluid type scale using CSS clamp() for all headings.

Developer Tools clamp CSS fluid typography generator

Local Font Inspector - Online See All Font Metrics

Select a local font and see all its metrics: ascent, descent, x‑height, and supported features. Typography deep dive.

Developer Tools font inspector metrics typography

Letter & Word Spacing Demo - Online Typography Control

Adjust letter‑spacing and word‑spacing with a slider and see the effect on a sample paragraph. Copy the CSS.

Developer Tools CSS letter‑spacing typography word‑spacing

Variable Font Explorer - Online Load & Manipulate Axes

Load any variable font from Google Fonts or local file and play with weight, width, slant, and custom axes. Download CSS.

Developer Tools axes CSS Google Fonts variable fonts