Participant

Question

Web Design in Illustrator: PX size doesn't correlate

Forum|Forum|8 years ago
February 12, 2018
5 commentaire
4760 vue

have been designing websites in illustrator for years. I build them using PX as my units, and view my work at 100%, but when I translate all the specs into CSS 14 PX in AI looks drastically different than 14 PX in the coded site. Normally once it is built into the CSS/HTML the type looks significantly larger. This often leads to lots of back of forth between me and whomever is doing the coding. Does anyone know how to account for this disparity?

When I create a new document, I use the AI web presets
All my units of measurement are in PX
I double check my specs using CSS Extraction
I look at my work at 100% to try and get as accurate a view of the design as possible

Any suggestions would be greatly appreciated.

Thanks!

Katie

katmac_aus

Participant

It's a setting in the new Illustrator. They changed it to make 100% = print 100%. You can turn it off to make Illustrator 100% = browser 100% via:

Preferences > General > Display Print Size at 100% Zoom (and untick the option).

J

jorisv41392677

Participant

I still dont think it is at the same ration as your webbrowser - it seems slightly enlarged

why is photoshop able to show the ratio as 1:1 at 100% but illustrater isnt

The fontsize should be done in Px when designing for web

Please help

Ton Frederiks

Community Expert

I tried this, made a screendump, placed it in Illustrator and added the text in Red for comparison.

Ton Frederiks

Community Expert

As long as you specify the fontsize in px in Illustrator (you can use also points it is the same in Illustrator) and specify the size in pixels in your html code, the size will be the same.

If you use points in your code, the size will be larger.

John Mensinger

Community Expert

katier1069738 wrote
14 PX in AI looks drastically different than 14 PX in the coded site. Normally once it is built into the CSS/HTML the type looks significantly larger.

Is it just the type, or everything? I suspect your type is 14 points in Illustrator. (I could be wrong about that...I never work in pixels, and just now finding out that you can indeed set pixels as the type size unit.) Either way, the real paradox is that neither 14-point type nor 14 px have any true correlation to a linear measure constant.

K

katier1069738Auteur

Participant

It is mostly just the type. Attached is a screenshot of the design, the type size in the tool bar, and the css properties window. Is there a deeper level I need to go to besides Preferences>Units to truly change my units to PX?

Also, could you explain what you mean by a linear measure constant? I tried googling it and everything that came up was about car motors.

John Mensinger

Community Expert

katier1069738 wrote
It is mostly just the type. Attached is a screenshot of the design, the type size in the tool bar, and the css properties window. Is there a deeper level I need to go to besides Preferences>Units to truly change my units to PX?

No, your screen shot shows the type units set to pixels; correctly done.

Also, could you explain what you mean by a linear measure constant? I tried googling it and everything that came up was about car motors.

I just mean a unit of measure that is constant, or always the same. A millimeter is exactly the same no mater where, how, or under what conditions it is measured. That is not true of type-point size. A capital 'B' set at 14 points may change in size every time you change the font. It is also untrue of pixels; pixel size varies widely across devices and resolutions. Type set at 14 pixels high won't look the same on your screen as it does mine, and different again on a tablet, a phone, a projector, etc.

Monika Gause

Community Expert

Sorry, I don't understand a word. Could you please be more precise and post some screenshots?

Inscrivez-vous

Login social

Bienvenue

Login social

Analyse virus du fichier

Ce fichier ne peut pas être téléchargé