_0.png)
Regular digital interfaces come with a large variety of visuals, images, and graphics. What is common in all of these is that; they’re all made up of words. As teams consistently design and develop code for usable, frictionless interfaces using systems, it is necessary to ensure these words have a powerful foundation of typography backing them. Typography is inarguably one of the most essential aspects of a webpage and is one of the most basic building blocks of a UI. A successful design system needs to be built on a foundation of sound typographic understanding. Strategic typography makes content readable and legible.
In this blog, we will be discussing the basics of typography and asses the best ways of developing a font library that has adequate style to fit in both the present and future of a brand’s design system.
Typeface and Fonts
Before digging deep into further details, it is necessary to settle on the basics; fonts. Explore, compare, analyse and research to pick out the best options. It is important to pick a typeface that adds a personality to the app and aids in building brand awareness.
A typeface is the font family and fonts are the different members belonging to that family. Which is another way of saying that if a typeface is the name of the main text style, fonts are variations of that typeface. So, typefaces show a collection of related fonts whereas fonts depict the difference in the weight, width, and style of that particular typeface.
Also, while it may be tempting to use multiple typefaces in the UI library, it is best to stick to one or two font families at best; one for heading and the other for text styles. This helps to maintain consistency across the Design System.
Sizing typography
The correct use of typography requires using it invariably with an established well-defined hierarchy. Creating and enforcing this hierarchy requires a sizing scale that defines a base size and ratio that helps determine how size increases steadily, across different styles. This primarily works because, as the sizes increase, minor variations become unnoticeable. Instead, it is best to eliminate unnecessary similar sizes to ensure a broad range of usable sizes within the system.
Display font and Passage font
Display font is primarily for larger headings instead of body text. The body text used in passages or the content that comes under the display typeface is referred to as passage font. Body font or passage font is usually smaller in size because it is designed to be read and consumed in larger quantities.
Incorporating size and font together
Using both size and font together can help construct a system that looks somewhat like this -
- Headings
- Body Text
This method of giving a definitive size helps give the style count to a few specific core sizes. Titles, subtitles, body passages, and other elements can be arranged using a typography hierarchy to make it easier for readers to consume the information. This is more than enough to execute consistency, allowing flexibility in the design of UI components. Also, it is necessary to ensure that the size of the font is such that it doesn’t cause readability issues while maintaining its aesthetics.
A couple of key points to keep in mind when choosing display fonts and passage fonts are -
- Increase the font weight and size when selecting the display font to verify the character spacing.
- Stick to typefaces that go well with the display font and are readable in small text sizes when selecting passage fonts.
Font weight
Font weight helps to adjust how bulky or sleek a text is to appear on the screen. It is what determines whether the text is accessible as well as aesthetically appealing to the viewer/reader. Different font weights indicate important information and help in drawing attention to the same as well as help to maintain text hierarchy.
Also, extreme weights make a text difficult to read, especially if it's a body text. If the goal is to provide proper clarity of design, it is best to avoid weight-heavy texts, that are unnecessarily bulky and low on readability. However, in certain cases, boldening letters can help them stand out as well; depending on the size and font being implemented, such as for Heading I or Heading II.
Font Fallbacks
It is necessary to offer alternative options in chronological sequence if a font family is not accessible. They are referred to as "fallbacks.” In the event that a font family is unavailable, fallback options are available. The system runs smoothly because of the optional typefaces.
Text hierarchy and color
Text hierarchy is the order of arranging texts according to their size. It provides visual organization and makes the text easier for readers to skim. Titles, subtitles, body passages, and other elements can be arranged using a typography hierarchy to make it easier for readers to consume the information.
When smartly put, font color captures the reader's interest and directs them to read the content in random order.
Font Properties (Design Principles)
Line height: The entire height of all font letters, measured from top to bottom, is known as the "line height.”
Baseline: The horizontal line on which all the letters sit, that acts as a base.
Leading(line spacing): Leading is the space between two baselines.
Ascent: Some small letters are taller than others, and occasionally they are even taller than capital letters. Like l, b, and h. That extra top portion is ascent.
Descent: Some letters descend past the baseline. Like g, y, and q. This additional bottom portion is decent.
X-height: The height from the baseline to the tangent line where all small letters stand.
Cap-height: Cap-height is the height of the capital letter.
Letter spacing: Letter spacing is the distance between individual letters.
Line box: The line box is the box within which the font is placed with uniform paddings from both sides.
Tracking: For the content to flow in a rhythm, we use tracking. Tracking is done by checking letter alignment and character spacing.
Typography scaling
Typography scaling helps in creating a smooth and well balanced and friendly font sizing, using a wide range of type sizes related to each other, as they grow by a similar ratio. This helps in developing a typography system that is both adaptive as well as scalable. So, as scaling is carried out using ratios, we scale with 2x, 3x, etc. if size x is the smallest.
Typography scaling brings visual harmony. Scaling should be considered and tested when choosing specific typographies for a design system.
Responsive Typography
Design systems provide centrally-tuned responsive type sizes via a wide range of a predictable set of breakpoints. For body text, the size increases gradually. Similarly, large headings can also increase significantly across similar breakpoints.
However, it is best to avoid mixing up responsive typography with scaling. Scaling refers to the ranges that are available, while responsive typography refers to the capacity to adapt to various web settings.
Conclusion
The most important aspect when choosing typefaces for a design system should be its readability. Good typography serves its job by making the readers go through written content effortlessly. Readability is also how legible a typeface is in different sizes and proportions. When selecting a typeface, reflect on the kind of products the design system is going to serve. Think about the message the product is supposed to give. Browse through various websites and note the tone of voice. Check how it balances out with the chosen typography. A serious business such as the medical field cannot have a casual font. A product that has a friendly personality can go for a semi-decorative font. Don’t go overboard with the chosen typeface. Stick to what works.
Check the compatibility of the display font and text font, then pair them together. Give the font the hierarchy they deserve. Use Font Colors only when necessary. If working on creating an original typeface, check the font properties and apply the design principles. Always remember to give scales and present responsive typography. Then test it on real-time users and take feedback. Test as much as possible until you arrive at the number your team agrees upon.