What are script and handwritten fonts and when do they work?

Sajjad
Typography
11 Oct, 2026

Script fonts are typefaces that imitate writing made with a pen, nib or brush, usually with flowing strokes and letters that connect to one another. Handwritten fonts are a looser, more informal relative, based on everyday handwriting with a marker, pencil or ballpoint, and their letters are often separate. Examples include Great Vibes and Allura for formal script, Dancing Script and Satisfy for casual script, and Caveat, Kalam and Patrick Hand for handwriting. They work when the text is short, large and meant to convey a personal, elegant or friendly tone, such as a logo, an invitation, a signature or a decorative heading. They rarely work for body text, navigation, buttons or anything readers need to scan quickly.

Script and handwritten faces are some of the most expressive typefaces available, and they're popular with weddings, restaurants, bakeries, craft brands and personal sites. They're also among the most frequently misused, because the features that give them charm make them harder to read. In this article you'll learn the main styles of script and handwritten type, what makes them hard to read, where they shine, how to set them correctly in CSS so their letter joins stay intact, and how to keep them accessible.

The Main Styles

Formal Script

Formal scripts are based on traditional calligraphy, particularly 18th- and 19th-century copperplate and Spencerian writing made with a pointed, flexible nib. They have high contrast between thick downstrokes and hairline upstrokes, long flourishes and elaborate capitals.

They suggest elegance, ceremony and tradition. Typical uses include wedding invitations, certificates and luxury branding. Great Vibes, Allura, Parisienne and Pinyon Script are free examples on Google Fonts.

Casual Script

Casual scripts are looser and more relaxed, often looking like they were written quickly with a brush or felt-tip pen. Their letters usually connect, but with less contrast and fewer flourishes than formal scripts. Dancing Script, Satisfy and Sacramento are common choices. They suit cafés, lifestyle brands and friendly headings.

Brush Script

Brush scripts show the texture and pressure of a brush: thick, energetic strokes, sometimes with dry-brush edges. They feel bold and lively and work well for posters, sports, food packaging and short promotional headings. Kaushan Script and Yellowtail are examples.

Handwritten

Handwritten fonts imitate ordinary handwriting rather than calligraphy. Letters are usually unconnected, strokes are fairly even, and the overall feel is informal and personal. Caveat, Kalam, Patrick Hand, Indie Flower and Gochi Hand are widely used. They suit notes, annotations, children's content, illustrations and anywhere you want a human touch.

Blackletter

Blackletter, the dense, angular writing style of medieval Europe, is sometimes grouped with scripts because it's also based on pen writing. It has its own conventions and is usually treated as a separate category, but the same rules apply: short, large and purposeful.

Why Scripts Are Harder to Read

Scripts and handwriting fonts deliberately trade some legibility for character. Several features cause problems:

Connected letters: Joins make individual letters harder to pick out, particularly in unfamiliar words and names.
Unusual letterforms: Script capitals in particular can be hard to recognise. Is that an I, a J or a T?
High contrast: Hairline strokes in formal scripts can disappear at small sizes or on low-quality screens.
Flourishes: Swashes and loops can collide with neighbouring lines and letters.
Small x-heights: Many scripts have tall ascenders and descenders but small lowercase bodies, which makes them look small for their size.
Irregularity: Handwritten fonts imitate natural variation, which adds charm but reduces the consistent shapes readers rely on.

Readers with low vision, dyslexia or limited familiarity with the Latin alphabet are especially affected. Some readers have never been taught to read cursive at all. That's why scripts belong in places where the meaning is reinforced by context or by nearby text.

When Script and Handwritten Fonts Work

Logos and wordmarks: A short name, often designed or adjusted by hand, can carry a script beautifully.
Invitations and event pages: Names, dates and a short title in a formal script, with details in a readable text face.
Short decorative headings: Two or three words, set large.
Signatures and sign-offs: A handwritten sign-off at the end of a letter or about page adds a personal touch.
Annotations and callouts: A handwritten face for a short note, arrow label or highlight on an illustration.
Product packaging and menus: Section names on a restaurant menu, with the dishes themselves in a text face.

When They Don't Work

Body text: Even a few sentences become tiring.
Navigation, buttons and forms: People need to recognise these instantly.
Small text: Below roughly 24px, most scripts lose the detail that makes them readable.
All caps: Script capitals are designed to start words, not to sit next to each other. A word in script capitals is almost always hard to read.
Important information: Prices, dates, addresses and instructions should be in a clear text font, even if a script heading sits above them.
Professional or technical contexts: A casual handwritten face can undermine trust on a banking, medical or legal site.

Setting Script Fonts in CSS

Don't Add Letter Spacing to Connected Scripts

This is the most common mistake. Connected scripts are designed so that the end of one letter joins the start of the next. Adding letter spacing breaks those joins and leaves gaps between letters.

/* Wrong: breaks the connections between letters */
.script-heading-bad {
  font-family: "Great Vibes", cursive;
  letter-spacing: 0.1em;
}

/* Right: leave tracking at the font's default */
.script-heading {
  font-family: "Great Vibes", "Snell Roundhand", "Segoe Script", cursive;
  letter-spacing: normal;
}

Also check that any global styles, such as a letter-spacing set on all headings, aren't inherited by script elements.

Don't Use text-transform: uppercase

Script capitals are meant to stand alone at the start of a word. Make sure inherited styles don't force them into capitals:

.script-heading {
  text-transform: none;
}

Keep Contextual Alternates and Ligatures On

Many script fonts use OpenType features to choose the right form of a letter depending on its neighbours, so joins look natural and repeated letters vary. These are on by default in browsers, but resets or utility classes sometimes turn them off:

.script-heading {
  font-variant-ligatures: common-ligatures contextual;
  font-kerning: normal;
}

If the font offers swashes or stylistic alternates, you can enable them with font-feature-settings, for example "swsh" or "salt". Check which features your font actually includes before relying on them.

Size, Line Height and Overflow

Scripts often look smaller than other fonts at the same size, because their x-height is small. They also have long ascenders, descenders and flourishes that can extend outside the normal line box.

.script-heading {
  font-family: "Great Vibes", "Snell Roundhand", "Segoe Script", cursive;
  font-weight: 400;
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height: 1.2;
  padding-block: 0.1em;
  overflow: visible;
  font-synthesis: none;
}

font-synthesis: none stops the browser applying a fake bold or italic. Most script fonts come in a single weight, and a synthesised bold smears the fine strokes. If headings are bold by default in your styles, set font-weight: 400 on script elements explicitly.

Be Careful With the cursive Generic Family

CSS has a generic cursive family, but what it maps to varies a lot between systems. On Windows it often resolves to Comic Sans MS, and on other systems it may be something quite different. Always list specific fallbacks first, and choose them so the page still looks acceptable if the web font fails. Sometimes a serif fallback is a safer last resort:

.invitation-names {
  font-family: "Pinyon Script", "Snell Roundhand", "Segoe Script", Georgia, serif;
}

Snell Roundhand ships with macOS and iOS, and Segoe Script with Windows, so many visitors will see a script fallback, and the rest will see a classic serif rather than an unpredictable default.

A Complete Example

Here's an event header that uses a formal script for the names and a readable serif for everything that matters:

<header class="invite">
  <p class="invite-kicker">Together with their families</p>
  <h1 class="invite-names">Amara <span class="amp">and</span> Joseph</h1>
  <p class="invite-details">
    Saturday 12 June 2027 at 2pm<br />
    The Old Boathouse, Riverside Lane, York
  </p>
</header>

@font-face {
  font-family: "Pinyon Script";
  src: url("/fonts/pinyon-script-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.invite {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #2b2b2b;
  padding: 3rem 1rem;
}

.invite-kicker {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.invite-names {
  font-family: "Pinyon Script", "Snell Roundhand", "Segoe Script", Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  margin-block: 1rem;
}

.invite-names .amp {
  font-size: 0.6em;
}

.invite-details {
  font-size: 1.125rem;
  line-height: 1.6;
}

The script carries the mood, while the date, time and venue are set in a clear serif at a comfortable size. The small uppercase kicker uses letter spacing, which is appropriate for capitals in a non-script face.

Keeping Script Text Accessible

Use live text: Keep script headings as real HTML text, not images, so they can be resized, translated and read by screen readers.
Check contrast: Fine strokes look lighter than solid text. Aim comfortably above the WCAG AA 3:1 minimum for large text.
Repeat critical information: If a script heading contains a name or offer, make sure the key information also appears in readable text nearby.
Test with real words: Long names, double letters and unusual combinations reveal problems that a specimen hides.
Avoid scripts for links: Links need to be clearly recognisable; a script link in a sentence is easy to miss.

Choosing a Good Script or Handwritten Font

Look at the capitals: They should be recognisable on their own.
Check the joins: In a connected script, every common letter pair should join smoothly.
Check character coverage: Make sure numerals, punctuation, ampersands and accented letters are included and match the style.
Look for variety: Better handwritten fonts include several alternates for common letters, so repeated letters don't look identical.
Check the licence: Many free script fonts online are licensed for personal use only. Fonts from Google Fonts use the SIL Open Font License, which allows commercial use.

FAQ: Script and Handwritten Fonts

Script fonts imitate calligraphy or fluid pen and brush writing, usually with connected letters. Handwritten fonts imitate everyday handwriting, are more informal, and often have separate letters.

It's best not to. Connected letters, unusual shapes and small x-heights make long passages slow and tiring to read, and some readers find script hard to read at all.

Letter spacing is probably being applied, either directly or inherited from a heading style. Set letter-spacing to normal on script text so the letter joins stay connected.

No. Script capitals are designed to begin words, not to sit side by side. Words set entirely in script capitals are very hard to read.

It's a generic fallback for script-like fonts, but browsers and systems map it to very different fonts, often Comic Sans MS on Windows. List specific fonts before it, or use a serif as the final fallback.

They can be if used for important or long text. Used large and briefly, with key information repeated in a clear text face and sufficient contrast, they can be part of an accessible design.

Conclusion

Script and handwritten fonts bring personality, elegance and warmth that no text face can match. Formal scripts suggest ceremony, casual and brush scripts feel relaxed and energetic, and handwritten faces add a personal, informal touch. All of them trade some legibility for character, which is why they belong in short, large, decorative text.

Use them for logos, names, short headings and sign-offs, and keep everything important in a clear text font. In CSS, leave letter spacing at normal, avoid uppercase, keep contextual alternates on, disable synthesised bold, and choose fallbacks deliberately instead of trusting the generic cursive family. Treated that way, a script font becomes a confident accent rather than an obstacle.