0

I'm converting HTML4 to HTML5, and I have this:

<font face="Verdana" size="2">

The above is no longer supported in HTML5. What value and unit does the font size above map to in CSS?

thegreatjedi
  • 2,788
  • 4
  • 28
  • 49
  • 1
    Whatever the browser' default is...usually it 16px but some use 14px. That's why we generally recommend a CSS Reset. – Paulie_D Aug 24 '16 at 10:29
  • Based on a base of 16px, size 2 will be 13px. As Paulie says, it's browser dependant but for most this is the case. https://jsfiddle.net/90qvv63d/ – naththedeveloper Aug 24 '16 at 10:31

1 Answers1

2

So the Font tag had 7 degrees of freedom. You can specify a value between 1 and 7. 7 is largest and 3 is default

Font Tag

In CSS you have the font-size property, also 7 degrees of freedom, the constants for it are not numeric, and medium (which is the 3rd value) is the default.

FONT Tag   font-size CSS
N/A             xx-small         
       1          x-small           
       2          small              
       3          medium          (default values)
       4          large              
       5          x-large           
       6          xx-large         
       7          N/A                 

CSS font-size Property

So if you consider that the default values do not match up exactly betewen both standards, then we can assume that the standards are slightly different, without 1:1 mapping or meaning. Your value of 2, might be small and it might not. I do think that is probably is small though.

You will discover that other factors are coming into play with CSS, and you will generally discover other discrepancies that prevent a direct conversion between the Font tag and the CSS properties. You might be safe on this one, though, as these values are defined as "absolute sizes".

see: It Depends see: Size to px

Community
  • 1
  • 1
DaFi4
  • 1,364
  • 9
  • 21
  • Google Chrome translates it to **small** not **x-small**. – Aki Aug 24 '16 at 10:37
  • thanks, I edit it...so its going to be hard to directly convert the 2, since they do not map 1:1 – DaFi4 Aug 24 '16 at 10:38
  • They are not mapped directly. `font-size` has one smaller value and `font` has one bigger value. That's all, they are offset and extremes do not match. Just make side-by-side comparison. – Aki Aug 24 '16 at 10:43
  • thanks, I think things like inheritance might come into play, that cause problems with planning and conversion, too. – DaFi4 Aug 24 '16 at 10:43
  • 1
    Thanks, that's a nicely comprehensive answer! – thegreatjedi Aug 24 '16 at 11:07