What is best replacement for in CSS?

Question

I am working on updating an old website which uses font tags, to use CSS. The old HTML uses numeric font sizes (1-7) like this:

<font size="4">Some text</font>

What are the equivalent CSS sizes (in px, em, etc.) for these legacy font tag sizes?

To clarify, you're not asking how to set a font size in CSS, but asking what size font those numbers represented? — Brad, Dec 27 '13 at 18:16
You guess my mind. I'm asking option two from your question. — Snake Eyes, Dec 27 '13 at 18:17
This might be able to help: http://style.cleverchimp.com/font_size_intervals/altintervals.html — Brian Glaz, Dec 27 '13 at 18:31

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

from W3C

http://www.w3.org/TR/html4/present/graphics.html#edef-FONT

size = cdata [CN] Deprecated.

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.

front this peice you could clearly see that equivalent to size will be large or x-large .. etc

explanation :

 is just as if you used font-size: medium ;

 is just as if you used font-size: large ;

 is just as if you used font-size: x-large ;

 is just as if you used font-size: xx-large ;

 is just as if you used font-size: -webkit-xxx-large;

update :

i think i have got it wrong the first time it's not em's (although they work similarly). please see the update :)

What about size=1 and size=2? Don't they have an equivalent? — lukas84, Jun 14 '18 at 15:58

score 7 · Answer 2 · answered Dec 27 '13 at 18:50

xx-small, x-small, small, medium, large, x-large, xx-large A set of absolute size keywords based on the user's default font size (which is medium). Similar to presentational HTML's through where the user's default font size is .

/* <absolute-size> values */
font-size: xx-small  
font-size: x-small /* <font size="1"> */
font-size: small /* <font size="2"> */
font-size: medium /* <font size="3"> */
font-size: large /* <font size="4"> */
font-size: x-large /* <font size="5"> */
font-size: xx-large /* <font size="6"> */
font-size: -webkit-xxx-large; /* <font size="7"> */

Reference

CSS font-size - Mozilla Development: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Thanks!! This is the perfect alternative for {font sizes 1 to 7} wrt latest browsers. -webkit-xxx-large will not work in IE and we can use 48px instead. Ref {http://help.dottoro.com/lcocpfmq.php} — Prajwal Bhat, Jan 28 '21 at 07:24

score 2 · Answer 3 · answered Dec 27 '13 at 19:14

There is no defined mapping in approved specifications. HTML specifications do not say that what the values in  mean; they are just a browser-dependent scale of sizes (and could all map to a single size). Similarly, CSS specifications do not define the meanings of font-size keyword values as absolute sizes or in HTML terms.

HTML5 CR, which is work in progress, suggests a specific mapping, except that it does not define the CSS counterpart of xxx-large; it just describes it as being a value that “is a non-CSS value used here to indicate a font size 50% larger than 'xx-large'”.

It is generally not useful to look for the mapping. For legacy pages, which might rely on some specific values for font size, just let them be. There is no point in trying to modernize them, e.g. by switching from presentational HTML to CSS. For new pages, the crucial question is what font sizes suit your needs, and for them, you had better forget  entirely.

What is best replacement for in CSS?

3 Answers3

Linked