1

When making a responsive stylesheet. Is it better to keep the text sizes the same pixel size. Note I am using the following to normalize the sizes across. Also for the purpose of this question I'm limiting to a single type-face for simplicity.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Or does it make sense to have different sizes as a norm.

e.g. on mobile use 14px default body text size vs tablet which has 16px font size and desktop which has 20px font size

vs

16px default body text size regardless of display.

From a technical point of view keeping one size makes it easier to manage the design rather than having altering CSS font sizes between devices.

Related:

Improve this question
5
  • 1
    Generally, using px for font sizes is considered a bad practice; the better practice is to use em. This also accommodates people who need to resize text. It also potentially allows you to use a single style sheet for all sizes of device screen, since the size of the em can be set by the device/device user.
    – Jeff Zeitlin
    Commented Mar 17, 2023 at 16:44
  • I don't think React-Native supports em but it does allow scaling from px.
    – Archimedes Trajano
    Commented Mar 17, 2023 at 16:45
  • 1
    It appears to support the relative-em (rem); see this StackOverflow question. I don't have access to full documentation, but support for the rem suggests that it should also support the em.
    – Jeff Zeitlin
    Commented Mar 17, 2023 at 16:54
  • 1
    Also recommended reading: blog.logrocket.com/using-em-vs-rem-css
    – Jeff Zeitlin
    Commented Mar 17, 2023 at 17:03
  • Please don't follow any articles on CSS more than a few years ago. CSS is changing very quickly. Now, one could define the main font styles, then use calculations to adjust type according to size of screen or size of containing element.
    – Steve
    Commented Mar 20, 2023 at 21:14

1 Answer 1

Reset to default
1

As other posters in here, I would suggest this is why em/rem are options. px is for defined screen real estate, if you are putting importance on several different screen sizes, you need to use something more appropriate.

Trying to create different px values for each screen size is an outdated roundabout way of getting the job done and leads to more elements that you have to keep in check as the product/design evolves. You already need to worry about these values between the headers, paragraphs and subtitles you use.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.