8px Magazine
Published in

8px Magazine

The Value of Typography Design

Why font-stretching is a crime (+ typography tips)

I was first introduced to the design industry through typography/ lettering talks by Jessica Hische in 2015. And you can imagine my fascination with type design via the details of her logo works.

We’re all attracted to colours, imagery and the fancy stuffs in design and we forget that understanding typography is half the battle done because type contributes to 2 factors — graphic conveying moods and words conveying language.

Why pay for typefaces when there’s free ones?

(Some) Free fonts are great but paid type has more thought and details going into it.

Characters are Designed Individually to Fit Together

Type designers design individual characters with multiple edits, and then they go through the trouble of testing kernings individually (aa, ab, ac, …, ba, bb, bc, etc.) and as a whole with words. Even though a lot of these things are more automated with technology nowadays than in the past, a lot of refinement goes into each character individually to make sure they look right together.

Some free fonts have really bad kernings and people using it either 1) go through the trouble to fix it manually or 2) use it as it is. Neither of this is a great (or fun) way to design.

Ligatures and Alternate Glyphs

Ligature that works.

Ligatures and alternate glyphs are a blessing — it’s like a nice surprise to a font that might seem simplistic and plain. But if it’s inaccessible (or, in the case demonstrated below, “too accessible”), it’s a pain.

Alternate glyphs in place of ligature. This doesn’t work well for variable design.

In this case above, “Better” becomes “BeGer” because “tt” is replaced with an alternate glyph of G. I don’t know if there’s an actual “correct way” (though there’s definitely “best practice”) to add alternate glyphs, but one thing I’m sure is I will not be able to use this font in web design unless it’s a static graphic. (P.S.: I did purchase this font, albeit at a very very low price. Obviously if you’re considering expensive fonts, test it out before purchasing.)

Tip: This gif below is how an alternate glyph should work. There’s also another way where you can open the glyph window to see all the glyphs available (at least in the Adobe softwares like Illustrator and Photoshop).

Accessing alternate glyphs in an otf font.

Type not only communicate words but also visuals

Designing Mood
I’m sure everyone who has read a post about “how to pair type” has read that “mood” is one of the “method”. What the heck does that even mean?

If you saw typography as shapes you’d be more likely to understand why it depicts mood. Fonts with rounder edges are softer and friendlier as compared to fonts with sharp edges.

You can read more about how typography impacts mood in this article — How typography impacts your mood.

Legibility Consideration
Visual shapes also aids legibility.

Font weight, contrast between strokes, differences in height of ascenders and descenders, serifs, etc., are all contributing factors.

Height differences in uppercase I and lowercase L is important to help distinguish the two, especially in smaller font sizes because we read the shape of the whole word and not individual letters (according to this article — How We Read, even though I recently heard that’s been debunked).

Perhaps the above image is not the best demonstrated example, but some other examples are like having lt as ligatures that looks like tt because the crossbar crosses over (especially in script fonts), or when you confuse between o (small-cap letter o), O (big-cap letter o) and 0 (zero).

It’s important for type designers to know how the various glyphs might work together or cross over eg. content with types and numbers.

Designing Various Weights for Balance and Complement

Other than designing for characters to pair well in various weight, type family is also designed to look balanced in different sizes via different weights.

When you want to use the same visual weight of a font in different sizes, you need to use a different font-weight to counteract the visual difference because fonts in smaller sizes look lighter.

Tip: Tracking should be considered to be increased for bigger-sized fonts and decreased for smaller-sized fonts, depending on the font itself.

Demi and bold font-weights look like they have the same visual weight in different sizes.

Conclusion

The value of type design shouldn’t be overlooked just because it’s so common in our everyday life. Just like how a pair of shoes can change the vibe of an entire outfit, choosing the right fitting font works the same way for the overall design.

I love typography because it’s so basic and “boring” to some people, BUT it really shows when you’re bad at it that you’re not an experienced designer. Like I always say, get the basics and foundations right and you’ll add so much more quality and value to your work. (I mean, I’m learning too.)

Hopefully there was something of value for you in this post, whether you’re a designer or not. Till next post, adios!

--

--

--

Life, by designers.

Recommended from Medium

I’m a Dribbble-Centered Designer. Said no one ever

Shade Protocol Dev Update #2

UX — Case Study: Re — Designing for “Send Your Waste” Page from Waste4Change Website

Weeknotes S1E2: resolutions

9 Reasons Why You Should Redesign Your Business Webpage

Design Thinking — A Philosophy That Has Helped Big Corporations Create User-Centric Products

Landing Page for Code for America Brigade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Esther Teo

Esther Teo

Human. Designer. Feels a lot. Thinks a lot. Writes sometime. https://esthertch.com

More from Medium

Fulfilling Design

Maslow’s Hierarchy of Needs

The secret of a successful design is color theory. Color theory orange color tips.

brands with orange logos

Bring the Action —  designing CTAs

Let’s Talk About Fonts— Font stories 3.