We help IT Professionals succeed at work.

How to determined Fontsize through Javascript?


In Javascript you can set the fontsize by document.execCommand("FontSize",0,"size") . I am using the Wysihat(built on top of Prototype) html editor and that is how it is done. However, for JS the size goes from 1 to 7.

My question is how do you determine what is the font size of the specific text selection in pixels? So, something like 8px,10px,12px and so on.

One can always grab the stylesheet style, but how can I figure out with size corresponds to the 1 to 7 range on JS's document.execCommand("FontSize",0,"size") ?

I assume that also varies from the type of the font. Any function that I can go and select to determine that

I am trying to build a font drop down menu. So far I can make it work, but the value on the box does not correspond to the one I have selected sometimes showing something like 17 instead of the value 3. They I need to have it properly updated with the selected value.

Anyway to convert that to 8,9,10,12,14 like on the Outlook email editor?

Watch Question

Try this:


it 's more than what you are looking for.
With DOM,
First set and ID for every tag you want to manipulate attributes.
<div id="myDiv" style="font-size:10px;">My Text</div>

inside a function

var obj = document.getElementByID("myDiv");
obj.style.fontSize ="14px";


The problem is that that is inside the HTML editor and that is the selected text.
Carlos, please don't give me any points for this comment, but I just don't see how you can do the things you want with the platform you are *forced* to use.  Can you not *insist* that your management wake up to the fact that it is the platform forced upon you that is the problem, not HTML, Jscript, javascript of CSS, where in an open coding environment, you can do more or less anything?



You are totally correct. But somethings are outside your control. Does not matter how many degrees, years of experience you have, what matters at the end of the day is what you need to do even if the voice of reason is not heard. Go figure.


What I would like to know is this:

On browsers, font size varies from 1 to 7. I would like to know how can I convert that to the corresponding font size in pixels for the current screen resolution.

I've found this:

Browser font size 1 -> Safari: 10 px (Actual font size: 8 px)
Browser font size 2 -> Safari: 13 px (Actual font size: 10 px)
Browser font size 3 -> Safari: 16 px (Actual font size: 12 px)
Browser font size 4 -> Safari: 18 px (Actual font size: 14 px)
Browser font size 5 -> Safari: 24 px (Actual font size: 18 px)
Browser font size 6 -> Safari: 32 px (Actual font size: 24 px)
Browser font size 7 -> Safari: 48 px (Actual font size: 36 px)

But I think it is wrong because it should be a function of the current screen resolution and not just a simple table conversion.

Yes and no.  The font size is a fixed size in pixels, so as you go to smaller resolutions, like 640 instead of 1280, then the fonts get smaller, but the font size remains the same.  It is the VIEWPORT that is changing as you go down -- like a magnifying glass -- hence the 640 is stretched (i.e. enlarged) onto the same screen size as 1280, so yes, now the fonts look a lot bigger, but only because of stretching 640 pixels over an area the same as 1280 -- make sense?

I can send you a table of all the font size conversions if you want.  See my profile, email me, I will be happy to send it to you.  It is not on the web, as I made it up a while back.


Wouldn't that depend on the type of the font too? Depending on the font family I assume the number should be different, correct?
The table I sent works for ALL font sizes that are text based, and non-script.  Sure ARIAL is bigger than Times, and ALL fonts have different metrics, but comparing Times to Times, the sizing is consistent.  So no, the number is not different within the one font type, it is different between different font types.  There is no such thing as a font "family" when it comes to exact size.  Arial, Verdana and Sans Serif are all different sized fonts.  The "family" concept came about to distinguish serif based fonts from non-serif fonts.