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 f​onts 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 ✅

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.

Centered text 🆗

Centered text is best used to distinguish short typographic elements within a layout e.g. headings in pop-ups. However, it's not recommended for long text blocks. Centering makes text blocks difficult to read because both edges of the text block are ragged.

Right-aligned text ❌

Right-aligned text. Only use this if needed for the design, otherwise, don't. It must be noted that right alignment is presumably great for right-to-left languages like Arabic for all the reasons that left alignment is great for English, but that’s a topic for future products.

Justified text ❌

Justified text has a completely different appearance than the other types of alignment. Justified text aligns text with both the left and right margin and increases the space between words to fill the entire line, this results in rivers of white space between words. This type of alignment is something we strongly recommend you not to use in our products, due to the enormous negative impact on readability.

Tips

✔️When visual elements are aligned a composition can appear clear, confident, elegant, and trustworthy. When visual elements are out of align, it is noticeable, and can devalue a piece of work If done unintentionally.

✔️Build your type along one primary axis and align elements to the grid line: - For a vertical axis, align the left edge of your type. This will work regardless of font type or size. - For the horizontal axis, align on strongest horizontal element.

✔️90% of the time, use the same sort of alignment on the elements you're aligning. For example, a centered headline should not go with a left-aligned paragraph. This is because the unsymmetrical line lengths of the paragraph can give the headline the appearance that it’s slightly off-center.

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.