Typographic hierarchy
Also called visual hierarchy, type hierarchy, or type scale
Using differences in text size, weight, and color so people can tell at a glance what to read first, second, and last.
const FEATURES = ['Unlimited projects', 'Custom domains', 'Priority support'];
export function PlanCard() {
return (
<article className='w-72 rounded-2xl border p-6'>
{/* Level 3: small, uppercase, muted. Still a real heading. */}
<h3 className='text-xs font-semibold tracking-wider text-muted-foreground uppercase'>
Pro plan
</h3>
{/* Level 1: the biggest, boldest line is read first. */}
<p className='mt-2 text-4xl font-bold'>
$24
<span className='text-base font-normal text-muted-foreground'>
/month
</span>
</p>
{/* Level 2: smaller and lighter, but still 4.5:1 contrast. */}
<p className='mt-2 text-sm text-muted-foreground'>
For growing teams that ship every week.
</p>
<ul className='mt-4 space-y-2 text-sm font-medium'>
{FEATURES.map((feature) => (
<li key={feature}>{feature}</li>
))}
</ul>
</article>
);
}Fix the typographic hierarchy of the pricing card: an uppercase 12px 600-weight plan label with 0.06em letter spacing, a 36px 700-weight price, a 14px gray description at 4.5:1 contrast, and 14px feature rows in the primary text color. Mark the plan name up as a heading.
Paste into Layerwise or any AI coding tool.
What is Typographic hierarchy?
Typographic hierarchy ranks the text on a screen. The most important line, like a page title or a price, is the biggest and boldest; supporting text is smaller and lighter; labels and metadata are the smallest and most muted. When every line looks the same, people have to read everything to find what matters.
Use three or four levels from a type scale such as 12, 14, 16, 20, 24, and 32px, and change one or two of size, weight, and color at each step. Inside compact components like cards and table rows, weight and color often work better than size.
Muted text still needs contrast: gray secondary text should keep at least 4.5:1 against its background. Use real h1 to h3 heading elements as well, so screen reader users get the same structure that sighted readers see.
Related terms
All termsColor contrast
How much text stands out from its background, measured as a ratio from 1:1 to 21:1 and checked against the WCAG levels AA and AAA.
Card
A bordered, rounded container that groups one item’s image, title, details, and actions so it can sit in a list or grid with others.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Tabular numbers
A font setting that gives every digit the same width, so numbers line up in columns and timers or counters stop shifting as they change.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.