Copy link to clipboard
Copied
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?
Any suggestions would be greatly appreciated.
Thanks!
Katie
Copy link to clipboard
Copied
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?
Any suggestions would be greatly appreciated.
Thanks!
Katie
Copy link to clipboard
Copied
Sorry, I don't understand a word. Could you please be more precise and post some screenshots?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
I tried this, made a screendump, placed it in Illustrator and added the text in Red for comparison.
Copy link to clipboard
Copied
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).
Copy link to clipboard
Copied
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