How to Design Beautiful Typography Fast with OpenType Features

By on Jul 23, 2018 in Tutorials
How to Design Beautiful Typography Fast with OpenType Features

A unique font family can become a strong starting point to develop a brand's visual identity. Fonts convey specific emotions, relate to personality traits, and are great vehicles for brand storytelling. It comes as no surprise, then, that many brands engage in their own custom typeface design processes, resulting in fonts like Netflix Sans and Airbnb's Cereal.

Save

A leaner alternative to creating a custom type family for a brand is to tweak an existing font and work with its unique features to project the brand's values. And we're all in luck: with the popularity and expansion of the OpenType font format, designers can now offer glyph-packed type families that make our jobs 10x easier. Distinctive initials, terminals, and ligatures can add that extra touch of flair and personality that our brand designs require. Throughout this article, I'll share a few examples of how these special OpenType features can facilitate the branding process. But first: a little OpenType history.

OpenType History, AKA The Font Wars

When Adobe launched PostScript in 1984, it was pretty revolutionary: we were used to bitmap fonts that pixelated whenever they expanded. For reference, here's what you'd have to work with:

SaveSome of the fonts available in the original Apple Macintosh. Designs by Susan Kare.

These raster fonts simply couldn't scale, so Adobe created PostScript code that interpreted letters as outlines "drawn" with math formulas, instead of those flat pixels. Shortly after, Apple's LaserWriter became the world’s first printer to use PostScript. All of a sudden we could shrink and expand text that printed beautifully on paper! I know that doesn't sound huge now, but just imagine what a designer's workflow looked like before that.

In 1991, when launching System 7, Apple Computer designed and rolled out the font format we know as TrueType. Efficient, scalable, and extensible, the format quickly called Microsoft's attention to the point that they licensed it for Windows 3.1 (1992).

But this is where it gets messy: Apple started to evolve the TrueType format (TrueType GX) for Mac-only applications and Microsoft clearly couldn't stay behind. File extensions were different (remember .FFIL, anyone?), fonts that worked on one operating system were useless in the next, and whatever improvements were made couldn't be directly implemented for everyone. This led to a font war of sorts.

You had brands creating rasterizers to render these fonts on different screens, operating systems managing font files differently, and software reading these fonts in various ways. Nothing short of a typography nightmare. And that's when Microsoft developed TrueType Open.

OpenType is Born

So, to recap: the year is 1996 and the design world is familiar with 2 main font technologies: PostScript (Type 1) and TrueType. Seeing the strengths of PostScript Type 1, the need to have more control over how fonts evolved, and the possibilities of TrueType Open version 1, Microsoft joined forces with Adobe Systems to develop TrueType Open version 2, also known as OpenType.

This brand new format brought many different benefits:

  • The file type is cross-platform and can be used on both Macintosh and Windows
  • A font can include 64,000 glyphs, when the original Type 1 and TrueType were roughly limited to 256 characters.
  • Advanced features like swashes, alternates, initials, and more can be packaged in a single font.

SaveStylistic alternates in the Aurora OpenType font by Andrey Sharonov.

PostScript Type 1, TrueType & OpenType

You may have heard of glyphs when talking about fonts. Think of a glyph as a character or symbol. All fonts, whether TrueType, OpenType, raster, or vector, are made up of glyphs. In TrueType and OpenType fonts specifically, these glyphs are sets of paths that come together to form the outline/shape you see. The fonts contain line and curve commands, which are like orders given to the system to define their outlines and draw out the glyphs properly.

But not all font outlines are created the same: PostScript Type 1 outlines are formed by cubic Bézier paths, while TrueType outlines are shaped by quadratic Béziers. What's the difference, you ask? Aside from a subjective preference for either type of path, it is generally the case that the cubic Bézier format saves space in comparison to the quadratic format of the TrueType fonts. On top of that, remember the line and curve commands mentioned before? The TrueType format's quadratic Bézier curves can give more detailed instructions that may lead to better rendering on a screen.

SaveThis graphic was created by Fábio Duarte Martins, who published an outstanding article about type design here.

Now remember: OpenType fonts were created to improve both PostScript (Type 1) and TrueType, the 2 popular formats at the time. As a result, OpenType fonts can contain either PostScript Type 1 font outlines, TrueType font outlines, or both. OpenType fonts containing only PostScript data have an .otf extension, while TrueType-based OpenType fonts use .ttf.

We're used to appreciating the flair, ornaments, and artistic side of type, but at its (super technical) core, a font is composed of a series of data tables woven together. While there are many others, the 'glyf' table is the one that actually says what the glyphs in a font with TrueType outlines should look like. Fonts with PostScript outlines have a CFF table instead.

CFF stands for Compact Font Format, and OpenType fonts that only contain this kind of table (therefore PostScript Type 1 outlines) are called OpenType CFF fonts. However, like I mentioned before, OpenType fonts can have TrueType or PostScript (Compact Font Format, CFF) outlines so, as expected, they can contain either type of table.

This helps us clarify another common misconception about OpenType fonts: that they always use the .OTF extension. As we've discussed, that is not always the case, as it depends on the type of outlines in the font. If the OpenType font only has PostScript outlines (CFF tables), it will always have an .OTF extension. If it also has TrueType outlines, it may have either an .OTF or .TTF extension. Some creators want their fonts to remain compatible with older systems or versions of the font.

If you're interested in seeing what these tables actually look like, developer Simon Cozens shared a detailed explanation here.

PS: If you're thinking this font design business is more complicated than you thought — you're right. Luckily, there's an amazing new tool simplifying the whole font packaging process (tables and everything else) so that you only have to worry about designing characters. Check out Fontself.

We also created a tutorial and some useful worksheets to get a head start creating your first font from scratch.

Get your worksheet


Download it now!

img

Download it now!

Design your first font from scratch

Use this worksheet to trace your uppercase and lowercase letters, as well as any symbols that you'd like to add.

Which applications allow me to use OpenType features?

All major operating systems include support for OpenType, but not every desktop publishing application can recognize special features like swashes and ligatures. You can use an OpenType font's advanced typographic features in Adobe InDesign® CS all versions, Adobe Illustrator® CS all versions, Adobe Photoshop® CS all versions, as well as many non-Adobe applications.

Let's look at how you can access these features in Microsoft Word, Mac apps like Keynote, and Adobe Creative Cloud design apps.

How to See OpenType Typographic Features in Microsoft Word

You should be able to access these advanced features in Word 2010 and higher by clicking on Format → Font → Advanced.

Save

Shop owner Jessica McCarty (Magpie Paper Works) published this great article explaining how you can access specific OpenType features like initials and ligatures in Word.

How to See OpenType Typographic Features in Mac Apps

Access a panel of OpenType features by going to Format → Font → Show Fonts → Typography on Mac apps like TextEdit, Pages, and Keynote.

Save

How to Visualize OpenType Typographic Features in Illustrator CC, Photoshop CC & InDesign CC

Illustrator and InDesign: You can access special characters like stylistic alternates and ligatures by opening the Glyphs panel (Window → Type → Glyphs). For Photoshop just go to Window → Glyphs.

Save

These are the stylistic alternates in the Prosciutto font by Tuccicursive.

In addition to alternates for individual characters, InDesign allows you to replace full stylistic sets via the Type palette (Window → Type → OpenType). Stylistic sets substitute an entire range of text with a different look defined by the font designer. In doing so, they can help you save time otherwise spent replacing each character on its own.

Types of OpenType Features That Are Useful for Branding & Design

OpenType fonts can pack lots of unique characters that can add personality to your brand design projects in seconds. There are dozens of advanced features that designers can choose to include in their font families. However, some of the most useful features for branding projects include capitals, ligatures, swashes, alternates, stylistic sets, and ornaments.

Capitals

The OpenType format supports specific styling for capital letters so that you can control their appearance much better. Designers can include different styles for small capitals, petite capitals, titling, and capital spacing.

SaveQuiche, by Adam Ladd, includes interesting small caps as well as swash capitals.

Ligatures

Two or more glyphs that are combined into a single glyph so that they become more readable or visually attractive. According to Microsoft, ligatures can be standard, contextual, discretionary or historical. While the first two enhance readability, the second two serve purely decorative purposes.

SaveBrilon by Tobias Saul includes many special ligatures.

Swashes

Special glyphs that add flair and extend a character for ornamental purposes. Font designers can create contextual swashes so that certain letter pairs don't clash when a given swash is added. Sometimes they're also created as initial or terminal swashes, to provide a decorative character that marks the beginning or ending of a range of other characters (such as a word or brand name).

SaveSwashes like those used in Muara can add character and personality to typography

Alternates

Add a visually interesting variation to one of your letters with these special glyphs. These alternates are glyphs meant to replace the regular appearance of another glyph. Whenever there are certain combinations of characters that require more than one or even two versions of the same letter (for example), designers can include contextual alternates that solve for this issue. Historical forms, also called Oldstyle figures, can also replace glyphs to add a vintage touch to your text.

SaveA demonstration of how including stylistic alternates changes the overall appearance of Isabella Script

Stylistic sets

OpenType fonts can also group alternate glyphs into something called Stylistic Sets. These sets apply alternates automatically to a range of text, allowing you to achieve instant variation without replacing each character on its own.

SaveThese are the 6 stylistic sets included with Sad Riff, by Rad Fonts.

Ornaments, dingbats, and flourishes: Sometimes font designers include a set of graphics or icons that complement the visual style of the typeface they've created. These are particularly useful for branding projects because they can help build a logo layout with elements that are already cohesive with the letters you're using.

SaveExtras included in the Lovadelic font

Using OpenType Features in Logo Design: Examples

To demonstrate how advanced OpenType features can facilitate logo design, here are a few ways to incorporate them into your process. The logo concepts below were created using Studio Standard's Brand Kit.

Can you spot the differences between these two compositions for a fictional shop called Rose & Lilac?
Save

We replaced the "r", "c", and "&" with the stylistic alternates provided by Corradine Fonts in Sinffonia. This change, while subtle, can help convey brand traits like softness, glamour, and elegance. The logo looks and feels more unique because instead of using the font's regular glyphs, we thought about how to bring out the brand's distinctive features with special strokes and delicate curves.

Sometimes we want to emphasize a certain time period in a heading or brand name, and that's when stylistic alternates with historical forms come in really handy. Laura Worthington designed Fairwater Sans taking this into account, so she included a set of alternate glyphs with a distinctively Art Deco aesthetic. Lower, more playful crossbars cause an immediate impression when you compare the logo concept to the left with the one on the right below:

Save

Certain OpenType alternates can also be useful to fix spacing issues between specific letters. In our fictional shop (Rose & Lilac), having the "L" next to the "il" can be problematic if the leg of the capital L crosses the lowercase l. Fortunately, Nicky Laatz's Chin Up Buttercup includes alternate initials that can help us enhance readability and make the whole composition look more harmonious. The set also contains a different version of the capital "R" that plays well with the new "L", as well as a smaller "e" that makes "Rose" look more balanced with respect to "Lilac".

Save

What are your favorite OpenType features?

What are your go-to OpenType features when working on personal or client projects? Let me know in the comments area below!


Products Seen In This Post:

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

6 Comments

  1. hptypework

    Cricut users and the other cutting stuff programs also can try Nexus Font Manager (Win OS) for accessing the alternates from Opentype Font.

  2. hptypework

    This is great article for most buyer in creative market. Definitely i'll put this blog link on every my products, many buyers will get helped with this explanation. Great work!

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →