Font Size
Font size refers to the height of text characters, typically measured in points or pixels, and directly affects readability, visual hierarchy, and design.

Font size is the height of the text characters, which determines how big or small the text appears on screen or paper. It’s a key part of typography that affects how content is perceived, read, and interacted with. In digital interfaces, font size is measured in pixels (px), ems (em), rems (rem), or percentages, while print design uses points (pt).
Choosing font size is a big part of usability and accessibility. Text that’s too small can cause eye strain and make reading difficult, especially for users with visual impairments or on smaller screens. Text that’s too large can disrupt the layout or create visual clutter. Designers need to find a balance that meets both aesthetic and functional goals.
Font size is a foundation of visual hierarchy. Larger sizes are used for headings or important labels to draw attention, while smaller sizes are used for body text and supporting details. This helps users scan content efficiently and understand the structure of the information.
On the web, relative font sizes are preferred over fixed sizes because they adapt better to different devices, screen resolutions, and user settings. This makes interfaces more responsive and accessible as users can scale text to their preference or need without breaking the layout. CSS media queries can also adjust font sizes across breakpoints.
Standard guidelines suggest a minimum body text size of around 16px for web readability, but optimal sizes vary depending on the font, device, and context. For example, dense data tables may use slightly smaller text, while interfaces for older adults or children may use larger type. Accessibility standards like WCAG recommend allowing users to resize text up to 200% without losing content or functionality.
Font size is related to other typographic properties like line height, letter spacing and contrast. These work together to make text legible and comfortable to read. Adjusting font size in isolation without considering these other variables can lead to poor user experiences especially in longer reading contexts or content heavy interfaces.
Learn more about this in our Typography Course.
Key features of Font Size
- Determines the height and visual prominence of text
- Affects readability, accessibility, and user comfort
- Measured in pixels (px), ems (em), rems (rem), or points (pt)
- Plays a key role in creating visual hierarchy
- Responsive sizing improves usability across devices
- Subject to accessibility standards and user scaling preferences
- Works in conjunction with line height and spacing for legibility
Recommended resources
Courses
Typography
UX Design Foundations
Design Terminology
UI Components I
Color Psychology
Common Design Patterns
Accessibility Foundations
Wireframing
UI Components II
Design Composition
Mobile Design
UX Design Patterns with Checklist Design
HTML Foundations
CSS Foundations
Introduction to Figma
3D Design Foundations
Apple Human Interface Guidelines
Introduction to Design Audits
Government Design Foundations
KPIs & OKRs for Products
Lessons
Intro to Typography
Elements of Typography
Typographic Terms
Headings in Typography
Text Accessibility
Exercises
Projects

Raydario - Online Radio App

Desktop UI Button Design Kit

Type System for a Coding Community

Forever Homes Shelter Mobile App Design

Shahyti - food delivery app
FAQs
Font size refers to character height, while line height is the vertical space between lines of text, both affecting readability.
Rems are preferred for scalability and accessibility, as they adapt to the user’s root font size settings.
Small font sizes can reduce readability on small screens, so mobile interfaces often use slightly larger or more adjustable type.