MakerFlowTools
Free client-side suite
Back to MakerFlow

Text Editor

Typography & Text

A typography preview, not a notepad — see your text across web-safe fonts, sizes, weights and line-heights before you commit to one.

Runs in your browser•Zero cloud uploads / Files stay on device•No account required
Sample text
Font

Every option is a font already on most devices (or a CSS generic keyword), each with a real fallback stack — nothing here is downloaded, so the preview matches what a visitor without that font installed would actually see.

A system font usually only truly has a regular and a bold cut — the browser synthesises (or silently substitutes the nearest real weight for) anything in between, so treat intermediate values as an approximation rather than a distinct typeface weight.

Line height
What kind of text

From the same calculator behind the Line Height Calculator and the Typography Calculator — currently suggesting 1.35 for 24px heading.

Preview

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

CSS

font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.35;

Compare every font at 24px / weight 400

  • System UI
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Arial
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Verdana
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Trebuchet MS
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Georgia
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Times New Roman
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Palatino
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Garamond
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Courier New
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Monospace (system)
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Impact
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Comic Sans MS
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Generic: serif
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Generic: sans-serif
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
  • Generic: monospace
    The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Optimized For Platforms
blogdocuments

How it works

1Type or paste the line you actually plan to use — a title reads differently from a pangram.
2Pick a font, a size, a weight and a letter-spacing.
3Leave line-height on Suggested to use the same calculator behind the Line Height Calculator, or set one by hand.
4Scroll down to compare every web-safe font at once, then copy the CSS for whichever one wins.

Related tools in Typography & Text

View all Typography & Text tools →