calculating pixels width based on number of characters

I have a drop down menu and we are trying to calculate pixel positioning of elements on the menu.

we have the length of a word but this is not the same as the pixel width of the word.

Is there a way to calculate the number of pixels a word would take , based on its width ?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

i just use guess work. Seems to work fine...

Uhhh guess work will only work fine if you've got a monospace font like courier.  Fonts like Times New Roman, and most others for that matter are NOT monospace, they are true type, which means that different characters take up a different amount of screen real estate.  For instance a little i takes up only a pixel or two while an uppercase G takes up at least seven?

If precision is something you'll need in your calculation DEFFINATLY go with a monospace font!


I agree with jessegivy, if you use a monospaced font such as courier new you'll be able to calculate the width. I would recommend you leave some extra room for people that enlarge their browser text-size though.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
...I just got done creating this hanous 588 page pdf that I had to use monospace font for grrrrr!  It's a pain.

...anyway, I've done it without, and if you can't part with the style of your page, it's possible to use the largest character to go by, just calculate how many pixels one of the larger-sized characters of your font is (generally with guess work) and then use that figure, it will give you something a little bigger than it needs to be but bigger is better than smaller, as inclusive is better than exclusive, unless you're talking about nightclubs of course ;)

@Esopo, that could be quite a bit of extra room couldn't it?  The large font is really quite large.  I'm sure there's some accessability solution, could the accessability options be accessed to check the "real" font size somehow?  An interesting point.

@Knowledge-Dimension, I'm sure we could help further if you'd explain what it is you're doing.  Me I was just providing blank lines so their damn form looked all official.  I guess hey, as long as they keep writing checks :)


If you are still dealing with this and don't want to go with monospaced fonts,

Do a print-screen, blow it up and print it out to paper. Then do measurments with a ruler to figure out the dimensions and ratios and when you create your menu give the width dimension a relative number based on the size of the text (CSS ems would do well).

If your menus are being created dynamically you can use something like the GD library of PHP to figure out the exact width of a word or phrase in pixels.

I would normally recommend to just use a reasonable size and code your menu in such a way that would look well if a line needs to wrap into two.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Fonts Typography

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.