Highlighted

Font sizing for mobile web design

New Here ,
Jun 15, 2020

Copy link to clipboard

Copied

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.

 

Adobe Community Professional
Correct answer by Ton Frederiks | Adobe Community Professional

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.

Topics

Type

Views

189

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Font sizing for mobile web design

New Here ,
Jun 15, 2020

Copy link to clipboard

Copied

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.

 

Adobe Community Professional
Correct answer by Ton Frederiks | Adobe Community Professional

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.

Topics

Type

Views

190

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 15, 2020

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jun 15, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 15, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jun 15, 2020

Copy link to clipboard

Copied

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'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jun 15, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...