OpenType Features in Typography

OpenType features in typography allow us to customize the tone of a message.

We already know that typefaces are much more than just letters and numbers in different styles. By utilizing different classifications, weights, and variations, we can use fonts and typefaces to completely change tone and message of what is communicated.

But there’s additional things to keep in mind when typesetting besides its general appearance. You might have heard of OpenType font files, or at least seen the .otf ending on some of your fonts.

On the surface, you might not think the OTF files make much of a difference, but in reality there’s a whole world of special features that these files have.

Whether you’re typesetting short pieces of text or long, information-dense reports, these features can help perfect even the smallest typography details. Here, we’ll highlight some of the most commonly used OpenType features—but the list goes on and on from here!

 

Small Caps

Small caps are just as they sound—small capital letters. These capital characters reach up to the x-height rather than the cap height.

   

Better fitting in with large bodies of text, small caps can be most helpful for longer strings of capitals (like abbreviations) to provide less of a visual disruption than a string of full-height capital letters.

 

Ligatures

A subtle but necessary feature, ligatures are alternate glyphs that connect two (and sometimes three) characters to make the visual flow much more natural. The best example of a ligature is between the letters f and i. When together, but not through a ligature, fi can have visual tension based on the typeface. In many serif scenarios, the terminal of the f can get really close to the i, or even touch it. With a ligature, this combination becomes much smoother. 

 

Discretionary Ligatures

Just like your standard ligature, discretionary ligatures connect two or three characters for better flow. However, discretionary ligatures are more stylistic and don’t need to be included in every project.

 

Lining and Old Style Figures

Both of these character styles can be found all over the place. While this may seem like a stylistic-only decision, it mainly comes down to the flow and appearance in larger bodies of text just like small caps. Lining figures are the numbers that all extend to the cap height, most common in sans serif typefaces. Old style figures, common in serif, are numerical figures that have ascenders and descenders.

Just like uppercase and lowercase letters, lining and old style figures can have the same visual difference. For example, in a long paragraph, seeing a string of lining figures can stand out just like how a string of capitals can. These figures are excellent for body type and maintaining visual flow—just don’t mix lining and old style in the same project!

 

Tabular Lining Figures

Wrapping up with another number feature, tabular and lining figures may seem like a change that only affects one character, but its just the opposite.

In most cases, it seems like the number one is the only modified character. However, you’ll see that the kerning between all the numbers shifted quite a bit. This is for a good reason!

When dealing with large sets of numbers, tabular figures can be a greatly welcome change. The big change with tabular is now all the numbers have the same width and spacing. Take a look at how this feature lets numbers align with each other across different lines of text:

 

Believe it or not, OpenType features in typography have many more features than just the handful mentioned here! Using these tools, your typography finesse can shine through on any project. With better visual flow to more comparable numbers, OpenType is the typesetter’s best friend for any project.

Read another post on typography

The Power of Symbols in Illustrator

Why should I be using symbols?

Symbols are a powerful tool in Illustrator that let you create graphic elements for logo design, infographics, and website design that can be reused and updated simultaneously. Using multiple copies of an icon? Use symbols to keep them all in sync! Symbols can be used in so many ways to streamline the design process in a design agency and keep or assets organized.

What can symbols be useful for?

Symbols have a wide variety of applications; they can be used in more ways than just keeping multiples of an icon the same.

 

Maps

While this is one of the most classic examples of symbols, using them on map design and infographics can prove to be a huge time-saver. Multiple attractions of the same category can be represented with a reused symbol (and of course, edited all at once!). More complex map designs can become much easier to manage with symbols. Having 5 different categories with 10 pins each can become frustrating to maneuver as separate objects.

 

Infographic design

Depending on the scale of an infographic system, using symbols can relieve the complexity of having tons of similar objects—just like the maps. For example, if you need to add multiple labels to a graph with the same style, you can create a symbol for a label template and then modify the text in each instance to communicate the values necessary.

 

Artwork and illustration

Symbols don’t have to be used for traditional efficiency purposes! As long as they are used multiple times, it saves time to set them up as symbols. Creating a piece of vector artwork of a skyscraper? Using symbols, you can make all the windows reference one symbol so a restyle is just a click away.

 

Logo Variations

Say you need to conceptualize different variations of a logo design while reusing the same glyph or icon—make the icon a symbol and reuse it in each variation!

Infinite possibilities

Symbols are an extraordinarily versatile tool. Having a feature in Illustrator like symbols can be applied to so many different design projects, especially since it’s endless what you can put inside a symbol—you can even nest symbols within symbols to create multiple layers of self-updating assets.

Read more Tips & Tricks

Using icons on websites

Iconography on websites has become a standard.

Once you pay attention while browsing your favorite websites, you will find icons in different sizes, weights, and styles everywhere. They are a great visual tool to consistently identify content of a certain category. Done well, they also help users scanning your webpage get a quick overview of the information.

Icons on websites should support the user experience without drawing too much attention to them. They should support the information or action they stand with. Here are a few things to keep in mind when adding icons:

Place icons judiciously

The most successful use cases limit icons to buttons, sections, actions, and elements that need to be quickly glanceable or clickable. The visual element of the icon grabs attention, supports the users’ understanding, and emphasizes the action.

Placement of text with icons

Typically, if an icon is placed in line with text, it should be optically centered vertically with its neighboring typography. It should also be designed to have the same visual weight as your selected typeface. For example:

icons - text with icon
With this button, the Wi-Fi icon is technically centered correctly on the vertical axis. However, it appears that it sits a bit low when looking at it, in the visual appearance. Since the symbol has a strong downward point to its shape, it needs to be optically adjusted to account for that.
icon - text with icon baseline corrected
Raising the symbol up to be higher than its technical center makes it appear more level and aligned with the ‘Connect’ text.

A fun example of icons we created and paired with text can be found on the MIT Chemistry website.

Shared visual characteristics create consistency and build your brand

An icon series can help you build your brand. By creating icons that share visual characteristics, you create an icon library that feels cohesive. Examples of how to do that are using the same line weight, color palette, and corner radious. By repeating the same visual elements, the user recognizes icons as part of your brand.

icon design - icon and text button exampleThis button has a vibrant color, simple shape, and geometric typeface. To match this, the heart icon has a similar monoline thickness and geometric structure.

One successful approach can be contrasting styles of icon style and typography. However, matching the line weight and style of your icons to the weight and classification of type can create a relationship that successfully ties it all together.

icon design - illustrative exampleIn this case, the tone of the icon is organic, fluid, and hand-drawn. Noticing that the typeface has a modulated thickness as opposed to the monoline appearance from the previous example, a more natural and gestural icon is fitting.

Keep in mind the level of detail and scalability of icons when using icons on websites

The pen and hand icon can’t be scaled down to very small sizes because of the level of detail in the drawing. The ‘Like’ and ‘Connect’ buttons can be scaled to smaller sizes because the icons are much simpler. With a higher level of detail, shrinking icons too small would reduce clarity and legibility, making the smaller details indistinguishable. If this icon was needed in smaller sizes, it could be redrawn with fewer details to make sure it still communicates clearly.

Well-designed icons can make a big difference in creating a great, intuitive user experience in website design.

Read more about icons