Weight Hierarchy

Weight hierarchy is the fixed assignment of specific font weights to every text role across your entire typography system. Your H1s lock at 700. Your H2s lock at 600. H3s sit at 500. Body text stays at 400. Captions and labels use 500 at small sizes to stop them from optically disappearing. These numbers are law. They apply to the marketing site, the mobile app, the admin dashboard, the documentation, and the pitch deck from last quarter. The moment you define them every designer and engineer stops debating whether this particular label should feel heavier today. Users absorb the pattern instantly. Bold text pulls their eyes first. Medium text frames the main point. Regular text delivers the actual reading. This is one of the five non negotiable pieces of a real typography system alongside the type scale, font pairings, spacing standards, and responsive behavior. Skip it and your beautiful ratios and pairings still fracture the moment three people touch the product.

Weight hierarchy is not picking weights by vibe. It is not bumping a heading to 700 because it looked better during last Friday's critique. It is not using every weight your font offers just because the variable slider goes from 100 to 900. It is not storing one set of decisions in Figma while engineers freestyle in code. That gap is exactly how brands develop multiple personalities. It is not ignoring how the same numerical weight feels completely different between fonts. Inter at 500 reads heavier than SF Pro at 500. Your hierarchy must adjust the token values per typeface instead of pretending the numbers are universal. Teams that treat weight as decoration instead of communication quickly watch their interfaces turn into visual soup where nothing stands out because everything does.

Stripe nailed this during their 2020 design system overhaul. They locked marketing headlines to 700 in their custom display face after weeks of user testing. Dashboard section titles use 600. Card body text uses 400. Labels inside forms use 500 at 13px with 0.02em of tracking. That exact combination shipped with Treasury in 2022, their Climate pages in 2023, and the Terminal hardware interface in 2024. The brand never wobbles even though separate teams own each surface. Dropbox Paper did the same in their 2021 redesign. An audit revealed seventeen different weight combinations across their docs and interface. They collapsed everything to four roles, turned them into tokens, and connected Figma straight to React. New features now launch with zero weight drift. Shopify Polaris updated their hierarchy again in 2023 when they refined their Inter adaptation. Headings moved to 700, supporting metadata to 500, body to 400. Internal metrics showed an 11 percent jump in task completion speed in the admin because users could scan hierarchies without thinking. Linear in 2024 runs an even tighter version. Every issue title is exactly 600. Comment threads use 400 with 500 reserved exclusively for interactive elements. The consistency lets them ship new views like their roadmap tool without a single meeting about typography. Apple codified their approach in the 2023 Human Interface Guidelines for SF Pro. Titles are 600, body is 400, footnote labels are 500 with positive tracking. That system runs on billions of devices without deviation.

Deploy weight hierarchy the day your product spans more than one surface or your team grows past two designers. Use it for any SaaS that ships weekly updates, any enterprise tool where trust depends on clarity, any brand with a marketing site plus an app plus documentation. Define it before you choose final fonts because the required contrast levels will eliminate certain pairings immediately. Do not deploy it on one month campaign sites that get archived after launch. Do not force it onto experimental branding projects that treat inconsistency as the entire point. Solo freelancers refreshing their personal portfolio every year get zero return from this discipline. The time spent auditing, testing, and documenting delivers nothing when the work has a thirty day shelf life.

Your hierarchy must also address how weight interacts with size, spacing, and environment. Heavy weights at large sizes need negative tracking of 0.015em to 0.025em or they feel loose. Small medium labels need positive tracking or they clump. Dark mode changes everything. The same 600 weight can read heavier against pure black due to halation so many teams drop headings one step or reduce opacity in those contexts. Variable fonts expand the precision. Instead of jumping from 400 to 500 you dial exact axis values like 450 or 550 for micro steps. Framer used this in their 2024 component library to create five distinct hierarchy levels that feel smoother than traditional jumps. Test the entire system in real layouts. Drop it into a dense analytics dashboard, a long form article, a mobile navigation drawer, and a checkout flow. If importance still pops and the eye flows in the correct order you are done. Most teams discover they need far fewer exceptions than they feared once the core rules are strong.

Audit your current product by collecting screenshots from every surface and tagging the weight of each text element. You will find chaos. Collapse it to the four or five roles that actually matter. Name the tokens after function, never after numbers. Use heading primary, content body, supporting label, ui interactive. These names survive font swaps. Push the tokens into CSS custom properties and your component library so they cannot be ignored. The best weight hierarchies feel invisible. Users never notice them yet they navigate faster, understand priority faster, and trust the product more.

Define your weight hierarchy once and every screen you ship afterward will feel like it came from the same brain.