Saturday, February 14, 2009

Pixel 2 em calculator

Every website that I've built for the last months have been in em's instead of pixels. Well, not completely, just the font size and line height. The advantage is working with em sizes is that your font sizes are scalable in Internet Explorer. On top of that it's much easier to offer a website in another font size by changing the base font size of the body-tag.

There's only one problem. If you have to work with a design in Photoshop, everything is measured in pixels. You have to do some math to convert those pixels to em's. Now you have scary pixel/em tables, but that won't work for me. So I decided to use my ASP.NET knowledge to create a Windows .NET application. It's my first app (so be gentle with me) but it does the job. I wrote the program just for me, but since there are a lot more who make web sites in em's I decided to throw it on the web. So here it is:

Update: Version 1.1 of this tool is published on The Bright Lines.

If you want to read more about using about using em instead of pixels, I recommend the following articles:

9 comments:

abel.online said...

Is this calculator capable of dealing with the DPI of a Photoshop image? Because that influences the way the fonts are measured.

Also, on displays: on the Mac (76 PPI) and on the Windows (92 PPI) the result may not be what you desired.

electricspace said...

Sorry for my late reaction. My blog is not connected to an email address that I use.

On a website you don't really have control over the DPI of the client, so you just have to choose a font size that's safe.

Anonymous said...

Hello !.
might , perhaps very interested to know how one can collect a huge starting capital .
There is no initial capital needed You may begin to receive yields with as small sum of money as 20-100 dollars.

AimTrust is what you need
The firm represents an offshore structure with advanced asset management technologies in production and delivery of pipes for oil and gas.

Its head office is in Panama with structures around the world.
Do you want to become a happy investor?
That`s your choice That`s what you desire!

I feel good, I began to get income with the help of this company,
and I invite you to do the same. If it gets down to select a correct partner who uses your funds in a right way - that`s AimTrust!.
I take now up to 2G every day, and my first deposit was 1 grand only!
It`s easy to join , just click this link http://tydarogan.virtue.nu/guzoqus.html
and lucky you`re! Let`s take our chance together to become rich

Anonymous said...

Hello !.
You re, I guess , perhaps very interested to know how one can collect a huge starting capital .
There is no initial capital needed You may start to receive yields with as small sum of money as 20-100 dollars.

AimTrust is what you thought of all the time
AimTrust incorporates an offshore structure with advanced asset management technologies in production and delivery of pipes for oil and gas.

It is based in Panama with affiliates everywhere: In USA, Canada, Cyprus.
Do you want to become an affluent person?
That`s your choice That`s what you wish in the long run!

I feel good, I started to get real money with the help of this company,
and I invite you to do the same. It`s all about how to select a correct companion utilizes your funds in a right way - that`s the AimTrust!.
I earn US$2,000 per day, and what I started with was a funny sum of 500 bucks!
It`s easy to start , just click this link http://yvikytuj.s-enterprize.com/ipykexi.html
and go! Let`s take this option together to get rid of nastiness of the life

Abel Braaksma said...

Hi electricspace, thanks for your reply. It's probably handy to add your blog to a monitored emailaddress. As you can see, messages you really don't want can crawl into your blog and place you into a bad light with the search engines and visitors.

Anyway, of course you don't have control over the dpi over the client, but resolutions are often below 100PPI (as I said: 76 PPI Mac, 92 PPI Windows by default). Photoshop uses printer resolutions, anything between 300DPI to 2400DPI (and beyond). It's important to take that into consideration, even if you don't know the _exact_ target PPI / DPI.

Jai said...

You might find this useful as well. http://pixel2em.kleptomac.com
This provides an online pixels to em converter and you can also do a complete CSS file conversion.

Anonymous said...

Nice post and this enter helped me alot in my college assignement. Thank you on your information.

Anonymous said...

Easily I agree but I think the post should secure more info then it has.

Anonymous said...

Amiable post and this enter helped me alot in my college assignement. Say thank you you seeking your information.