How To Make Fonts/Text Match A Web Rendering?

Questions and postings pertaining to the usage of ImageMagick regardless of the interface. This includes the command-line utilities, as well as the C and C++ APIs. Usage questions are like "How do I use ImageMagick to create drop shadows?".
Post Reply
micahasmith
Posts: 5
Joined: 2013-08-19T07:34:06-07:00
Authentication code: 6789

How To Make Fonts/Text Match A Web Rendering?

Post 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?
User avatar
fmw42
Posts: 25562
Joined: 2007-07-02T17:14:51-07:00
Authentication code: 1152
Location: Sunnyvale, California, USA

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

Post 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
Post Reply