2023-10-03
2014
#css#web design
Fimber Elemuwa
8277
Oct 3, 2023 â‹… 7 min read

The elements of responsive typography

Fimber Elemuwa I'm a freelance web developer and certified SEO Content writer. I dabble a bit in poetry and I LOVE CHESS.

Recent posts:

i tried kiro and here is what i learned

I tried out Kiro: Here’s what I learned

Check out Kiro, AWS’s AI-powered IDE, see what makes it different from other AI coding tools, and explore whether it lives up to the hype.

Elijah Asaolu
Aug 28, 2025 â‹… 5 min read
Go Design Pattern Article Image With Logo

Why Go design patterns still matter

Here’s how three design patterns solved our Go microservices scaling problems without sacrificing simplicity.

Peter Aideloje
Aug 28, 2025 â‹… 2 min read
how to protect your ai agent from prompt injection attacks

How to protect your AI agent from prompt injection attacks

Explore six principled design patterns (with real-world examples) to help you protect your LLM agents from prompt injection attacks.

Rosario De Chiara
Aug 27, 2025 â‹… 5 min read
Don’t Let AI Erase The Next Generation Of Dev Leaders

Don’t let AI erase the next generation of dev leaders

As AI tools take over more routine coding work, some companies are cutting early-career dev roles — a short-sighted move that could quietly erode the next generation of tech leaders if we aren’t careful.

Jack Herrington
Aug 26, 2025 â‹… 6 min read
View all posts

5 Replies to "The elements of responsive typography"

  1. Arrived from a Panda email. Good post, good information and of interest to me. Following along and looking to make sense of the formula. For the most part, everything is well explained. But there’s a pivot and the flow between concepts breaks for me. You twice show the formula outside of the css calc context, once with logical concepts, and then again with pixels. When you then move to the css calc context, you note to switch to rem/vw, but mention nothing about the way other information in the equation changes, or else I’ve missed it. I don’t follow where the “… – 20rem” comes in, or the “90 – 20”. How are those numbers calculated from the formula that uses pixels? It might be clearer in one of the references you link to, but it was a break in the flow of information for me. Thanks for writing!

  2. @JessicaChan. Great article! I was struggling to find a comprehensive and practical article about responsive typography up until I stumbled upon your piece. You basically nailed it! I really appreciated how you spent some time defining the basic concepts involved, the practical implementations of some solutions, their pros and cons, and yes, thank you for clarifying that mathematical formula. This article has been an insane relief for me and I feel more confident exploring other advanced concepts around this subject.
    I personally think I will implement some fluid typography with breakpoints: I like having more control and I feel the mixin you used in one of your example makes it bearable enough!

    One detail confuses me in the translation to rem, I don’t know if it is meant or if it’s a typo: isn’t 414px equal to 25.8rem, roughly?

    Thanks again for this article!

  3. I’ve been advocating proportional design with our team for quite some time. We’ve run into the issue of accessibility in particular when users zoom instead of adjusting browser settings. I looking into doing something like this instead of setting root to 5vw or some other value. Thanks.

  4. Very good post! Thanks for that. In fact, I don’t see the point using the third approach. If in the end again you need to add medai-queries to really put the limits… Why blowing the formular? The css-code in the second approach looks much easier to me (and propably to any thrid party reading the code) and does exactly the same thing.

  5. As a designer, it was so helpful for me. Font is most important in any type of design and I am learn about fonts from last three year. Thanks for sharing this.

Leave a Reply