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:

Exploring Advanced Support For Vite 5 In Storybook 8

Exploring advanced support for Vite 5 in Storybook 8

Explore the latest updates in Storybook 8, focusing on its improved support for Vite 5 as a build tool.

Will Soares
Jun 20, 2024 ⋅ 5 min read
Exploring Angular 18's Redirectcommand Class And Let Block

Exploring Angular 18’s RedirectCommand class and @let block

Angular’s latest update brings greater control over redirects and the ability to define and assign variables within the template.

Lewis Cianci
Jun 19, 2024 ⋅ 6 min read
Showing Progress For Page Transitions In Next Js

Showing progress for page transitions in Next.js

Progress bars help create a smooth UX during page transitions in your Next.js app, informing users that their request is processing.

Elijah Agbonze
Jun 19, 2024 ⋅ 9 min read
Qwik Adoption Guide Overview Examples And Alternatives

Qwik adoption guide: Overview, examples, and alternatives

Qwik’s focus on performance, innovative features, and commitment to DX make it a fantastic choice for building high-performance web apps.

Fimber Elemuwa
Jun 18, 2024 ⋅ 10 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