Web Design in Illustrator: PX size doesn't correlate

[#1]

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

[#2]

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

[#3]

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

[#4]

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.

[#5]

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.

[#6]

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.

[#7]

katier1069738  schrieb

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?

The size of text actually is measuring what in this image is labelled as "c" Sort (typesetting) - Wikipedia

[#8]

John: While the size of a particular character may vary from typeface to typeface at a given type size, the size of a point does not. That's defined and fixed, as are the millimeter and the inch. The size and placement of a particular character are determined by the type designer, but the basic design grid for a particular character at a particular size is the same. So, yes, changing the font may change the size of the letter, but the size of a point is the same, and independent of the typeface or anything else.

The size of a pixel, as you rightly point out, depends on where and how it is displayed.

Peter

[#9]

Thanks Peter,

Of course I'm aware that the point, by itself, is a constant. Any mis-characterization of the point as a relative unit of measure was not intentional.

Because the OP's problem seemed specific to type size, I wanted to point out that type set at 14 points does not actually measure 14 points tall, optically.

[#10]

Yeah, I wasn't calling you out, John, as I figured you knew what you were talking about; just trying to clarify a bit, as much for my own benefit as anything.

[#11]

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.

[#12]

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

[#13]

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

[#14]

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