35

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?

Mien
  • 149
  • 2
  • 8
marknt15
  • 5,047
  • 14
  • 59
  • 67
  • 4
    Technically sizes outside the range 1 to 7 are invalid. – cletus May 04 '09 at 07:32
  • 2
    While technically not possible (as so abundantly pointed out in the answers below), for those of us that have the practical job of doing some conversion, I'm providing these data points: In Chrome, on Mac, the font sizes are rendered as follows: `1=10px, 2=13px, 3=16px, 4=18px, 5=24px, 6=32px, 7=48px` (10 is off the chart - max is 7) – random_user_name Apr 20 '18 at 17:19

7 Answers7

44
<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>
PhiLho
  • 40,535
  • 6
  • 96
  • 134
Eugene Yokota
  • 94,654
  • 45
  • 215
  • 319
  • 7
    Where did you get the font-size: values? How do you make sure that they are correct in all browsers? – pts May 04 '09 at 07:51
  • @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. – Eugene Yokota May 04 '09 at 08:01
  • Hhmm I will test this in different browsers :) – marknt15 May 04 '09 at 08:45
  • 2
    @pts: What if I have font-size 8 and above? How will I know the equivalent em? Thanks. – marknt15 May 04 '09 at 08:49
16

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Tormod Fjeldskår
  • 5,952
  • 1
  • 29
  • 47
  • I see, thanks Tormod. I am using eed3si9n's solution and this converter http://pxtoem.com/. Now it works. Thanks to all of you who answered me :D – marknt15 May 04 '09 at 09:05
5

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)) }
Stephen Swensen
  • 22,107
  • 9
  • 81
  • 136
  • +1. Cool, but have you considered that your inputs aren't the actual data points, but merely rounded off numbers? – Pacerier May 04 '14 at 18:54
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

enter image description here

Steve
  • 1,995
  • 2
  • 16
  • 25
1

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.

Lucero
  • 59,176
  • 9
  • 122
  • 152
  • Oh how things have moved on since that pixel to point link. Talking about max screen resolutions of 1024x768.... lol – ClarkeyBoy Jan 07 '16 at 13:42
0

This is really old, but <font size="10"> would be about <p style= "font-size:55px">

Alex Shesterov
  • 26,085
  • 12
  • 82
  • 103
user2845437
  • 19
  • 1
-1

This cannot be answered that easily. It depends on the font used and the points per inch (ppi). This should give an overview of the problem.

Mien
  • 149
  • 2
  • 8
Mork0075
  • 5,895
  • 4
  • 25
  • 24