A Handwriting Font Used for Every Paragraph

Arrangements nobody can quite read

A florist's website sets every word in the flowing script from her logo: the menu, the arrangement descriptions, the delivery details and the prices.

On her own large screen it looks like the shop's cards. Customers see lines of joined loops they have to squint at, and prices they phone to confirm.

Some read a $45 bouquet as $95 and order elsewhere. Others skip the descriptions and judge the arrangements by the photographs alone.

Drawn for a few large words

Decorative scripts are drawn to be seen large and briefly: a shop sign, a wedding invitation, a logo. Their charm comes from thin hairlines, loops and letters that join.

At paragraph size, a screen has only a handful of pixels for each letter. The hairlines fade or blur into grey, and an a, an o and an e run together.

Script lowercase letters are also short beside their capitals, so a script set at a normal reading size looks smaller than plain text at the same setting.

Where the blur is worst

The problem is worst exactly where many visitors are:

• Office computers running older Windows and Internet Explorer, which often draw web fonts with rough edges.
• Older phones, with fewer pixels to draw each letter.
• Prices, dates and phone numbers, where script figures are easy to misread.
• Words in capitals, which most scripts were never drawn to set in a row.
• Menus and buttons, which visitors read at a glance.
• Readers with weaker eyesight, who lose the joined letters first.

The owner rarely sees any of this. She checks the site on a recent computer with a sharp screen, where the script looks much as it does in print.

The logo and a few headings carry the character

Nothing about the brand requires the script in every paragraph. Its character comes across in the logo, the main heading on each page and perhaps one short line on the home page.

Set large, those few words do the work the script was drawn for. Repeated through every paragraph, it stops looking special and simply looks hard to read.

Show the logo itself as an image, made at twice its displayed size for sharp screens, so it looks the same on every device whether or not a font loads.

A plain face for everything people read

Set the descriptions, prices, menus and forms in one plain typeface designed for screens. A clear sans-serif and a sturdy serif both work, and the choice can echo the brand's tone.

Make it large enough, around 16 pixels for paragraphs, in dark grey or black on a light background, with comfortable spacing between the lines.

A soft, rounded face suits a florist or a bakery; a classic serif suits a law office. Either way the reading face stays quiet, so the script still stands out where it appears.

Every paragraph waiting for one font file

Each web font arrives as a separate file, and the browser must download it before drawing the text. Script fonts are often large files, and a site that uses one everywhere makes every paragraph depend on it.

While the file loads, several current browsers show no text at all for a few seconds. On a slow phone connection, visitors see photographs and blank space where the descriptions belong.

When the reading text uses a quick, plain face, the page can be read at once, and the script fills in the headings when it arrives.

A worked example

An etiquette consultant in Vancouver teaches dining etiquette to business teams, runs workshops for young people starting their careers, and coaches individuals before important dinners and interviews.

Her site was designed around her logo, a graceful script, and every page used the same face: course descriptions, dates, fees and the booking form.

Calls kept arriving with questions the site already answered. Several people misread a workshop date, and one company booked a session for the wrong month.

The script was kept for her name in the logo and for the main heading on each page. Everything else moved to a plain serif with a formal, classic feel, at a comfortable size.

Fees and dates were set in the same plain face, in bold where they matter, and the booking button was labelled in plain capitals.

The site still looks like hers, because the script appears where the eye lands first. The details below it can now be read once, quickly, by anyone.

Checking it on the screens that matter

Look at the site on the screens your customers use, not only your own: an older office computer, an older phone and a tablet held at arm's length.

Read a description aloud from each one. If you hesitate over a word or a price, a visitor who does not know the business will hesitate longer.

Then ask someone who wears reading glasses to read the prices without them. Anything they cannot manage at a glance needs the plain face.

Asking for the change

On a well-built site the fonts are set in one stylesheet, so swapping the reading face takes whoever maintains the site very little time.

Ask for two settings: the script for the logo and main headings only, and the plain face for everything else, including forms, menus and the footer.

If the script was applied paragraph by paragraph, or text was saved as pictures, the change is larger, and worth doing properly once rather than patching.

The counter-case

Some sites can carry more of the script. A wedding stationer's one-page site with a few lines of text, or an invitation page for an event, may read well with the script at large sizes.

A few scripts are also drawn more openly, with separated letters and sturdy strokes, and hold up better at smaller sizes than the flowing faces most logos use.

But whatever a visitor needs in order to act, a price, a date, an address or a form label, belongs in a plain face. That is a matter of being understood, not of taste.

Separating the script from the reading text

1. List every place the script appears.
2. Keep it for the logo and main headings.
3. Choose one plain face for everything else.
4. Set prices and dates in that plain face.
5. Show the logo as a sharp image.
6. Check the pages on an older phone and an office computer.
7. Read every price aloud from each screen.

Step four matters most, because prices and dates are what visitors act on. A misread description costs a moment; a misread price or date costs the order.

Keeping each price beside the item it belongs to matters just as much, and is covered in prices placed far from the products they belong to.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.