lesson 3.2 - design principles: font style & size
Stop the font-pocalypse! Learn how to pick the perfect Google Fonts and sizes to make your UI readable, accessible, and professional. Feet or no feet? That is the question.
Ever tried reading a text message written in a super-fancy, swirly font while running for a bus? It's a nightmare! In today's lesson, we are diving into the world of typography. We are going to recall the difference between fonts that look like old books and fonts that look like modern apps. You will learn the secret "rules" professional designers use to make sure their text doesn't just look "cool," but is actually readable for everyone, including people with visual impairments. Let's make your UIs look professional and sharp!
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Recall the definitions of serif and sans serif font styles.
Describe the common characteristics of decorative fonts and why they should generally be avoided in body text.
Recall the standard font size requirements for readability on handheld vs. desktop devices.
The Connections and Theories (Conceptual Knowledge)
Analyse the relationship between font choice and accessibility for users with visual or cognitive needs.
Evaluate how consistency in font styles across multiple screens helps to retain user attention.
Analyse why sans serif fonts are technically better suited for screen reading than serif fonts.
The Skills and Methods (Procedural Knowledge)
Apply design principles to select appropriate font styles and sizes for a given vocational context.
Create a text-based layout that demonstrates a clear visual hierarchy using different font weights and sizes.
Apply house style rules to ensure typographic consistency in a UI design.
Digital Skill Focus: The digital skills focus for this lesson is Word Processing, specifically applying character formatting and styles to ensure readability and accessibility.
Mastering Typography in UI Design
In UI design, font style and font size are about much more than just looking "cool." They are technical tools used to ensure every user can read your information quickly and clearly. Professional designers follow strict rules to ensure their interfaces are accessible and intuitive.
1
Serif vs. Sans Serif
The first choice a designer makes is between two main categories of fonts:
Serif fonts: These have small decorative "feet" or "ticks" at the ends of the letters (e.g., Times New Roman). While they look classic and are great for printed books, they can look "blurry" on low-resolution digital screens.
Sans serif fonts: These have plain, clean ends (e.g., Arial, Roboto). Sans is French for "without." These fonts are the gold standard for digital interfaces (hint, hint) because they remain sharp and readable even on small smartphone screens.
2
Establishing Visual Hierarchy
Visual hierarchy is the way you guide a user's eye to the most important information first. You achieve this through:
Font Size: Larger text (Headings) grabs attention first. Smaller text (Body) is for detail.
Font Weight: Using Bold for important buttons or labels makes them stand out from regular text.
Consistency: Using the same font style for every heading across all four screens of a UI helps users feel confident and "in control."
3
Accessibility and Readability
Inclusive design means your UI works for everyone, including people with visual or cognitive impairments.
Avoid Decorative Fonts: Swirly, "handwritten," or complex fonts are hard for everyone to read and are a nightmare for people with dyslexia or low vision.
Minimum Sizes: For mobile devices, body text should never be smaller than 16px. Anything smaller causes eye strain.
White Space: Don't crowd your text! Leaving space around your fonts makes the interface feel uncluttered and easier to navigate.
4
Using Google Fonts
Since we can't always install new software, professional designers often use Google Fonts. These are free, high-quality fonts that work on any device. For a modern digital interface, look for "Sans Serif" families like
RobotoOpen SansMontserrat
Task Project: The EcoFlow Style Guide - Part 2
It's time to give EcoFlow a voice! Now that you've sorted the colours, you need to pick the perfect typography. Remember: if the user can't read your text, they won't save any water!
1
Get Organised!
Open your
style-guide-ecoFlow.docxOrganise your workspace
2
Explore Google Fonts
Go to Google Fonts. Use the "Filters" to select Sans Serif only. Look for fonts that feel "Clean," "Modern," and "Trustworthy" to match the EcoFlow brand brief. Look back at the introductory notes for the lesson to get some hints on which fonts to choose 🤔...
3
Set Your Hierarchy
You need to choose and record three specific font sizes for your app. In Section 3 of your Style Guide, record the name of the font you chose and define the following:
Heading 1: The largest size for screen titles.
Heading 2: For section headers.
Body Text: For the main information (Must be at least 16px!).
4
Justify Your Choices
Write a short paragraph explaining why you chose a Sans Serif font instead of a Decorative or Serif font. Mention readability and accessibility in your answer.
5
Accessibility Check
Record one specific rule you will follow to ensure your text is easy to read for users with visual impairments (e.g., "I will use a Bold weight for important buttons").
Outcome: Section 3 of your EcoFlow Style Guide is complete with professional font choices and clear justifications.
Application to the Component Sample PSA
In the Pedal Power Cycles project brief, typography is a major factor in ensuring the interface is usable for cyclists who might be viewing a screen quickly or outdoors. You must apply a clear visual hierarchy to the "Bicycle Hire" and "Route Planning" screens so that the most important information, like the price or distance, is the largest text on the screen. Using a consistent sans serif font style across all four screens is essential to meet the requirement for a professional house style. By selecting a high-quality Google Font like Montserrat and maintaining a minimum font size of 16px, you ensure that the UI is accessible for all users, including those with visual impairments, which is a key requirement of the Pearson-set Assignment.
Out of Lesson Learning
⭐ The Font Spotter
Imagine you are designing the "Bike Rental" screen for Pedal Power Cycles. The target audience includes both young children and elderly tourists. Look at the two font descriptions below and state which one is the most suitable for the "Rent Now" button. Briefly explain your choice using the word readability.
Imagine you are designing the "Bike Rental" screen for Pedal Power Cycles. The target audience includes both young children and elderly tourists. Look at the two font descriptions below and state which one is the most suitable for the "Rent Now" button. Briefly explain your choice using the word readability.
Option A: A decorative, thin, cursive font that looks like handwriting.
Option B: A bold, clean sans serif font like Roboto.
⭐⭐ Building the Hierarchy
For the "Route Summary" screen in the Pedal Power app, you need to display three pieces of information:
Assign a specific font size (in pixels) and font weight (e.g., Bold or Regular) to each of the three items above to create a clear visual hierarchy. Explain how these choices help a cyclist who is in a hurry.
For the "Route Summary" screen in the Pedal Power app, you need to display three pieces of information:
The Screen Title ("Your Cycle Route")
The Distance ("12.5 km")
A small tip ("Wear a helmet")
Assign a specific font size (in pixels) and font weight (e.g., Bold or Regular) to each of the three items above to create a clear visual hierarchy. Explain how these choices help a cyclist who is in a hurry.
⭐⭐⭐ Accessibility Audit
A designer for Pedal Power Cycles suggests using a 10px serif font for the "Terms and Conditions" section to save space on the mobile screen. Write a short email to the designer evaluating this suggestion. You must explain the technical problems with using serif fonts on small screens and why the font size chosen violates inclusive design principles. Suggest a specific Google Font alternative that would solve these issues.
A designer for Pedal Power Cycles suggests using a 10px serif font for the "Terms and Conditions" section to save space on the mobile screen. Write a short email to the designer evaluating this suggestion. You must explain the technical problems with using serif fonts on small screens and why the font size chosen violates inclusive design principles. Suggest a specific Google Font alternative that would solve these issues.
Last modified: January 8th, 2026
