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

Smaller type elements

Smaller type elements Bad Practice
Smaller type elements Best Practice

Text size is one of the critical instruments needed to communicate typographic hierarchy. Headings should be more prominent than the body copy, and the body text size should be bigger than the secondary text size. Secondary text elements include captions, lesser labels, bylines (credit lines for the authors of an article), and other meta information.

Secondary text should be at least 2px smaller than the body text, but still easily readable. The size contrast should be strong enough so that users don't confuse secondary information with regular text. To further drive your point, add color contrast — for example, by using a lighter shade of gray. This will communicate lesser importance more clearly.[1]

Improve your UX & Product skills with interactive courses that actually work