It does seem simple on the surface that choosing a font for your next design project is no big deal, but the effect of typography in UX goes deeper than you think.
Whether you are working on a website or a digital product or marketing assets, it is imperative to get your message across clearly to the target audience. And, the kind of typography you choose can either make or break your communication. The intent of this post is to help you understand the following key points -
The word “typography” in English takes it root from the Greek language τύπος typos (‘impression’) and -γραφία -graphia (‘writing’).
According to Wikipedia,
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Many people use the words font and typeface interchangeably. However, there is definitely a difference between these.
In simplest terms, a Font is a part of a Typeface. So, for instance, Inter is a typeface — a complete set of sans serif characters with a common design principles. However, it comprises of fonts, each in a specific weight, style and size, with different levels of condensation as well as italic versions.
A typeface is a design style which comprises a myriad of characters of varying sizes and weight, whereas a font is a graphical representation of text character. Put simply, a typeface is a family of related fonts, while fonts refer to the weights, widths, and styles that constitute a typeface. — Jaye Hannah, Career Foundry
In case you want to learn more, check out this cool video -
You might have come across style guides or design systems wherein designers give complete details about the overall communication style including that of typography. Take a look at some examples here -
While understanding a typeface, one must also understand other key aspects like the following -
Mid line — Also termed as mean line, this is the line which tells where non-ascending lowercase letters terminate in a typeface. The distance between the baseline and the mean line is called the x-height.
Base line — This is the line upon which most letters “sit” and below which descenders extend.
If you see the above image, the upward stroke above the x-height in a lowercase letter like d, b, or h is the ascender. Fonts like Dawnora Headline has short ascenders which make the letters appear wider. The descender is the opposite: it reaches from the baseline to the descent in letters like q, p, and j.
Letter spacing — Also known as tracking, letter-spacing is an optically-consistent adjustment to the space between letters to change the visual density of a line or block of text.
Kerning — In order to produce an aesthetically pleasing result, kerning is used to adjust the space between characters in a proportional font. It’s sort of a process.
Kerning helps adjust the space between letterforms. The term, sometimes, is used to imply poor kerning when letters are placed too close together.
Leading — In context to digital products, leading is often referred to as line spacing or line-height. It is the space between multiple lines of type, which can be as few as two lines of type to, well, as many lines as needed. Leading is measured from baseline.
One of the keys to getting user experience right is communication. And, typography plays a big role here. If your users understand what your product does and are able to engage with it, your business will go a long way.
When it comes to text, you just go beyond readability. The typography you choose for your product and its branding must convey your product’s personality & mood. It should be able to evoke emotions subconsciously to help your users take desired actions.
Helps shape your brand’s personality —
Fonts have a voice of their own. What you use on your product/website, sort of talks about how your brand would be, if they were a person.
Curved vs sharp, straight vs inclined, thin vs bold, and a lot more criteria like these one, decide how your brand would come out to your visitors and customers.
Set expectations -
Depending upon how your brand is perceived, your users are bound to form bars of expectations from you.
This includes aspects like how professional your service would be, how approachable your people are, how flexible your processes are, how transparent your policies are and how reliable your promises are. The kind of typeface you use on your website/product, subconsciously decide what your users expect to see in you.
Creates the right visual hierarchy -
We cannot stress enough on this point. The combination of typefaces you uses, and the font sizes you choose, decide on the visual hierarchy of information on your web asset. That would impact the quickness and depth of your messaging strategy.
People absorb what they can skim through vividly. Typefaces and their sizes decide on which message would be absorbed and which ones will be filtered out of your readers’ minds.
Better conversions —
This is the direct result of the above point. The clearer and more accessible your core messages and CTA’s are, the better would be the conversion that you see.
Aesthetics without the graphics—
Typefaces chosen correctly, can fill up aesthetic gaps even if you are running short of appropriate graphics.
In fact, a lot many brands choose to go the only typeface way to reduce distractions by graphics and animation, while still maintaining a subtle sense of ‘looking good’.
For desktops: Use 16 px font or higher for body text. It’s not too big, and it’s comfortable to read.
For iOS devices: Use a text size that’s at least 11 points (it’s legible at a typical viewing distance without zooming).
For Android: Minimal readable font size is 12 sp, but it is highly recommended to use at least 14 sp for the main text.
While designing apps for iOS and macOS, Apple has a ton of typography guidelines which help deliver a great user experience.
Apples products use the San Francisco (SF) system font. The SF Pro variant is the system font in macOS. This ensures better legibility, clarity, and consistency with apps across Apple platforms.
For full detailed guidelines visit — https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/typography/
When designing specifically for iOS, there are different fonts you can use. Apple highly recommends these.
Like mentioned above, you will have to pay attention to tracking, leading, font sizes and weight. Go here to see the technical details for iOS typography — https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/
Typography theming allows you to create styles that work well with your brand’s overall personality. Start by defining a set of type scales which can be used across your app. Material components can use these type scales to style their individual text appearance.
Type Scale — This comprises a range of contrasting styles which support the needs of your product and its corresponding content. It includes a combination of thirteen styles that are supported by the type system. Type Scale design system has reusable categories of text, each with an intended application and meaning.
Use the Type Scale Generator by Google Fonts — You can create type scales and the corresponding code with it. Pick up any font and it will be automatically resized & optimized based on Material typography guidance for readability.
Here’s an example of Roboto type scale -
For full typography guidelines visit — https://material.io/design/typography/the-type-system.html#type-scale
When it comes to accessibility, its more than just choosing a legible typeface. When designing digital products for people with learning disabilities, dyslexia, poor vision & similar others, accessibility tops the chart. We need to make sure that text is as accessible as possible. Never use curvy, flashy fonts when it comes to developing such products. Some things to keep in mind -
Typefaces play a huge role in determining the UX of your digital product. Keep testing your interface with your target audience and design & iterate accordingly. You can’t go wrong when you listen to your users.