1

I am a designer and an issue I run in to all the time is how to scale font sizes down for mobile, and how to communicate that to a developer without 'just eyeballing it'. For instance, in my style guide, can I instruct a developer to decrease a font size by, say, 30% on mobile (as an example)? Is there any sort of golden rule to follow? This seems like such a no-brainer but I can't find this information anywhere.

I'm also very confused as to pixels vs points vs em. We use XD in our studio, which uses point sizes. Those point sizes don't always translate directly in to the correct size in the dev environment. They often appear much larger.

Can anyone guide me to a great resource or advise on the above? I'm so confused!

TIA

Improve this question
3
  • 1
    First, points are not for the web but for print. Never use them for displaying web pages on a monitor. But the whole issue of which property to use for setting font sizes is a developer question no designer should deal with because it's a technical issue, not a design one.
    – Rob
    Commented Jun 19, 2019 at 10:53
  • Thanks Rob! I agree, but I also think that the more a designer understands code, the better he/she can communicate with a developer.
    – annie2bananie
    Commented Jun 19, 2019 at 16:00
  • Thanks for this question. A followup for Ren: The line-heights you listed above are bigger on Desktop than Mobile, except for H1. Could you explain the rationale? Also, is there a guide regarding setting the line height? Or, can you use the same em for all, i.e. 1.25em for desktop, 1.15 for mobile? I know this is a year old post, hopefully you'll see this and provide some guidance. Thanks,
    – lu yan
    Commented Aug 20, 2020 at 14:39

1 Answer 1

Reset to default
2

Here is a guide for scaling responsive-text (considering body font-size is set at 16px).

Body

Desktop font-size:1em (16px), line-height:1.375em

Phone font-size:1em (16px), line-height:1.25em

H1

Desktop font-size:3em (48px), line-height:1.05em

Phone font-size:2em (32px), line-height:1.25em

H2

Desktop font-size:2.25em (36px), line-height:1.25em

Phone font-size:1.625em (26px), line-height:1.15384615em

H3

Desktop font-size:1.75em (28px), line-height:1.25em

Phone font-size:1.375em (22px), line-height:1.13636364em

Point is used for Print media; it is not a suitable unit for responsive design. Point is a physical unit and therefore its conversion to pixel depends on the image/screen resolution.

Related question: Point vs Pixel: What is the difference?

For screen design, pixel or em may be used (there are other units as well). While pixel is a fixed measurement unit, em is used for relative measurement.

Related question: Why em instead of px?

Improve this answer
1
  • Hi Ren - thanks for all of this! I actually did read the first article you posted a while ago, so I'm glad to know it is relevant to others. I have just re-read it more closely.
    – annie2bananie
    Commented Jun 19, 2019 at 16:01

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.