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 Course
Course

Typography

Cameron Chapman
Cameron Chapman
Learn typography fundamentals, from typeface and font selection to layout and spatial arrangement, to create captivating designs that communicate powerfully.
UX Design Foundations Course
Popular
Course

UX Design Foundations

Gene Kamenez
Gene Kamenez
Learn UX design basics to acquire a solid foundation in UX design principles. Acquire the skills needed for product development and improving user experience.
Design Terminology Course
Course

Design Terminology

Alesya Dzenga
Alesya Dzenga
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.
UI Components I Course
Course

UI Components I

Colin Michael Pace
Colin Michael Pace
Learn to create user-friendly interfaces using core UI components, building a solid foundation for designing intuitive and efficient digital products.
Color Psychology Course
Course

Color Psychology

Cameron Chapman
Cameron Chapman
Learn how color influences perception, emotion, and behavior. Discover how to apply color psychology to design more impactful and engaging experiences.
Common Design Patterns Course
Course

Common Design Patterns

Gene Kamenez
Gene Kamenez
Learn design patterns most valued in product development to create intuitive, visually compelling experiences that seamlessly blend form and function.
Accessibility Foundations Course
Course

Accessibility Foundations

Ljubisa Kukulj
Ljubisa Kukulj
Learn the fundamentals of digital accessibility and how to create inclusive experiences for all users. Explore key principles, tools, and best practices.
Wireframing Course
Course

Wireframing

Colin Michael Pace
Colin Michael Pace
Learn to create effective wireframes that seamlessly integrate into your design workflows, improving communication and driving better design outcomes.
UI Components II Course
Course

UI Components II

Colin Michael Pace
Colin Michael Pace
Learn advanced techniques to design dynamic, scalable interfaces using optimized UI components and streamlined navigation for better user experiences.
Design Composition Course
Course

Design Composition

Gene Kamenez
Gene Kamenez
Learn the fundamental principles of visual layout, balance, and structure to create compelling and effective design compositions that engage and intrigue users.
Mobile Design Course
Course

Mobile Design

Denis Jeliazkov
Denis Jeliazkov
Learn mobile UI/UX patterns, workflows, and platform-specific strategies to create exceptional, user-friendly mobile experiences across different devices.
UX Design Patterns with Checklist Design Course
Course

UX Design Patterns with Checklist Design

George Hatzis
George Hatzis
Learn common UX design patterns and how to apply them with practical checklists, ensuring the creation of intuitive, user-friendly, and exceptional interfaces.
HTML Foundations Course
Course

HTML Foundations

Yan Sokalau
Yan Sokalau
Learn the fundamentals of HTML, from basic formatting and structure to advanced elements and best practices, to create accessible and responsive web pages.
CSS Foundations Course
Course

CSS Foundations

Yan Sokalau
Yan Sokalau
Learn the basics of CSS, including the box model, element style, and content positioning, to improve communication, design handoff, and web decision-making.
Introduction to Figma Course
Course

Introduction to Figma

Gene Kamenez
Gene Kamenez
Learn essential Figma tools like layers, styling, typography, and images. Master the basics every UX designer needs to create clean, user-friendly designs.
3D Design Foundations Course
Course

3D Design Foundations

Learn essential 3D design principles, from spatial thinking and dimensional relationships to form, lighting, and texture, for a solid foundation in the field.
Apple Human Interface Guidelines Course
Course

Apple Human Interface Guidelines

Denis Jeliazkov
Denis Jeliazkov
Learn Apple’s Human Interface Guidelines to design modern, high-performing apps, focusing on UI principles and best practices for creating effective interfaces.
Introduction to Design Audits Course
Course

Introduction to Design Audits

Romina Kavcic
Romina Kavcic
Learn the art of systematic design evaluation to improve consistency, effectiveness, and create more user-centered products that meet user expectations.
Government Design Foundations Course
Course

Government Design Foundations

Fouad Jallouli
Fouad Jallouli
Learn best practices and core principles for government design to create impactful, user-centered digital services that improve accessibility and efficiency.
KPIs & OKRs for Products Course
Course

KPIs & OKRs for Products

Rosie Hoggmascall
Rosie Hoggmascall
Transform product decisions using data-driven frameworks that align teams, optimize processes, and drive measurable outcomes for improved product success.
Improve your UX & Product skills with interactive courses that actually work

FAQs

What’s the difference between font size and line height?

Font size refers to character height, while line height is the vertical space between lines of text, both affecting readability.


Is it better to use pixels or rems for font size in web design?

Rems are preferred for scalability and accessibility, as they adapt to the user’s root font size settings.


How does font size impact mobile design?

Small font sizes can reduce readability on small screens, so mobile interfaces often use slightly larger or more adjustable type.

<?xml version="1.0" encoding="utf-8"?>