Best Practices for Responsive Layout & Typography

[JimmyMinhLee]

Hey - relatively new to front-end,

I'm sure there is a best practice for handling responsive layouts/typography, but I'd like to know how I can best handle this in radix-ui.

I've been using chakra-ui for a couple projects already, and it always boiled down to something like:

const Page = () => {
    return (
        <Container width={{
            "base": "100%" // Take up the full view-width on mobile, 
            "lg"  : "6xl" // Take up only a certain portion of the page on anything above mobile 
        }}>
          <Box>
            <Text size={{
                "base": "sm", // Fixed size on mobile, 
                "lg": "lg" // Fixed size on lg
            }}>
                This is my text.
            </Text>
          </Box>
        </Container>
    )
}

I saw on the RadixUI playground that the <Heading> components, for example, rescaled as I widened/shortened my browser. Digging into the code, it looks like this is accomplished with this: calc(340px * var(--scaling)) as the width property on the containing Box element.

For the first approach, I don't like that I have to specify each individual font size based on each breakpoint I care about. However, I don't like the second approach either because it means the text could be extremely small on some arbitrarily tiny phone.

So... how can I best go about this? Is there some way for me to set the default breakpoints for every single Text and Heading component and then just use that? In my beginner world, it'd be ideal if radix-ui already does this work of setting the size based on view width for me, but I'm not sure if that's feasible nor would I know the design impact of making such a decision.

Thanks for the help!