Typography 80/20 Analysis
One of the first challenges I faced designing YoPrint is to pick a font. I’m a software engineer and not a designer. Here is the 80/20 font selection that I have learned over the years. I will focus primarily on selecting a font for Single Page Applications.
Basics of Typography
Let me go over the basics of typography first. For a more in-depth article, you can check out the Material Typography page.
The picture above covers almost everything you need to know about typography. Let me draw your attention to a few important properties that you will most likely configure in your CSS.
Letter Spacing
For the most part, you will not be adjusting letter-spacing. The only time I had to adjust it is when I am using text-transform: uppercase. Adjusting the letter spacing will improve the readability of uppercase text.
Baseline
The baseline is the imaginary line the text sits on. If you use flex-box to style your SPA as I did, then this is what justify-content: baseline does. It aligns your text to the baseline, especially when you have text of multiple sizes.
Line Height
If you have used a ruled otebook, you know what a line-height is. Line height is simply the space between the rules. Here are a few rules you can use to help you get good line-height value:
- Line height should be 140% — 180% for body text. For a 16px text, you will need 22px — 24px line height
- Line length should be 70–80 characters. Longer than this, you should increase your line height to improve readability.
- Smaller fonts will need a line height of more than 180% to improve readability
Use a CSS Framework
I know this article is supposed to be about typography, but using a CSS Framework goes a long way into saving you time to figuring out everything about typography for your SPA. A good CSS framework comes with sane defaults that you can use, saving you time.
My personal favorites are Tailwind and Material. Both of these frameworks are a good starting point for your project and have been given a great deal of thoughts in creating a good typographical hierarchy. YoPrint is built on Angular Material.
Selecting a Font
Even if you are using a CSS framework, it’s worth taking the time to select a font for your app. Here a few tips to keep in mind.
Use one font for headings and body
If you are like me, you are spoilt for choice. There are so many ways you can pair fonts to create interesting-looking UI. However, in lieu of experience and design acumen, you can just pick one font for both. You can always leverage on font-size, font-weight, color, letter-spacing, and line-height to create a hierarchy within your app.
Use a sans-serif font
When looking for a font, search for a sans-serif font. Sans-serif font will make your app look modern and clean. For example, the system font used on your Android or iOS devices is both sans-serif fonts. Android uses Roboto, while iOS uses Apple’s proprietary San Francisco font.
Use a Web Font or bundle your font
You will find that some CSS frameworks like to use system font. While this may be acceptable depending on the intended application, I personally prefer my app to look the same regardless of the device, browser, or operating system. To accomplish this, you can use a web-font provider like Google Fonts or just bundle the font within your app.
Caution: If you are bundling the font, ensure the font license allows you to do so.
Use Roboto or Open Sans or Inter
Whenever in doubt, just pick one of these two fonts, and you can’t go wrong. They are both available for free with Google Fonts, and they are both legible at all device sizes. If you feel like this is not an interesting choice, just remember that your priority is to communicate information to your customers in a legible manner. I personally use Roboto for YoPrint.
This article is an ultra-condensed 80/20 analysis for typography. Using these tricks, you can spend more time creating features and worry less about typography.
PS: You can always hire a designer later and have them choose the fonts for you 😃