Good enough Applied Typography in UI Design- Part 1
Steve Jobs in his famous 2005 commencement speech shared his accidental passion for typography and how good typography paved the way for more personal computer adaptation.
IA writer, a pioneer in writing apps, shared that “95% of the information on the web is written language. It is logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.”
Learning the nuts and bolts of Typography is an invaluable skill for any product designer. I wanted to know about typography in UI Design. After weeks of researching, collecting and analyzing I made these comprehensive resources to learn & apply typography in UI design.
We will discuss in what are the objectives of applied typography, what are the factors you should look at when using typography, Common mistakes in applied typography, and how to choose typefaces in Part 1.
In part 2, we will discuss how to improve typesetting. In part 3, we will look for more tweaks & tips and how to optimize for development.
Objectives of Applied Typography
1. Effective Communication
2. Improve Reading Experience
Factors in Applied Typography
These are the factors we should look for when using typography in different use cases. Every small to big decision revolve around these factors. We will discuss them in detail in the coming writings.
- Medium
- Content Format
- Personality or Moods
- Language Support
- Numerals use cases
- Font Pairing Combinations
- Layout or Grid
- Size
- Kerning or Spacing between Individual Characters
- Line-Length or Width of Paragraph
- Leading or Line Height
- Reading or Scanning Patterns
- Line end structures
- Context or Purposes
- Weigh
- Alignment
- Contrast
- X-height
- Spacing
- Margin
- Whitespace
- Paragraph Spacing
- Horizontal & Vertical Rhythm
- Orphans & Widows
- Ligatures
- Hyphenation
- Punctuation style
- Development Factors
and many more ………
Common Mistakes in Applied Typography
- Too many fonts
- Too many font sizes
- Small font sizes
- Lower readability due to contrast.
- Not considering the design of Tabular numbers
- No proper Visual Hierarchy
- Lack of Whitespace
- Spacing method inconsistency
- Too much or too little space between Paragraphs
- Two Spaces between Sentences
- The text lines (line width) are too long or too narrow
- Line height(leading) too narrow
- Not Optimizing line height for each platform
- Failing to Kern Display type
- Negative letterspacing
- No content-specific design
- Content is not the centre of attention.
- Not considering Human reading or scanning Patterns
- Pictures are poorly placed and disrupt the reading's ease.
- Center Text alignment
- Orphans & Widows
- Underlining Titles instead of Italicizing them
- Incorrectly abbreviating AM and PM.
- Indiscernible links visited and non-visited links are not discerned.
- Using Dumb Quotes
- Failing to indent a bulleted list
- Poor responsive design
- No Vernacular Language Support
- Cross-platform Inconsistency
- Issues with loading web fonts — FOUT, FOIT, FOFT, FAUXANT styles,
- px, pt, em, rem different measurement methods..
- Development of knowledge gap of Designers
- Design knowledge gap of Developers.
and many more……
Part 1: How to choose a Typeface?
1. Context
What is the context of the project? Is it a blog or a news website? Is it for normal people or a group of nerds? Are you starting something that could go on for a few months or even years, like a magazine, or is it a one-off project, like a slide deck, or presentation? What categories of content do they want to serve? Is it for business purposes or NGO purposes? What category of people will it serve?
Find out the project’s scope.
2. Medium
What will be your primary medium where the user will see your content? Is it mobile or laptop or both? Will it be in android and iOS apps? Websites or Web apps? Do the user use it for low-tech countries? Are they KaiOS user?
Find out the user’s primary medium(s).
3. Content-Format
News, blogs, case studies, white papers, e-books, email, presentations, number heavy, text-heavy, essays, community, long-form writings, short format writing, interactive storytelling etc… What will be the projects’ majority content format?
Make a list of content formats that will be published.
4. Persona
What persona do you want to associate with the Content? What feelings do you want to give at first glance? What moods do you want to elicit? Luxurious, exclusivity or friendly, universal? Or corporate & modern or engineering & bold?
Make a list of personas that you want to associate with.
5. Language Support
Fonts need to support vernacular languages for vernacular people. Will the content be translated into vernacular languages? What language category it falls into? Which local scripts will the font support? Chinese or Devnagari? Cyrillic or Vietnamese? This is important while designing for the next billion users. Find out more about it in — the link.
Make a list of language(s) the project wants to support.
6. Figures/Numerals & Fractions use cases
Is your content will be Number heavy? Like dashboards, and spreadsheets? Test with font numerals rigorously. Put it on a really small size & test legibility. Check also the fractions.
- There are two common styles of figures: Old-style figures whose bodies match the x-height of the typeface and have ascenders and descenders, and lining figures that match the height of capital letters and don’t have ascenders and descenders. Since the digital revolution, lining figures are mostly the standard.
- Lining Figure is also divided in two. Their height is uniform. Proportional Figures have more even spacing and a more consistent appearance. They work much better in document-heavy numbers. Tabular Figures are set on a fixed width, and are perfect for use in tables and spreadsheets, especially when set in multiple columns and rows.
- Fractions — Is the font support Fractions or not?
Check if shortlisted fonts are supporting numeral & fraction use cases.
7. Font Pairing combination
⚡ Process of finding good combination
1️⃣ Find a typeface for main body text first using above process.
2️⃣ Find a few secondary typefaces for heading for possible combinations using same process.
3️⃣ Evaluate the combinations on various factors.
4️⃣ Test & Test. Try in different use cases. Rigorously.
5️⃣ Eliminate combinations.
⚡ Evaluation Factors
1️⃣Contrast. Uniformity. Harmony through contrast.
2️⃣Based on X-height. A similar X-height works better.
3️⃣Overall appearance. When in doubt in a close encounter, go with a more optically beautiful combination.
⚡ Tips — DO
✔️ you can do enough with 1 typeface.
✔️ Choosing 2 Typefaces is more popular.
✔️ When using two typefaces, use Superfamilies for great font combination & faster decisions. A superfamily is a set of typefaces that are crafted to work together in close harmony. Examples: Roboto - Roboto Slab. Merriweather - Merriweather Sans. Tisa Pro-Tisa Pro Sans
✔️Measure X-height. The more the x-height the taller & larger font appears. Use fonts that have more x-heights for Display. Similar X-height fonts combine better.
✔️ You can use both Sans-Serif or Serif for longer texts.
✔️ When in doubt for longer sections of text — use Serif. Serif is the traditional choice for book typography, but it also works well on-screen. Tend to be easy on the eyes for longer reading like news and magazine articles, and e-books.
✔️ Monospace fonts are great for development-related texts. It is easy to spot errors in this font. It took some time for readers to process. That’s why developers use it.
✔️ Combine a Serif with a Sans or vice versa. or a Slab with Serif.
✔️ For headlines and subheads, you can choose an expressive, unique, or even idiosyncratic font. These unconventional, high-contrast designs tend to work well. Their details and visual complexity help to attract the eye.
⚡ Tips — DON’T
❌ Generally avoid typefaces which have one weight or style. Why? You have a limit & the browser won’t render sometimes.
❌ Generally avoid more than 2 typefaces.
❌ Avoid using decorative, handwritten fonts in texts.
⚠️ You can choose more than 2 typefaces but that require more experience & knowledge to use.
⚠️ Long are the days gone of poor hardware in pc. These sayings are does not work anymore : 1.Sans-serif is better for the web. 2.Serif typefaces are easier to read.
Follow the process of finding typeface combinations rigorously.
Here’s an Example covering the above aspects:
Client — Gives a project brief, “I have a website blog. I want to redesign the whole website.”
Designer — Upon understanding every aspect of the brief, make it expandable.
We need to design a website for a blog with expected traffic of around 100,00 per month who look for up-to-date content that’s easy to digest and simple/quick to read. The topics of the website are technology, design, web development etc. Common types of content are articles, reviews, tutorials, interviews and shorter blog posts. The author of the content publishes quality content & does not focus much on the advertisement. still, there will be one ad displayed on the main post page. Everything else should enhance visitors’ reading experience. There are readers who are in Indonesia. The author will publish more articles in Indonesia’s regional languages. The author believes this should be done through typography rather than graphic elements. We’ll be building this website from scratch. The name of the website is tech-geek.
Part 2 and Part 3 are coming soon.
