Base Font Size

The base font size is the single anchor value every other size in your modular type scale multiplies from or divides by. Set it at 16 pixels for web products and your chosen ratio generates the full ladder of sizes with mathematical precision. A 1.25 ratio on 16 pixels produces 12.8 for small text rounded to 13, 10.24 for captions, 20 for lead paragraphs, 25 for small headings, 31 for medium headings, 39 for large headings, 49 for page titles, and 61 for hero displays. The base sits at the root of your token structure. Raw tokens reference the base. Semantic tokens reference the raw tokens. Component tokens reference the semantic ones. This chain ensures that one adjustment to the base updates captions in tables, headings in heroes, and body copy in long form articles without opening multiple files. The base turns a modular type scale from a design exercise into a product long governance tool that survives team changes and feature creep.

The base font size is not a flexible knob you turn whenever a screenshot looks off. It is not the size you choose to match a competitor interface like copying Vercel because their dashboard looks tight. It is not something you set differently for mobile and desktop in separate token files. It is not 14 pixels no matter how dense your CRM needs to feel. It is not a value stored in absolute pixels that ignores user font preferences. It is not the output of your scale but the input. It is not a decision you revisit every design critique. Teams that treat the base as movable create typography graveyards full of one off sizes that no token system can rescue. The base exists to force discipline. Without that discipline your ratio becomes meaningless and your system collapses into the same mess you tried to escape.

Stripe executed this perfectly in their 2023 redesign of the Stripe Billing interface. They locked 16 pixels as the base with a 1.25 ratio and generated their token set accordingly. Body text landed at 16 pixels. Their small UI text hit 13 pixels. Hero marketing text scaled to 61 pixels. Six months into usage they noticed power users preferred larger text for long sessions. Instead of tweaking individual components they raised the base to 16.5 pixels in their central design token repository. The update flowed through Figma variables into the Tailwind config and updated every surface from the dashboard to the public marketing pages to the API documentation. No exceptions. No one off overrides. Vercel followed a tighter path in their 2021 to 2022 transition to the Geist type scale. They chose 15.5 pixels as base with 1.125 ratio to keep the interface feeling compact like a terminal. This allowed their small text to stay at 11 pixels for metadata while their display sizes provided clear hierarchy without wasting vertical space. The base choice made their dense admin panels readable for eight hour shifts. Material Design 3 set their base at 16 pixels in the 2021 release and paired it with both static and dynamic scaling rules for Android and web. This let apps like YouTube Studio adjust the base per user preference while keeping all component tokens valid. Shopify Polaris version 8 in 2022 lowered their admin base to 15 pixels to fit more content in merchant dashboards but kept the marketing site at 16. IBM Carbon has defended a 16 pixel base since the 2018 launch through four major updates. Each example shows the base as a deliberate structural choice made once and respected for years.

Deploy your base font size before you create a single text style in Figma or a single class in Tailwind. Define it at the html level in CSS using rem so that a user who sets their browser default to 20 pixels sees your entire scale scale up proportionally. Create a Figma number variable called base size and build every other size as an alias that multiplies that value. Use the locked base in any product that will ship more than five screens or last longer than six months. The base prevents the slow creep of arbitrary sizes that kills most type systems by year two. Use it when you implement fluid typography with clamp functions because the base gives you solid min and max values calculated from real ratio steps instead of guesses. Use it to support multiple density modes by swapping base values in your token modes without changing class names or style names. Use it the moment you commit to quarterly governance because the base becomes the single lever you pull when the scale needs tuning. Avoid setting a fixed base during the first phase of brand discovery when you are mocking up six different homepage variations with different ratios and pairings. Do not rely on one base if your product portfolio includes both a dense analytics platform used by power users for hours and a light editorial site for casual readers. Those require separate systems with separate bases to match their density signals. Never set your base below 16 pixels for body text on public web products. Apple made that mistake in the 2014 iOS 8 update by shipping smaller defaults that triggered accessibility issues and user complaints that took until 2017 to fully address. The base is your first line of defense against those problems. Set it. Document it. Govern it quarterly.

Lock your base font size once treat it as law and your modular scale will maintain hierarchy long after the original designers have moved on.