Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

font size on web not matching the size created on illustrator

New Here ,
Mar 29, 2018 Mar 29, 2018

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?

7.9K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
Mar 29, 2018 Mar 29, 2018

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Mar 29, 2018 Mar 29, 2018

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 29, 2018 Mar 29, 2018

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 29, 2018 Mar 29, 2018

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 29, 2018 Mar 29, 2018

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 29, 2018 Mar 29, 2018

https://forums.adobe.com/people/Ton+Frederiks  wrote

Of course this is tested on the same computer

Right. As a unit of measure, the pixel can only be considered a "constant" on a single screen. And still, type size rendered in-browser can vary subject to user settings.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 29, 2018 Mar 29, 2018

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 30, 2018 Mar 30, 2018

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2018 Mar 30, 2018

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.

points.png

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2018 Mar 30, 2018
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2018 Mar 30, 2018

My guess is that you are accustomed to 12 pt type for print for body copy, and assume the same size can be used for web. Newer monitor nowadays have a higher pixel density per square inch. Mobile devices even have a higher pixel density yet, but the mobile device OS compensates, so fonts look similar size to as on a desktop.

You should try publishing your own website and there are GUI interfaces such as Muse which are really easy to learn with no coding.

My guess is for when you want 12 pt for print you will want 15-18pt for web.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2018 Mar 30, 2018

MikeGondek  schrieb

You should try publishing your own website and there are GUI interfaces such as Muse which are really easy to learn with no coding.

Muse has just been End-of-lifed. So the better option is to just learn all this web stuff. Then you are independent of WYSIWYG editors.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2018 Mar 30, 2018

Yes Adobe recently decided to stop upgrading Muse. Many believe that was not a good decision and Muse has a large following and many award winning websites. In my opinion respectfully, the original poster or someone who does not code will learn more from Muse or similar WYSIWYG web editor about font sizes.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Mar 30, 2018 Mar 30, 2018

is muse going away?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2018 Mar 30, 2018

Yes, it will go away.

Product Announcement

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2018 Mar 30, 2018

You can continue installing & use Muse. But in the future with each OS update Muse will eventually stop working, as they are no longer updating.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 09, 2018 Oct 09, 2018
LATEST

Muse will go bye-bye

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