How to convert <font size="10"> to px?

Question

I need to convert <font size="10"> to px.

Example only(not correct): <font size="10"> is equivalent to 12px.

Is there any formula or table conversion out there to convert <font size="10"> to px?

Solution 1

<font size=1>- font size 1</font><br>
<span style="font-size:0.63em">- font size: 0.63em</span><br>

<font size=2>- font size 2</font><br>
<span style="font-size: 0.82em">- font size: 0.82em</span><br>

<font size=3>- font size 3</font><br>
<span style="font-size: 1.0em">- font size: 1.0em</span><br>

<font size=4>- font size 4</font><br>
<span style="font-size: 1.13em">- font size: 1.13em</span><br>

<font size=5>- font size 5</font><br>
<span style="font-size: 1.5em">- font size: 1.5em</span><br>

<font size=6>- font size 6</font><br>
<span style="font-size: 2em">- font size: 2em</span><br>

<font size=7>- font size 7</font><br>
<span style="font-size: 3em">- font size: 3em</span><br>

Solution 2

According to The W3C:

This attribute sets the size of the font. Possible values:

• An integer between 1 and 7. This sets the font to some fixed size, whose rendering depends on the user agent. Not all user agents may render all seven sizes.
• A relative increase in font size. The value "+1" means one size larger. The value "-3" means three sizes smaller. All sizes belong to the scale of 1 to 7.

Hence, the conversion you're asking for is not possible. The browser is not required to use specific sizes with specific size attributes.

Also note that use of the font element is discouraged by W3 in favor of style sheets.

Solution 3

Using the data points from the accepted answer you can use polynomial interpolation to obtain a formula.

WolframAlpha Input: interpolating polynomial {{1,.63},{2,.82}, {3,1}, {4,1.13}, {5,1.5}, {6, 2}, {7,3}}

Formula: 0.00223611x^6 - 0.0530417x^5 + 0.496319x^4 - 2.30479x^3 + 5.51644x^2 - 6.16717x + 3.14

And use in Groovy code:

import java.math.*
def convert = {x -> (0.00223611*x**6 - 0.053042*x**5 + 0.49632*x**4 - 2.30479*x**3 + 5.5164*x**2 - 6.167*x + 3.14).setScale(2, RoundingMode.HALF_UP) }
(1..7).each { i -> println(convert(i)) }

Solution 4

the font size to em mapping is only accurate if there is no font-size defined and changes when your container is set to different sizes.

The following works best for me but it does not account for size=7 and anything above 7 only renders as 7.

font size=1 = font-size:x-small
font size=2 = font-size:small
font size=3 = font-size:medium
font size=4 = font-size:large
font size=5 = font-size:x-large
font size=6 = font-size:xx-large

Solution 5

In general you cannot rely on a fixed pixel size for fonts, the user may be scaling the screen and the defaults are not always the same (depends on DPI settings of the screen etc.).

Maybe have a look at this (pixel to point) and this link.

But of course you can set the font size to px, so that you do know how many pixels the font actually is. This may help if you really need a fixed layout, but this practice reduces accessibility of your web site.

View more solutions

Comments

[pts]

Where did you get the font-size: values? How do you make sure that they are correct in all browsers?

[Eugene Yokota]

@pts, I got them by looking at the rendering of the browser. It's up to the browser's implementation, so I don't think I have to make sure correctness for all browsers. It looks close enough in all browsers I tested zoomed max.

[marknt15]

Hhmm I will test this in different browsers :)

[marknt15]

@pts: What if I have font-size 8 and above? How will I know the equivalent em? Thanks.

[marknt15]

I see, thanks Tormod. I am using eed3si9n's solution and this converter pxtoem.com. Now it works. Thanks to all of you who answered me :D

[Admin]

sorry, "10" is about 55px

[Pacerier]

+1. Cool, but have you considered that your inputs aren't the actual data points, but merely rounded off numbers?

[ClarkeyBoy]

Oh how things have moved on since that pixel to point link. Talking about max screen resolutions of 1024x768.... lol