Typography

A few musings on the discipline of Typography and a few fonts that I like.

•
#design #typography
Cover by xypnox

Cover by xypnox

Typography is the art and technique of arranging type. It is the method used to make text readable, legible, beautiful and meaningful. Good typography is readable. No matter how stylish and polished your font is, if it isn’t readable no one is gonna read it.

The beauty of type lies in its utility; prettiness without readability serves neither the author nor reader. - James Felici

The main way in which we style our texts is with fonts. Fonts are more or less a complete set of glyphs for characters that can be used to render the text.

Although fonts are the most common way to change the text, it is necessary to note that there are many many ways to make text look different without changing it’s font. Some examples are size, weight, kerning, color etc.

There are a ton of things related to typography including: stroke stem ligature etc. understanding of which is not necessary to make good design. All we need to know is which fonts and what style is necessary for the job at hand.

The basics

Use as little as required. This is a general advice while designing anything however this is especially true for typography. Many people go over the board when they discover the plethora of fonts available at their disposition, and they use every font they can find. Which ends up looking quite ugly.

Less is more

See which fonts go together, try to use a few or even a single font family. You can use styles such as caps, italics, weight, color etc to differentiate the text.

In comparison look into the same content with same alignment and positioning as before but the use of only Roboto font family:

Observe that even though it isn’t as eye-catching as the previous example, at least the eyes aren’t catching fire either i.e. it is far more readable to the user. Also note the usage of weight, color and kerning. They provide a guide for the eyes to follow, the main heading is the largest and bold, attracting the eye towards it. The paragraph then follows. The Navbar that cannot be confused with anything else due to its positioning at the top.

Similar things look similar different things look different. Buttons should have similar look and fonts, Links should be colored and highlighted similarly.

Simplicity is not just meant for the style, your content should also apply minimalism. You do not need many complicated words to explain something to the user. You can even use icons to make it more understandable. But do not over do it. Provide text wherever required and use clear language.

Color is a sensitive topic. Some people like this color some that. In typography it isn’t quite hard to decide what the colors should be. Firstly, any long form content should have a flat color; gradients and effects reduce legibility. Everything else can be based on the color scheme of the project. Say your blog had a red/warm color scheme, one example of using the color scheme could be:

Personal Picks

Here are a list of fonts that I really like. They are all free to use for everything.

Inter

The time I experienced this font I was in love. It is like a modern version of Helevetica with subtle improvements for visibility. This font can be used everywhere from headings to paragraphs to UI and brand text. The versatility and looks make this one of the best overall fonts out there.

Manrope

This is a pleasing font at all sizes. It is a mix of geometric and neo-grotesque, which gives it an average look. It is a versatile font and can be used in any situation. Various weights mean more flexibility. It sometimes looks awkward with a few specific characters, let us hope it gets better as it is an ongoing project.

Jost*

The geometric free font. It is a modern take on the classic Futura. It’s shape and proportions have a fresh feel to it. One of my most loved fonts. It makes for a great use anywhere font. With the advent of geometric fonts in modern design, Jost is a nice font to consider for your next design.

Iosevka

With a mechanical and elongated look, Iosevka is beautiful and readable. I use it more that I would like to admit. This is the default monospace font on my system and is used throughout the interface from coding and terminals to everywhere such as status bars. (Customizations on linux are usually referred to ricing. See r/unixporn for examples.) I also use this in my text editor Typora (theme here). In fact, the font used to type this article in is none other than Iosevka!

Lato

Lato is a humanist sans serif font. It’s rounded solid nature gives it vibes of summer. It is versatile and looks transparent in body while being distinct in headings. A truly universal typeface with support for several unicode languages, lato deserves the credit for the popularity it has.

HK Grotesk

HK Grotesk is a visually attractive and sharp grotesk sans typeface. It brovides a solid and industrial look. All caps looks particularly pleasing. A must use font to spice up the interface.

Playfair Display

A stylish and multipurpose heading and banner font. It looks funky and professional at the same time. It is balanced and restrained in a casual fashion. You should be careful not to use it everywhere though.

Roboto

The classic android font and one of the most used open fonts available. It is Google’s take on Helevetica, built for the 2.5 billion android devices, it was designed to be incredibly flexible and readable at the same time. A great font to use when you don’t know what to choose. There are other members of Roboto family that you can also check out: Roboto Slab, Roboto Condensed, and Roboto Mono.

Resources

There are various good places to look through to find both inspiration and advice regarding typography, here are the best ones I know:

And here are some places you can grab fonts for free:

I also have a gist of a list of fonts that I prepared a few months back while searching for fonts. It may turn out useful for some font hunters.

There are tons of more theory and practice in the field of typography, you can even go ahead and make your own font, like I did. But I feel that I have covered the most important aspects of typography here. And the provided links and resources are enough for a head-start.

“Type is a beautiful group of letters, not a group of beautiful letters.” - Matthew Carter

As always, suggestions and additions are welcome.

❦

Sooner or later, everything ends.

Comments