question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Apr 22, 2020

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)

0reactions
oliviertassinaricommented, Apr 22, 2020

Correct, it’s what we want to solve in #15561.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found