Typography That Works Across Devices

A new designer has just been tasked with handling the typography portion of a project. Excited to contribute, they think, “This should be simple — I just learned this in my Bootcamp!”

But it’s not a single screen. The design is responsive, which means typography needs to scale across desktop, tablet, and mobile devices. They know they want consistency — common font sizes, a clear hierarchy, and cohesive styling — but as they begin, challenges pile up.

They start by setting up headings for the desktop view, feeling confident. Then they move on to the body text, only to discover the gap between the heading and body text is massive. They try to tweak font sizes and styling, but quickly realize that adjusting one screen throws off another.

In their eagerness, they pick too many fonts: a serif for headings, a sans-serif for body text, and a quirky display font for accents, thinking it will make the design more interesting. Instead, the result is chaos — nothing feels consistent.

Then come accessibility issues. Some headings are hard to read against certain backgrounds, and body text isn’t always legible for users with visual impairments. The design doesn’t meet basic accessibility standards, adding another layer of stress.

Additionally, what looked okay on desktop now appears awkward on tablet and mobile. Panic sets in as they glance at the clock — their design meeting is minutes away. They need to explain not only the hierarchy but also the rationale behind every typography choice, including style, size, and specific considerations. Anxiety builds, and they wonder: “How do I fix this? Where do I even start?”

This scenario is all too familiar for new designers, especially those juggling multiple devices while trying to maintain consistency and accessibility. But it also highlights a key skill that can save time, reduce frustration, and elevate your work: scaling typography effectively.

Why Scaling Typography Matters

Typography isn’t just decoration — it’s communication. The way text is scaled, organized, and displayed tells the user what’s important, what’s secondary, and how to interact with your design. When typography isn’t handled correctly:

  • Users get lost. They can’t tell what’s important or secondary.

  • Designers look unpolished. Inconsistent fonts and spacing weaken trust in your product.

  • Accessibility suffers. If the text is too small, low contrast, or poorly scaled, some users literally can’t read or use your product.

Good typography is invisible; it guides users seamlessly. Poor typography creates friction, confusion, and frustration.

The Common Traps

This is where beginners usually stumble:

  • Too many fonts. Thinking more fonts = more creativity, when it really just creates chaos.

  • Fixed pixel sizes. Looks fine on desktop, breaks horribly on mobile.

  • Huge gaps between headings and body text. Without proportional scaling, nothing feels connected.

  • Low contrast. Sleek on the mockup, unusable in the real world.

And here’s the thing — our new designer fell into every one of these traps. But there are tools and approaches that can rescue them.

Scaling the Right Way

The designer takes a step back. Instead of panicking, they remember some of the concepts they brushed past in Bootcamp. This time, they decide to actually apply them.

Start with hierarchy. Before tweaking sizes, they define the roles: H1 for page titles, H2 for section headings, H3 for subsections, body text, and captions. It’s like laying out the skeleton before worrying about the skin.

Limit fonts. Out go the three mismatched choices. They settle on one typeface for headings and one for body text, using weights (bold, regular, italic) to add variety without losing cohesion.

Use relative units. Instead of locking everything in pixels, they switch to rem and em. Body text becomes 1rem (the root size), while headings scale up proportionally. For smaller labels or captions, em works perfectly since it’s relative to the parent element. This way, resizing the root size scales everything — no frantic resizing on every breakpoint.

💡 But here’s the catch: Figma only supports px. That’s fine — the designer still works in px inside Figma, but when documenting the system, they translate those px values into rem. Developers now see exactly how the design should scale in code, while the designer doesn’t have to fight against the tool.

Apply modular or fluid scales. They use a ratio (like 1.5×) so each heading grows consistently. For example:

  • Body = 1rem (16px in Figma)

  • H3 = 1.5rem (24px in Figma)

  • H2 = 2rem (32px in Figma)

  • H1 = 3rem (48px in Figma)

On desktop, this creates strong visual hierarchy. On mobile, fluid scaling keeps everything proportional without breaking.

Test accessibility early. They run text through a contrast checker, adjust colors, and preview on an actual phone instead of relying on Figma alone. Suddenly, headings are readable outdoors, and body text works for users who rely on larger default sizes.

A Simple Scale in Action

Here’s the kind of scale that saves our designer from last-minute panic:

Element        Size (px)      Size (rem)    Why It Works
Body Text        16px      1rem          Base size, easy to read, scales predictably
Label        12px      0.75rem          Supporting text, stays relative
H3        24px      1.5rem          Small heading, proportional
H2         32px      2rem          Medium heading, strong but balanced
H1        48px      3rem         Page title, clear hierarchy

Line height stays around 1.5× for readability, and everything is set in rem, so scaling is effortless across devices.

Putting It All Together

By applying these principles, the designer walks into their meeting prepared. Instead of explaining a jumbled mess of choices, they can confidently show a system: consistent hierarchy, scalable units, tested accessibility, and a clean font strategy.

What started as chaos turned into clarity — not because they “got lucky,” but because they used a framework that works across devices.

Final Thoughts

Typography isn’t about making things look cool. It’s about guiding users. Strong hierarchy, consistent scaling, and accessible choices make your design polished and usable.

Most beginners struggle with typography, but once you understand how to scale it effectively — with tools like rem, em, and modular scales — it becomes one of the fastest ways to elevate your work from amateur to professional.

Helping UX Designers bridge gaps and grow

Comments

Post a Comment

Popular posts from this blog

Margins and Gutters: Spacing That Brings Your Grid to Life

Image
When it comes to grid-based design, margins and gutters are often the unsung heroes. While columns define where your content sits, margins and gutters define how your content breathes and interacts within that space. They create the invisible structure that guides the eye and helps users understand the hierarchy and flow of information. Understanding how to size and justify these values is a key part of designing flexible, readable layouts, especially when you’re building across multiple screen sizes. “Eyeballing it” won’t cut it when a stakeholder asks why your spacing feels off. You should be able to explain why you chose the numbers you did, and that’s what this post is all about. What Are Margins and Gutters? Gutters are the spaces between columns. They keep content from feeling cramped and ensure text and images don’t run into each other. Margins are the space on the outer edges of the grid. They keep content from hugging the edges of the screen and give your layout room to brea...
Read more

Is Your Case Study a Barrier or a Breakthrough?

You’ve sent out applications for every role you feel qualified for. You’ve tapped your network — friends, mentors, anyone rooting for you. But the responses are the same: silence or “no.” The job market feels tighter than ever, and every application seems to vanish into a black hole. Time feels frozen, and with each passing day, your projects start to feel outdated. The pressure builds. Self-doubt creeps in. Imposter syndrome piles on. Then one day, you ask a trusted friend, not a recruiter, but someone who knows what a strong case study should communicate, to review your portfolio. Their questions sting. They don’t understand your choices, your reasoning, or how you moved from point A to point B. That’s when it clicks. Your case study isn’t telling a story. It’s just a list of steps. Surface-level. You go back and revise. You add context, reasoning, validation, and the connections between your actions and outcomes. It’s not an overnight miracle — you don’t land a job the next day — b...
Read more

The Art of Interviewing

Today’s the day. You’ve been designing for a year or two, with a couple of projects under your belt, but it’s been a while since you’ve done an interview. Your questions are solid, shared with colleagues, refined follow-ups, yes/no paths mapped out, but you know, real people rarely follow a script. Excited and a little nervous, you take a deep breath and get ready for four conversations on the same topic. The first participant is quiet and hesitant. They avoid eye contact, offer one-word answers, and pause before speaking. You slow down, soften your tone, and let the silence settle just long enough to give them space. “Can you tell me a little bit more about that?” you ask. Gradually, their posture eases, their words lengthen. That small act of checking in, paying attention to their comfort, turns the conversation around. The next participant couldn’t be more different, enthusiastic, animated, and easily sidetracked. They bounce from one story to another, and you ride the wave, listen...
Read more