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 FreeTop 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
Top GitHub Comments
From what I understand, they are some cases where you want to change the font weight, using the
fontWeight
prop of the system would solve your issue (it also comes with responsive helpers)Correct, it’s what we want to solve in #15561.