A Manual of Type in UI and in Design System.

Typeface is an essential component in any design, it has become a part of our human life for communication purposes. For that reason, Type in UI plays a key role and acts as a UI itself. I would like to walk you through some points that might be helpful for designers working on digital products.
Let’s begin.

Type on Screen or Type in UI is the term used to indicate the type of text that is optimized for display on electronic screens or in the user interfaces (UI). To better understand what criteria Type in UI has to meet, let’s start by understanding the purpose and context of using Type in UI.

Please understand that UI is the same with other brand touchpoints (banners, posters, brochures, etc.), one of the main purposes of the UI is to transmit readable content, brand messages, useful information, etc. for users. Therefore, the typeface plays a key role in this, which helps convey the information, message, and spirit of the brand/product to the user.

More specifically, the type is used in UI with two main purposes: Body text and Title (Heading)

However, not any typeface can be used in the UI, there are many factors to evaluate the suitability of a typeface for a specific UI. There are some obvious reasons why you can’t use an artistic handscript/handlettering typefaces for UI of a bank product.

Now consider the technical perspective, how to evaluate a typeface for a smooth reading experience in the UI? What are the basic criteria?

1. Legibility

Legibility is the first and most important criterion when evaluating a typeface because the main purpose of Type in UI is to read, not only that but also to read extremely easily and quickly.

First, let us consider the classification of typeface:

Sort by the level of detail & scribbling of each word in the class from many to few, we have:

Clearly, Decorative & Script are two classes that cannot be used as body text in UI because they have unfamiliar forms & styles of writing that are not optimal for ease of reading. These classes are only used for large special titles, but in the modern UI design, they rarely use these two classes.

The other two classes, Serif & Sans Serif, can support reading.

For Serif, because their common characteristics are often serious and formal, a serif is suitable for use as body text in text messages, articles, magazines or financial information. In the remaining cases, they are often used as titles.

For Sans Serif (Also known as the Grotesque / Grotesk), because of the serif-less and more simplified details type forms than Serif, they become more friendly, modern and sometimes more fun. Sans Serif is widely used and popular in modern UI Design, including a few big names like Helvetica, Arial, San Francisco, Roboto, Segoe UI, etc.

Now let’s dig into the nature of a typeface to capture the criteria when evaluating Type in UI.

a. Distinguishable Letterforms

Let’s take these Sans Serif typefaces as an example as follows:

These are two different typefaces, the above line is set to Arial and the bottom line is Helvetica.

Although they possess many similar lines, if you look closely, there will be many differences such as the letters a, f, r, and t. As can be seen, for the sans serif typefaces, although they share many characteristics, they still have their own unique designs that make up the individual voices of each typeface. Identifying these “unique voices” helps your typeface impress users, increase brand/product identity, and help them remember the typeface of a product. For example, brand X uses a typeface with the letter t cut at the top and the brand Y uses a typeface with no tail.

Besides, we should pay attention to the words that can easily be confused when placed side by side, see the example below:

First and second time look at the above text, what can you read?

Ill, lII, lll, III, ||| ?

The correct answer is the letter “i” capitalized “I” and followed by two “L” written “l” and ending with the “|” sign. Although if you look very carefully, you can see that the “i” when capitalized will have a thicker stroke than the lower “L”, such an insignificant difference cannot make reading easier.

So what is the solution? Take a look at IBM Plex Sans:

IBM designed the capital “i” by adding a 2-headed serif and adding a tail to the lowercase “L”, which made the “Ill” completely readable.
Let’s come up with another example with the word “rn” and “m”:

With this small size, we can confuse “rn” to “m” because these 3 words have a structure that is almost identical to each other.

Lesson learned: Pay close attention to the letters and characters in the typeface, put them together and consider many use cases that can reduce legibility.

b. Type Properties & Structure

A typeface optimized for body text must meet the following requirements:

Because IBM Plex Serif is optimized for UI, it correlates its X / Cap smaller than ArnhemFine on the right, which is designed to be a display type.

• Contrast: The larger the contrast between the boldest and the lightest stroke, the greater the contrast is, the lower the readability and poor legibility.

Despite the same structure & form but Beatrice Display is optimized for Display Type, so it has contrast at maximum (dramatically), while Beatrice is designed to fit body text so it has moderate contrast, hardly noticeable if glance.

• Leading / Kerning: The space between lines of text and stretching between letters (kerning), this is the most complicated part of designing a typeface, so be careful to use carefully typed typefaces. See the following example:

What do you read? “T ornado” is Tornado? Since the T and o are not good, the reader will feel uncomfortable, confused and confused when reading.

In type design, there will be a lot of letters with form & structure that need to be cleverly arranged together to create the best legibility, so the role of kerning in the typeface is not small.

• Micro Details: These are small details but contribute greatly to make reading easier, or can be added to the characteristic (clearer personality) for the typeface.

Notice the stem of the letter “a” in Oppo Sans, at a large size we can see that this stem is curved slightly towards the left, which helps Oppo Sans to have more humanist and support for reading direction in the text:

2. Flexibility

In “Type in UI”, Flexibility is also called Responsive Typography, which means the optimal ability to read typefaces in all different environments. Commonly used environments in the UI can include:

• Super small like Smart wears (Apple Watch, Samsung Gear, etc.)

• Moderate as Smartphone (iPhone, Pixel, etc.)

• Big and medium as Tablet (iPad, Galaxy Tab, etc.)

• Large like Desktop (MacBook Pro, Surface, etc.)

For large type families, serving many different product lines such as San Francisco, we will see the following family families:

• SF UI: Serves for displaying body text on iOS, tvOS, and macOS

• SF UI Display: Serving media, advertising or title / heading publications on UI.

There are three main factors for evaluating the Flexibility of a typeface:

a. Weight

Weight is the thin and bold type of a typeface, we have the following types arranged in the thinnest to darkest order:

• Thin

• ExtraLight / UltraLight

• Light

• Normal / Regular

• Medium

• SemiBold / DemiBold

• Bold

• ExtraBold / Ultrabold

• Black

A carefully crafted typeface will have all or most of the above weight types. In UI Design, we often care about Regular, Medium and Bold styles, because these 3 models have moderate thin/bold, can be used in many different sizes.

For short texts such as Title or Subtitle: Most weights can be used in large or medium size, however for small size like 8–10pt, weight Medium or Bold is recommended. This is because they will keep legibility better than lighter weights.

For paragraphs or paragraphs of 2 or 3 lines length: Notice that in this case, regular paragraphs form type fabrics, which can be interpreted as cloths with many tiny holes made by negative space in the letters. Moderately thin weights like Regular or Medium will outperform Bold because the type fabrics will have moderate holes, create some breathing space for the paragraph, thereby making reading easier.

b. Width

The width and width of the typeface, we have the following types in the narrowest to the widest order:

• UltraCondensed

• ExtraCondensed

• SemiCondensed

• Condensed

• SemiExpanded

• Expanded

• UltraExpanded

Normally, body text doesn’t have much to do with the widths mentioned above, but for Title/Heading, the combination of using Width helps to enhance the aesthetic/brand identity for the product.

c. Workable in various sizes

When using typefaces in UI, we have to give them many different sizes from big to small, the main purpose is to create a better hierarchy in the information. Therefore, the typeface must respond to having good legibility of all sizes.

As such, we have discussed Legibility — Flexibility and the main criteria for evaluating Type in UI. In addition, there are a number of other features that make typeface more effective in UI, such as:

• Opentype Features

Opentype is a new horizon for modern typography technology, which allows designers to cram dozens of cool features in the file font. Features include:

• Multi-language Support

Most typefaces in the world support English and some languages use other popular Latin characters such as French, German, Spanish, etc. So, what about cultures don’t use those languages? Especially like Vietnam, although we still own the Latin script, Vietnamese is much more complicated with accented glyphs (letters that use diacritics) such as acute, grave, hook, tilde, dot below or horn and circumflex as letters â ê ư ơ. Therefore, when selecting UI typeface for specific markets like Vietnam, there must be careful consideration of the cases of accented glyphs, avoiding the “sticking” marks into each other in multiple lines of text.

Design System is a large structure, in which UI and “Type in UI” are smaller components. After we have finished setting up Type in UI, consider how that typeface will work in a Design System.

Type in DS is construed as a series of usage rules. These rules include:

• Family: Weights & Styles

• Alignment

• Text Styles & Scales

• Color

1. Family: Weights & Styles

A Design System can have a lot of Text Styles, depending on the complexity of the DS, but as mentioned in (1), we should keep a limited number of Text Styles to ensure the best Consistency in DS.

However, it should be noted that the type family should have a limited number of weight & styles that are not too many and not too small to ensure consistency in DS. For example, if a family type has up to 36 typefaces as the example below, the DS may become unnecessarily disorder:

2. Alignment:

Specifying the case of the case, we often see there are 4 common types of characters: Left, Middle, Right, and equally spacing. To optimize reading for typefaces using Latin character sets, the text is often left, right and sometimes centered.

In Design System, the designer must specify when the text is left-aligned, right-aligned and when to center.

3. Text Styles & Scales

After we have the type family, we need to set each font type in family specific roles (Text Style) by relying on the nature of each font. Setting a Text Style is very important in Design System because it helps people working with DS easily understand how to use typeface in DS and keep the DS consistent.

A Design System can have a lot of Text Styles, depending on the complexity of the DS, but as mentioned in (1), we should keep a limited number of Text Styles to ensure the best Consistency in DS.

So what kind of factor does Text Style prescribe? Please pay attention to the following details:

• Style font: Regular or Italic

• Font weight: Light, Regular, Medium, …

• Font size: 8px, 16px, 24px, …

• Line height: auto, 16px, 24px, …

4. Color

In addition to creating hierarchies by weight, size & style, we can use color elements to place a specific role for a typeface in the typeface.

In Design System, we will often see cases using typefaces for:

• Notice: Error, Success, Warning, etc.

• Fields: Input fields, paragraph boxes, etc.

• States: Active, inactive, disabled, etc.

In the above example, we can see that 3 colors are used to create hierarchies:

• Black: Use for input like “type in Design System” and “type system in compiler design”, this is the color for the text in the default state.

• Gray: Use in buttons such as “Search with Google”, this gray color indicates that the button is inactive.

• Blue: For the bottom hyperlinks like “English” or “Français”, this green refers to the text is clickable and leads to another link.

Today, in large companies and corporations, to create a “unique voice” with higher brand identity, customizing typeface is becoming an essential trend in large systems. Some may include:

Apple Human Design Guideline with San Francisco

Google Material Design with Google Sans & Roboto

Samsung Design with Samsung Sharp Sans & Samsung One

Airbnb Design with Airbnb Cereal

Uber Design with Uber Move

As can be seen, there are two approaches to the type in Design System, which are:

• Use only one typeface for both Display & Body Text (A) (Airbnb)

• Use two typefaces, one for Display and one for Body Text (B) (Samsung)

For the approach (A), because the typeface must meet both the purposes of Display and Body Text, the neutralization between these two purposes makes the typeface neutral, on the one hand, can serve every item well. On the other hand, on the other hand, the strong characteristic is inhibited when used for display.

For the approach (B), because each typeface is clearly assigned a purpose, it maximizes its own nature, but if the Design System does not set rules using a good type, this is easy leads to a lack of consistency in DS.

So, we have fully discussed Type in Design System and Type in UI, thank you for reading.

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

A Manual of Type in UI and in Design System.

Research & References of A Manual of Type in UI and in Design System.|A&C Accounting And Tax Services
Source

Share on Facebook

Tweet

Follow us