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.

How is "If you use the `size` prop, the font size of the heading will automatically decrease in size for smaller screens." true?

See original GitHub issue

Description

While reading through the documentation, I noticed that the <Text> component examples uses fontSize as props, while <Heading> examples uses size.

The documentation explains this with

To increase the size of the heading, you can use the fontSize or size props. If you use the size prop, the font size of the heading will automatically decrease in size for smaller screens.

However, how is this true if both size and fontSize props use rem as sizes?

Shouldn’t the size prop then use an array of values?

Or why even have the inconsistency of size and fontSize. Stay true to the native attribute fontSize like you also mention here in the documentation.

Issue Analytics

State:
Created a year ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

advenamecommented, May 31, 2022

Could you do that? I still have an open MR https://github.com/chakra-ui/chakra-ui-docs/pull/657 and am busy with a project 😃

0reactions

nikolovlazarcommented, May 31, 2022

Yeah, that would be a good idea as well! You wanna do that?

Top Results From Across the Web

font-size - CSS: Cascading Style Sheets - MDN Web Docs

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length>...

Responsive And Fluid Typography With vh And vw Units

On a small screen, heading sizes should be more uniform; a large screen has room for greater variation. We can use the typographic...

Linearly Scale font-size with CSS clamp() Based on the ...

Any viewport width between 361 and 839 pixels needs a font size linearly scaled between 1 and 3.5rem. That's actually super easy with...

React Native Responsive Font Size

We can use flex layout and use adjustsFontSizeToFit={true} for responsive font sizes.And the text would adjust according to the size of the container....

Fluid font sizes in WordPress 6.1

This is to not only make the job of calculating the clamp formula easier, but to encourage the use of relative sizes: setting...