Elements
Typography can be an intimidating subject, but it doesn't have to be. You only need to know a little to make a big difference in the stuff you do every day.
🖍 Why typography is important
Typography is not about fonts alone. It’s not about type size, margins, spacing, scales or color. Typography is about organizing information and how we transfer this information to the reader. Size, colors and fonts are just tools that help us put this information into the right shape. And as we will see, all these tools must work together as a whole. None is independent of the others. Web designers and web developers alike need to take a step back from merely choosing fonts and take a look at the bigger picture that typography actually is.
✔️ Typeface
Can you use any typeface you like and go crazy 🍌?!? Sounds fun, but that’s not really the case in our products. You should use only one typeface throughout your UI, and we recommend that you stick with the built-in default typeface for each specific client.
Why stick to the default? The built-in default is also called a ‘native typeface’. We use native typefaces for almost all our in-product experiences. Working with native means that the variations of fonts in a specific typeface have been refined to work across a wide range of supported platforms, screen sizes and resolutions. This ensures that the UI is optimized to be highly legible, readable and performs well in any size and on every screen of Novacura products.
Why should I only use one typeface? Stick to one typeface until you have achieved mastery. Using two or more typefaces successfully together requires some understanding in how the layout will be affected, and if the typefaces work in any size and weight. It’s kind of tricky.
Note: The native typefaces appear in many places on devices and may therefore not stand out from a branding perspective, but, will provide a more familiar environment for the user. When the user feels more familiar, the overall user experience is improved.
Follow these standards for the different clients:
Typeface | Client |
Roboto | Android |
San Francisco Pro | iOS |
Segoe UI | UWP & Studio |
Noto Sans | Portal, Web & Hub |
Helvetica Neue | Novacura website & branding |
📏 Alignment
Align your text properly and your UI will be more clear. Alignment is a term used to describe how text is positioned on the screen in relation to its margin. Alignment allows us to create order, organize and group elements in our products. There are four specific types of text alignments: left-aligned, centered, right-aligned and justified.
Left-aligned text in webpages and mobile applications are by default, to the left, with ragged edges on the right. In left-aligned text, the left margin is even and predictable and the right margin is irregular. It is the most legible option always, because word spaces are consistent.
When in doubt: always set your text left-aligned ragged right. Why? The majority of our users read from top to bottom, left to right, and by setting text left, the eye is able to find the edge and read text much more easily.
🎟 Text on colored backgrounds
If you’re applying color to your typography, you’ll want to make sure it complements other elements in the design, including the background. Colors that are too different, like an irritating pop-up ad with red text on a bright blue background. Even ones that are too similar, like white text on a bright background, can be hard on the eyes and bad for visibility. Have a look at the image below. This is a good example of how light-colored text, on bright backgrounds can affect the eye negatively.
❌To the left, we can see a sub-workflow that uses white text on a slightly bright green background. The color contrast is too low which makes it difficult for the user to read. The text is also aligned to the right margin, which increases the difficulty of reading even more in this case. Not optimal.
✅To the right, we have increased the contrast so that the reader can more easily distinguish the text from its background. We also aligned the text to the left margin, by setting text left, the eye is able to find the edge and read text much more easily.
👍🏼We recommend you always use black text for use on light backgrounds, and white text on dark backgrounds. Text color, of course, isn't limited to black and white, but it's the most common color combination for text. But be careful, using pure black and white can feel unnatural or cause eye strain.
🔎 Check if the contrast is high enough optically
When typographers talk about the color of the type, they don't simply mean what color our fonts are set to. They’re actually talking about how dense and heavy the type looks on the page. And most of the time, this isn’t considered by web designers and/or web developers. They simply put the text color and the background color into the contrast checker which says that the contrast is high enough. But that may not be the case with typography. Take a look at the following example.
In the example above, the contrast between the font color and the background is perfectly fine as they provide a contrast of 16:1 (Background in #FFFFFF, text in #212121). But we need to look at this from another perspective. The selected font is clearly too light and therefore doesn’t actually provide enough contrast. Light fonts are generally very hard to read and should be avoided for longer texts. Sometimes, a font comes in many weights and we can simply use one that’s heavier.
So, in the future, don’t just check the color contrast in a contrast checking tool, make sure that the type actually has enough contrast in our products. Contrast isn’t as simple as mathematically checking if the difference is large enough, we also need to check if the contrast is high enough optically.
Last updated