Typography Tools
Typography decides how text feels before anyone reads a word of it, and these two tools cover the practical end of that: choosing a typeface, and building letterforms out of plain characters. The Font Preview Tool shows your own text set in different typefaces rather than the usual sample sentence, which is the only reliable way to judge a font. A headline made of your actual product name, a paragraph of your actual copy and the numerals you will really use reveal problems that a stock phrase hides, such as awkward letter pairs, weak digits or a lowercase that falls apart at small sizes. Compare candidates at the size and weight you intend to publish at, not at the default. The ASCII Art Generator converts words into large letters drawn from ordinary text characters, producing banners that survive anywhere only plain text is allowed. That makes it useful for terminal output, README headings, code comments, commit banners and message boards where images are stripped out. Different character styles change the weight and readability, so try a few and check the result in a monospaced context before using it. Use the preview tool when the medium renders fonts, and the ASCII generator when it does not. Both run in the browser with no sign-up.
2 tools available
Showing 1–2 of 2
ASCII Art Generator
Convert any text into ASCII banner art using 24 figlet fonts, with width, alignment and fill character controls.
Font Preview Tool
Preview any font with your own text and copy the matching CSS for size, weight, spacing and colour.
What each control changes in the rendered text
Font size is set in pixels and can be dragged from 8 to 120, or typed directly. Weight sets font-weight numerically, from light through regular at 400 to bold and beyond, and the available weights depend on what the family actually ships.
Line height is unitless and ranges from 0.8 to 3. Because it is a multiplier, the rendered line box equals the font size multiplied by that number, and it scales automatically if you change size later. Letter spacing is in pixels, from minus 5 for tightening large headings to 20 for widely tracked labels, and it is added after every character.
The remaining controls map to text-align, text-transform, text-decoration, font-style, color and background-color.
Setting up body text and a heading
Now build a heading in the same family. Raise the size to 48 pixels and the weight to 700, and drop the line height to 1.1, which gives a line box of 48 multiplied by 1.1, or 52.8 pixels. Large type looks loose at the spacing that suits body text, so set letter spacing to minus 1 pixel to tighten it.
The effect of that tightening is easy to underestimate. Across a 30-character headline, minus 1 pixel per character removes roughly 30 pixels of width, enough to pull a headline back onto two lines instead of three. Apply the same figure to 12 pixel caption text and it would be far too tight, which is why letter spacing usually needs to be set per size rather than globally.
From preview to a typeface you can live with
Remember the preview shows one browser on one device. Rendering differs between operating systems, and a weight that looks crisp on a high-density display can appear thin on an older monitor, so avoid weights below 400 for body text.
Web performance deserves a thought before you finalise. Each family and each weight you use is a separate download, so a page using four weights of two families is loading eight font files. Two weights of one family covers most designs.
Finally, the copied CSS names the family but does not include the link or import that loads a Google Font. Add that to your page separately, or the browser will silently fall back to a default face.