Responsive typography helper for modifying properties
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Summary 💡
Sometimes it’s necessary to have an h6 with a different fontWeight than what’s in the theme, but referencing it directly with theme.typography.h6.fontSize makes you lose out on responsiveness.
Possible solutions 🌈
- Add fontWeight property to
Typography - Add utility to get the responsive fontWeight
Motivation 🔦
No utility for responsive font sizes, unless you’re using Typography which doesn’t accept custom font weights 😦
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Simple solutions to responsive typography - YouTube
In this one, I look at two simple ways to make maintaining your site's typography much simpler!
Read more >Typography helpers - Bulma
Typography helpers. Change the size, weight, and other font properties of the text ... You simply need to append the viewport width to...
Read more >A guide to responsive typography - UX Collective
This method can be used in multiple ways where you can change the base font size for multiple breakpoints and use the same...
Read more >Responsive And Fluid Typography With vh And vw Units
Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width.
Read more >The Beginner's Guide to Responsive Text on the Web
Method 1: Responsive Text With Breakpoints. Our first approach to mobile-friendly text, and the easier one to get right, involves setting ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

From what I understand, they are some cases where you want to change the font weight, using the
fontWeightprop of the system would solve your issue (it also comes with responsive helpers)Correct, it’s what we want to solve in #15561.