Participant

Question

font size on web not matching the size created on illustrator

Forum|Forum|7 years ago
March 29, 2018
4 replies
8034 views

I am making a webdesign in illustrator. To give out the redline to the developer i am using spectr pro but the font sizes which they give out in the redline is not reflecting in the web preview as they look smaller. Other things are working fine but not the fonts, Can anyone suggest what should i do so that i get the exact sizing of the font over all pages as what i made in illustrator?

This topic has been closed for replies.

Mike_Gondek10189183

Community Expert

Are all the fonts sizes to small, what about the other graphic elements? How exactly are you comparing to see this is smaller? Can you post a screenshot showing your original design, and what you are seeing? What sizes did you submit?

https://blog.usejournal.com/your-body-text-is-too-small-5e02d36dc902

There are so many factors that can cause this from using (command minus) on your browser, to a retina display being set to scaled. If your issue is still not resolved please supply more information so our replies are not too lengthy.

A

atulKumar1108Author

Participant

other elements are fine including the images and the video sizes as they are in pixels. when i am using the size for the font since the design gives in pt i am manually converting the sizes to pixels.

Ton Frederiks

Community Expert

In Illustrator, it does not matter for the fontsize what you are using, points or pixels.

In HTML there is a difference. Illustrator pixels are comparable to HTML code pixels.

Points in HTML are a different size.

Ton Frederiks

Community Expert

If the code they use specifies the font size in px, the result should be the same as in Illustrator.

Monika Gause

Community Expert

https://forums.adobe.com/people/Ton+Frederiks schrieb
If the code they use specifies the font size in px, the result should be the same as in Illustrator.

Not necessarily.

Browsers render sizes differently and then it depends on the hierarchy of styles n the CSS, which can mess everything up.

Ton Frederiks

Community Expert

I did a test in 3 different browsers on my Mac; Safari, Firefox and Chrome.

All 3 gave the same size as in Illustrator when the code specified px for the fontsize.

Of course this is tested on the same computer, I suppose that if you take a ruler and measure the size on a different device or platform, you will find differences.

JonathanArias

Legend

You don't want to dictate to the developer the font size he has to use. It is better to allow him to set it up in "em" values so the font responds to the device

Here is a guide of what the starting value would be:

http://typecast.com/blog/a-more-modern-scale-for-web-typography

John Mensinger

Community Expert

atulkumar1108 wrote
what should i do so that i get the exact sizing of the font over all pages as what i made in illustrator?

I'm no expert with respect to the particular workflow you describe, but I have doubt as to whether that's possible. Font rendering "on the web" (read: 'in a browser'), is subject to variables you can't control in or from your Illustrator layout.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded