Menu

Illustrative Type in Use

Recreating the look of hand-made type and lettering digitally is a great way to soften and personalize website designs. Here we present a dozen recent examples that do this successfully.

Hand Drawn

Melissa Chamorro

Screen capture of Melissa Chamorro’s website

Fonts Used

Chinese Rocks
Suco de Laranja

Description

Chinese Rocks (Typodermic) and Suco de Laranja (Hanoded) complement the collage and cut and paste style of this designer’s portfolio site. The intention is to emphasise the designer's focus on ideas and process, rather than a finished, polished outcome, a purpose for which these fonts are well-suited.


Belong

Screen capture of Belong's website

Fonts Used

Populaire

Description

Populaire is a good choice for this t-shirt printing outfit: PintassilgoPrints based their font on lettering produced by the screen-printing workshop Atelier Populaire during the 1968 Paris student uprisings, a style that has become synonymous with low-budget, do-it-yourself design. Be aware that a lack of full OpenType feature support means that the alternative characters available in the desktop version of the font won't be available for web use.

Evolution Fresh

Fonts Used

Dolce Caffe

Description

Dolce Caffe (Resistenza) is another narrow all-caps font based on hand-drawn letters, this time the source being Berlin café chalkboards. Neat, clean outlines make it a good choice for use on the web, and it remains readable even at small sizes. (BTW, we noticed but are overlooking the use of a single prime in the site’s subtitle…)

Lemonmade

Fonts Used

Hello I Like You

Description

The fourth of our examples to feature a tall, skinny hand drawn typeface is this site for a children and family hair salon. This design uses Cultivated Mind’s Hello I Like You to give the type ample screen real estate, while softening the grid-like structure which might have otherwise been rather too rigid had a more conventional narrow grotesque been used. The use of this type of lettering is notable, too, for its having a fun, casual feel without being childlike – something that can actually be off-putting to parents who will be participating in something with their children.

Scripts and Handwriting

Karkonoskie Tajemnice

Fonts Used

Boundless

Description

This site for a Polish museum has a historical fantasy theme, to which Boundless brings a suitably inky flourish. The designers have clearly thought hard about details, and the calligraphic type plays a key role in building the site’s overall aesthetic, yet they haven’t let the possibilities run away with them. Body text is set in Georgia, with a drop cap the only nod to manuscript-like styling. Although nothing really to do with typography, we are nevertheless impressed by the shadow cast by the main navigation bar — now that’s attention to detail!

Rice Fruit Company

Fonts Used

Metro Script

Description

Metro Script by Alphabet Soup is a richly featured and very sophisticated OpenType powered connecting script font – but it also works admirably well when its superpowers are turned off; more Batman, perhaps, than Superman. Used minimally in this fruit distributor's website, it brings a touch of retro elegance and complements the linocut style illustration nicely.

Lalaque

Fonts Used

Calgary Script

Description

Sudtipos’ script typefaces are known for their extravagent OpenType features and extensive character sets, but Calgary Script is a more modest offering that still works very well within its most basic feature set. Worth noticing, too, is how well it works in an all caps settings, a rare thing for a script typeface. If you decide to use Calgary in all caps, we would recommend using the letterspace CSS property to add a bit of extra tracking.

Amors Cottage

Fonts Used

DearJoe4 Smallface

Description

We’ve only featured one site using a handwriting font here, but this is a great example demonstrating both the why and the how to do it: The site promotes an intimate, personal experience and while this is a longer text and not really a display setting, it’s kept at a reasonable length by communicating just one key message and call to action. There are, however, a few minor nits we’d pick:more line-height would avoid the occasional crashing descenders (with maybe a slightly longer line length to compensate), and the centralized paragraph alignment doesn't ring true — humans just don’t write like that. Finally, we would have used the smooth version of Dear Joe4; at this size the scratchy texture just isn’t visible and only increases file size and rendering time. Overall, though, this is an attractive, understated and harmonious design that works very well.

Mechanical, grunge and distorted type

Body Mechanix

Fonts Used

Nidex
Keystoned Bold

Description

This may be a somewhat garish and even grisly design (our crop is actually a little unfair on the designer; the lurid effect is softened by a black background and is slightly more cinematic when seen on a widescreen monitor) but this is what grungy distorted typefaces are made for, and it’s pretty much pitch-perfect for its target audience. The body copy isn’t particularly inviting though, and asking the reader to spend time with this text is at odds with the site’s general approach — fewer pages with less text would have been a better solution.

Artifact Coffee

Fonts Used

Lanier
Coldstyle

Description

This is another collage concept (see also Melissa Chamorro, top) with a more found-photographic aesthetic that is complemented by a rummage-sale approach to typeface selection: Featured here are Ephemera’s Lanier and Coldstyle, but the site also uses HVD FontsBrandon Grotesque and John Doe from Fonthead Design (in this case provided by Typekit, but also available as webfonts from MyFonts). The effect is a bit anarchic, but it also makes for a enjoyable process of discovery — again, much like a rummage sale.

Art + Science Labs

Fonts Used

Veneer

Description

Yellow Design Studio’s Veneer is used here as part of an illustrative design concept that draws influences from early twentieth-century advertising artwork to create a sense of depth. Veneer’s texture allows it to sit within the other illustrative elements, almost as if the artist had painted the letters as part of the scene. Some problems arise, however, in the subsection of the navigation menu where the text is set too small and the texture starts to render badly. Instead of decreasing the point size, maybe the designers could have achieved a hierarchy through use of color or shade.

Chalk & blackboards

EduBlogs

IVAA

Fonts Used

Drawzing

Description

Here are two examples of sites using the chalk font Drawzing (another of Fonthead Design’s creations). Neither concept is groundbreaking but they’re well-executed and entirely appropriate to their audiences.
For a more indepth look at the how and why, check out our article on using illustrative fonts.
And now we want to see your examples! Use our submission form or tweet us @myfonts.

Back...