Can I ship the exported CSS as final lettering?

For a decorative heading, often yes, and it will look like a typeface rather than like lettering. What it will not have is per-letter bounce, stroke modulation or irregular spacing, which is exactly the difference the table on the page lists. If the piece is meant to read as hand-lettered, the preset is the reference for a real drawing rather than the finished article.

Why does the rotation tilt the whole word?

Because a transform applies to the element rather than to each glyph. Bounce in hand lettering puts every letter at a slightly different angle and height on the baseline, which needs one element per letter and a rotation per letter. A single transform on the word is a rough stand-in for a slanted baseline.

How is the marker bleed faked?

With a half-pixel text shadow in the text colour, which thickens one edge of each glyph and reads as the edge of an ink mark. It is not a bleed: real ink spreads in every direction and varies with pressure and paper, while a shadow offset is uniform and hard-edged.

Which preset suits a short display line?

Condensed display and slab poster both work at a word or two, since their narrow or heavy forms hold up without much surrounding text. Brush script and ink pen need more words to show their rhythm and tend to look lost on a single short line. Geometric monoline sits between the two and suits a mid-length line.

Do the presets change the typeface?

They each name one catalogue face, so switching preset switches the font family as well as the CSS declarations. That means two presets are not comparable as pure effects: the comparison is between a face and a treatment together, which is how lettering is chosen in practice anyway.

Lettering Style Previewer

Style

Lettering traditionText

Sizepx

Trackingem

Baseline slantdeg

Preview

Hand lettered

Continuous thick–thin stroke with a slight bounce; approximated with an italic serif plus a hair of rotation.

What a font cannot fake

Lettering property	Why CSS approximations fall short
Stroke modulation	A real nib widens and narrows along the stroke; a font keeps one outline per glyph.
Bounce	Hand lettering puts each letter on its own baseline; rotation on the whole word only tilts it.
Irregular spacing	Manual lettering tightens and loosens per pair, which is the source of the hand-made feel.
Ink texture	Bleed, dry brush and paper grain are raster effects, not outlines.
Ligature drawing	Hand letterers design a connection per letter pair rather than reusing one glyph.

css output

.lettering {
  font-family: 'Fraunces', serif;
  font-size: 4.0000rem;
  letter-spacing: 0.0000em;
  transform: rotate(-1.50deg);
  font-style: italic; font-weight: 600; letter-spacing: 0.01em; transform: rotate(-1.5deg);
}

You Might Also Need

Monogram Letter Designer

Design monograms

Logo Type Tester

Test type as a logo

Retro Type Style Maker

Make retro type styles

Hand-Lettering Guide Sheet

Print hand-lettering guides

The lettering style previewer shows the common hand lettering traditions as close CSS approximations, with the caveat stated on the page: real lettering has stroke modulation, bounce and irregular spacing that no font reproduces. Use the presets to pick a direction, then letter it properly.

What is Lettering Style Previewer?

The lettering style previewer renders your text in one of six lettering traditions, each built from a real catalogue face plus a handful of CSS declarations, and it also lists what the approximation cannot do.

The six lettering preset options are brush script, sans marker, slab poster, condensed display, geometric monoline and ink pen, each naming the face it borrows and the effect it fakes.
Brush script uses an italic serif at weight 600 with a hair of rotation, standing in for a continuous thick-and-thin stroke.
Sans marker uses a grotesque at weight 700 with a hard half-pixel text shadow, which fakes the bleed of an ink edge.
Slab poster and condensed display are both uppercase settings, one heavy with a little tracking and one narrow with uniform stroke, which is the wood type and the packaging tradition respectively.
Geometric monoline uses a circular sans at weight 500 with wide tracking, and ink pen uses a true italic serif, which carries the calligraphic entry and exit strokes of a pen.
Size runs from 18px to 160px, tracking from minus 0.05em to 0.3em, and the baseline slant from six degrees one way to six the other.

The honest part of the tool is the table of what a font cannot fake. Stroke modulation is the first entry, because a real nib widens and narrows along the stroke while a font keeps one outline per glyph. Bounce is second: hand lettering puts each letter on its own baseline, and rotating the whole word only tilts the row. Irregular spacing is third, and it is the actual source of the hand-made feel, since a letterer tightens and loosens each pair by eye. Ink texture and per-pair ligature drawing complete the list, both being raster or drawn effects rather than anything an outline can carry. The exported CSS composes the stack, the size in rem to four decimals, the tracking, the rotation and the preset's own declarations into one class that can be dropped onto a heading.

The presets are approximations, and the panel says so rather than presenting them as lettering faces.
Rotation is applied to the whole word, so it tilts rather than bounces; a per-letter baseline would need one element per glyph.
The ink bleed in the marker preset is a half-pixel hard shadow, which reads as an offset edge rather than a bleed.
Faces are drawn from the catalogue, so a project with its own script face cannot be previewed here.
The exported transform creates a containing block and can affect neighbouring layout, which is worth knowing before it is applied to a hero heading.

Use it at the start of a lettering job, when the question is which tradition suits the words rather than how the strokes are drawn. Picking the preset is the cheap part; the finished lettering then happens in a drawing tool or by hand. Where the outcome is a monogram rather than a running word, the monogram letter designer works on the single letter, the logo type tester checks it at the sizes a logo actually appears, and the retro type style maker covers the period-flavoured variants of the same traditions.

How to use Lettering Style Previewer

Pick the tradition from the preset list, reading the note under the preview since each one states what it is faking and how.
Type the real words rather than a placeholder, because lettering traditions read differently at different lengths and letter combinations.
Set the size, then use tracking and baseline slant to find the feel: the alternatives to a custom drawing are a little tracking out and a little upward slant.
Read the table of what a font cannot fake before copying the CSS, so the approximation is used as a reference rather than shipped as finished lettering.

When to use Lettering Style Previewer vs related tools

Reach for it when a lettering direction has to be chosen quickly, when a client needs to see three traditions side by side before committing to a commission, or when a heading wants the flavour of a lettering style without a full drawing job. The caveat table is the other reason to open it: it is the argument for commissioning real lettering when the difference matters. For a single letter, the monogram letter designer is the closer tool, the logo type tester checks how the result holds up at the sizes a mark is used, and the retro type style maker covers the period variants of the same look.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.