Page 1 of 1

How To Make Fonts/Text Match A Web Rendering?

Posted: 2014-10-19T06:35:30-07:00
by micahasmith
Wondering if anyone has any experience with this-- how do you make a font/text rendering in imagemagick match a font/text render on the web (CSS)?

Example-- I have a font that i can get to render in ImageMagick. I have it render at 10pt at 300dpi. The size of the font comes out at about 20px in height for baseline to ascent.

I want to use said font on the web, so i do some math and reach that the equivalent size is 10*300/72 = 11.0919540229885px. Baseline to ascent is ~=11px.

How would i get these to match?

Re: How To Make Fonts/Text Match A Web Rendering?

Posted: 2014-10-19T12:31:26-07:00
by fmw42
They may not match if your browser overrides the density for viewing. Some browsers default to 96 dpi.

This has been discussed before. Search the forum. see

viewtopic.php?f=1&t=26104&p=114398&hili ... pi#p114398