Ultimate Guide for a Good UI: Typography

Jake Park
4 min readFeb 7, 2022

Typography is a language that conveys information more specifically and more accurately than other visual languages. Although icons or images can be a good method for expressing objects or landscapes, text is more efficient when expressing actions or concepts. In the same culture, it is the most used visual element because it is sure to convey the meaning.

In digital devices, typography serves a great purpose: to convey information and to induce action. In a digital product where user actions are directly connected to the business, good typography is important. In this article, we have summarized the use of Hangul typography in digital products with examples.

Font

Fonts are groups designed with consistent rules, and are called in various nouns such as typefaces, font families. Since the readability, legibility, and even the way of reading differ depending on the type of font, it is recommended to use one font to avoid unnecessarily distracting attention.

Weight

To express different visual hierarchies, use fonts that offer different weights. There are Black, Bold, Semibold, Medium, Regular, Light, etc., and among the contents to be expressed using the weight of the font, from the most important information to the least important information to the reader, the hierarchy is expressed according to the importance.

Color

Provide sufficient contrast so that users can quickly and accurately understand the text. In the service, text is often used in black text on a white background and inside buttons, and requires at least a WCAG-recommended 4.5:1 contrast and provides as much contrast as possible.

Line Height

Leading refers to the space between lines of text. Margins should be given as much as possible, since when multiple pieces of information are mixed in a small space, it is difficult for the human eye to identify the information. Give the top and bottom lines of text enough space to stick to each other and look like lines instead of pages. I usually recommend a font size of 1.6 x 1.6.

Letter Spacing

Tracking refers to the space between letters. As with leading, if related information is too far or too close to each other, it is difficult to identify the information, so proper kerning must be set. The larger the font size, the farther it looks, so you need to reduce the spacing. In general, I tend to give about -0.3 to the main body of 16pt~17pt.

Alignment

There are five types of line alignment. When there are center, both ends, right end, left end, and interlace, I usually use left end and center alignment a lot. Center alignment is easier to read for texts of 3 to 4 lines or less, but left-aligned text for lines of 5 or more lines is easier to read.

Library

You can use a variety of visual techniques using the properties of a font, but each time you use a new method, the whole becomes unmanageable. A typeface design system is what is needed to keep the visual technique with a consistent rule, to keep the overall consistency, and to help users have a sense of even rhythm. Although the names are different, they tend to be divided into similar concepts, and are usually divided into Display, Headline, Body, and Caption. The font size is based on the text, and the text size varies depending on media such as smartphones, tablets, laptops, PCs, TVs, and wall screens.

Digital Device Font (for Korean)

Hangul fonts optimized for various environments are limited. I tend to use the default fonts provided by major digital devices, and there are four major types of Hangul. There are Apple SD gothic NEO, a Korean font for iOS environment, Samsung One used in Samsung Galaxy devices, Source Sans used in Android-based devices, and Nanum Gothic of Naver, a representative web service.

You also like…

--

--