Script fonts: when handwriting faces work and when they don't

Script fonts imitate handwriting, from formal copperplate to loose brush lettering, and they work when they are used for one short thing: a name, a single word, a signature or a two word greeting. They stop working in sentences, in capitals, at small sizes and over busy backgrounds, because their joined, slanted letters are harder to tell apart than the upright shapes of a serif or sans. Treat a script as a garnish, not the meal, and it will add warmth without costing you readers.

The main kinds of script font

Script is a broad family. Each kind carries a different tone, and some are far more readable than others. All the examples below are free on Google Fonts.

When script fonts work

• Names, such as a couple's names on a wedding invitation or a person's name on a thank you card.
• One word that carries feeling, like Welcome, Thank you, Fresh or Sale, set large.
• A signature line at the end of a note or post, where it reads as personal.
• Logos with short names, especially for bakeries, florists, salons and stationery, as long as the name stays readable at small sizes.
• Accents in an otherwise plain layout, where the contrast between script and sans is the point.

When script fonts don't work

Capitals are the most common mistake. Script capitals are designed with loops and swashes to begin a word, so a row of them becomes a tangle that is hard to read. Letter spacing is the second: connected scripts are drawn so each letter joins the next, and any added tracking leaves visible gaps in the stroke. For capitals, use a serif or sans and read all caps typography.

How to keep script fonts legible

1. 1

   Limit it to a few words

   Five words is a sensible ceiling for a formal or brush script. Handwritten faces like Caveat can stretch to a short sentence.

2. 2

   Set it large

   Scripts have small lowercase letters relative to their size. On a 1080 px post, keep a script at 100 px or more; see font size for Instagram posts.

3. 3

   Use a heavier weight on screens

   Hairlines in formal scripts vanish when a post is compressed. Pick a family with bolder options, or a monoline or brush style.

4. 4

   Give it calm contrast

   Scripts have fine strokes and complex outlines. Place them on the quietest part of the background with strong light and dark contrast.

5. 5

   Read it cold

   Show the design to someone who has not seen it, for two seconds. If they cannot read the script word, change the font or the size.

Pairing script fonts

A script needs a calm partner. The pairing works because the two are so different: one is fluid and personal, the other upright and clear. Avoid pairing a script with a decorative display face; two personalities shout over each other. Font pairing covers the general rules.

Script fonts on the web

Many scripts include alternate letters and ligatures that make joins look more natural. Browsers normally turn on standard ligatures and contextual alternates by default; declaring them keeps them on if a reset stylesheet switches them off. Swashes and stylistic sets must be asked for through font-feature-settings, and only where the font includes them.

.script {
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.2;           /* tall loops need room */
  letter-spacing: 0;          /* never track a connected script */
  text-transform: none;       /* never all caps */
  font-feature-settings: "liga" 1, "calt" 1;
}

On social posts, contrast is where scripts struggle most, because their thin strokes cross so many tones of a background. Gradiently Marks move their calmest area behind your words and pick light or dark ink line by line, which gives a delicate script the even ground it needs. For refined faces more broadly, see elegant fonts; for drawn letters rather than fonts, lettering vs typography.