How to Design unprejudiced Typography like a flash 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 noteworthy 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.

Pin It

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 perform 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 itsy-bitsy 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 own to work with:

Pin ItSome 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 employ 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 own 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 modern 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.

Pin ItStylistic alternates in the Aurora OpenType font by Andrey Sharonov.

PostScript Type 1, TrueType & OpenType

You may own heard of glyphs when talking about fonts. believe 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 reach 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 dissimilarity, you demand? 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.

Pin ItThis 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 well-liked 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 own an .otf extension, while TrueType-based OpenType fonts employ .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 scrutinize like. Fonts with PostScript outlines own 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 own 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 employ 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 own an .OTF extension. If it also has TrueType outlines, it may own 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 scrutinize 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 just. Luckily, there’s an unbelievable modern tool simplifying the whole font packaging process (tables and everything else) so that you only own to worry about designing characters. Check out Fontself.

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

obtain your worksheet


Download it now!

img

Download it now!

Design your first font from scratch

employ 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 employ 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 employ 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 scrutinize 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.

Pin It

Shop owner Jessica McCarty (Magpie Paper Works) published this noteworthy 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 → display Fonts → Typography on Mac apps like TextEdit, Pages, and Keynote.

Pin It

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 travel to Window → Glyphs.

Pin It

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 scrutinize defined by the font designer. In doing so, they can back 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.

Pin ItQuiche, by Adam Ladd, includes exciting 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.

Pin ItBrilon 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).

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

Alternates

Add a visually exciting 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.

Pin ItA 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.

Pin ItThese 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 back build a logo layout with elements that are already cohesive with the letters you’re using.

Pin ItExtras 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?
Pin It

We replaced the “r”, “c”, and “&” with the stylistic alternates provided by Corradine Fonts in Sinffonia. This change, while subtle, can back 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 reach 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 just below:

Pin It

Certain OpenType alternates can also be useful to fix spacing issues between certain 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 back us enhance readability and perform the whole composition scrutinize more harmonious. The set also contains a different version of the capital “R” that plays well with the modern “L”, as well as a smaller “e” that makes “Rose” scrutinize more balanced with respect to “Lilac”.

Pin It

What are your favorite OpenType features?

What are your travel-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.

Download How to Design unprejudiced Typography like a flash with OpenType Features

How to Design unprejudiced Typography like a flash with OpenType Features ratings

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)