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:

Why third-party integrations break in React 19 — And how to future-proof them

React 19 breaks old third-party integrations. Learn why concurrent rendering exposes brittle SDKs and how to rebuild them with resilient modern patterns.

Ikeh Akinyemi
Oct 20, 2025 ⋅ 4 min read
React useEffectEvent: Goodbye to stale closure headaches

React useEffectEvent: Goodbye to stale closure headaches

Discover why the useEffectEvent Hook is important, how to use it effectively, and how it compares to useRef.

David Omotayo
Oct 17, 2025 ⋅ 5 min read
I Tried Shadcn CLI 3.0 — Here’s What I Learned

I tried Shadcn CLI 3.0 — here’s what I learned

Shadcn CLI 3.0 takes component management to a new level. With namespaced registries, private access, and AI-powered discovery, it’s now faster and smarter to build React UIs.

Emmanuel John
Oct 17, 2025 ⋅ 6 min read

Why is Zod so slow?

Zod’s flexibility comes at a cost. This article breaks down why Zod is slower than AOT-compiled validators like Typia, and how to fix it with a build-time optimization that brings production-grade performance.

Ikeh Akinyemi
Oct 16, 2025 ⋅ 5 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

Hey there, want to help make our blog better?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Sign up now