Font sizing for mobile web design

[ryano1010]

Hi all,

First understand that I'm a front-end web developer. I know very little about how to use Illustrator. I know that there are many better tools than Illustrator for web design, but it's not my decision.

A graphic designer has created a design for me to implement, but the font size in the design is way too small. I brought this up with them and they said that the font size was set to 22px in Illustrator, which is an acceptable size for a web font, so I'm not sure what's going on.

I have their file here and it's set up with an Artboard for 'iPhone 8/7/6' and the font size of the text is 22px. When I look at it onscreen in Illustrator I can fit about 12 words across the page. However on a normal web page when viewed on a mobile, you can only fit about 6 words across the page at that size.

I have the same problem if I create new document in Illustrator, using the iPhone Artboard and try and write some text. It appears much smaller in relation to the screen width than it would online.

What instructions can I give them to set up Illustrator so the size of the font onscreen proportional to the Artboard is the same as how a mobile rendered webpage would behave?

I feel like this is something to do with the DPI of the document, or maybe that the document does not allow for pixel doubling of Retina iPhone screens.

Thanks for any help.

[Ton Frederiks]

For Illustrator, points and px are the same.

For web browsers there is a difference, in some applications when using px you will get the same size as Illustrator pts.

See also: https://websemantics.uk/tools/font-size-conversion-pixel-point-em-rem-percent/

[ryano1010]

It's not so much the font size - it's the Artboard size. The Artboard is twice the size that it should be for mobile design.

The designer wants to set their font size to 22px and see how many words they can fit scross the screen. If they use Illustrators preset mobile design Artboards, their text will show at half the size that they set it to.

I'm surprised there isn't an official note about this from Adobe that I could point the designer to.

[Ton Frederiks]

Illustrator files are vector files and don't have a resolution. It will get a resolution when exported to a pixel format.

Illustrator assumes that a pixel is 1/72 of an inch.

iOS devices have a higher resolution, your example of the iPhone 8/7/6 artboard is twice the size and would be correct with a resolution of 144 ppi.

[ryano1010]

So it sounds like this is a fault in Illustrator then. Why offer an Artboard size of 'iPhone 8/7/6' when if you use it you need to double the size of any fonts you specify. They should at least provide an option where it automatically doubles the font sizes to allow for them to be rendered correctly on the target device.

The only solution at the moment would be to tell the designer to create a custom Artboard which is 375x667px and create the design on that. At which point I'm sure they will have an argument with me saying, 'Surely Illustrator wouldn't provide a Artboard preset that does not work'.

[Ton Frederiks · Accepted solution]

Yes that would be an option create at 375x667px and export with a resolution of 144ppi or 2X in export for screens. This will generate a 144ppi image.

Or create at double the size and export at 72 ppi.

[lex_8317 · Accepted solution]

Illustrator uses a resolution of 72 DPI (dots per inch) by default for web designs, while the actual devices can have higher pixel densities (e.g., Retina displays have 144 DPI). This can cause discrepancies between what you see on-screen in Illustrator and how it renders on a device.