I got following Illustration from Grapics Designer:

enter image description here

The font size what I am curious about is 7pt in Illustrator. How can I calculate the "web font size" of it? I have a MacBook Pro, its width is 1440px, the artwork in Illustrator is 571px.

So I though I can calculate like:

7pt = 9.29px

9.29px * 1440 / 571 = 23.42

But it is just way bigger then I expected:

enter image description here

  • If that’s 7pt text in the Illustrator screenshot, I’m guessing you’re not zoomed out to 100% view. If you’re viewing the Illustrator document at, say, 175% zoom, as a starting point, try making the CSS font (7 x 1.75 =) 12.25pt = 16.3px. See if that fits; otherwise adjust until it does. – Janus Bahs Jacquet May 24 at 11:58

It is a designer's job to simplify and decide on what looks best. If you're a programmer and just received this from a designer, take the initiative and adjust until it looks right.

If 23.42px is too big, just try 18 or 16px, don't get stuck on rigid conversion formulas.

Also, Illustrator comes from a pre-web background, so most of the methods and units are not made to apply for web code directly. That's why people use XD, Figma and/or Sketch now, because these apps are 100% built and optimized to generate web assets, units and numbers.

| improve this answer | |
  • 8 or 9px would be way too small. That’s barely legible. The current conversion makes it 23.42pt, which is too big, but not by a factor of 300%. – Janus Bahs Jacquet May 24 at 11:55
  • It's not my job to know what's big or not in the particular situation, the OP mentioned 9.29px being too big. I was just making a point of rounding the value to a number which looks not big, not small, just right. Adjust "by eye". – Lucian May 24 at 11:57
  • No he didn’t. He said that 9.29px * (1440 / 571) = 23.42px was too large. He said nothing about 9.29px, except as an intermediate value. If you look at text on a webpage in size 9.29px, it’ll be tiny. The default browser size is 12pt = 16px. – Janus Bahs Jacquet May 24 at 12:00
  • Yeah ok i missed that part where he converts by screen ratio. Regardless, my point remains valid. – Lucian May 24 at 12:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.