Font Size - Translating to actual point size

Question

Quick question for everyone:

Does anybody know what the actual point size would be when setting the font-size to the following values:

• Large
• Larger
• Medium
• Small
• Smaller
• X-Large
• X-Small
• XX-Large
• XX-Small

Solution 1

Font sizes to pixels are explained by this chart:

Solution 2

medium is the user's preferred font size. All other values are defined by the browser. (source)

Solution 3

If you are able to use java script then you can, using a canvas element, measure the height of a given font size. The size will return a value in pixels for the height of the font you specify. This will only work if the user has calibrated their screen: most have not but the default values are generally close for most monitor setups.

var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World";
var size = ctx.measureText(txt).height;

Solution 4

Two good weblinks might answer this:

• Font Conversion Tables
• CSS Font-Size: em vs. px vs. pt vs. percent

View more solutions