0

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

  • 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 Jun 19 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 Jun 19 at 16:00
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?

  • 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 Jun 19 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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