CSS allows precise control over text size. WebTV translates CSS font-size to the 7 font sizes we have long been familiar with.
In HTML, we have
<font size="value">text</font>.
CSS uses font-size: value
value is a length that may be expressed several ways.
Specific (fixed) values use a number and a type of length measurement. The primary measurement types that can be used are pt (points) and px (pixels), but you may also use cm (centimeters) and in (inches). There must not be a space between the number and the measurement type
(i.e. use 14px instead of 14 px).
<span style="font-size: 16px">
body {font-size: 16px; }
h1 { font-size: 33pt; }
<p>
<span style="font-size: 14pt">
The </span>
<span style="font-size: 16pt">
words </span>
<span style="font-size: 18pt">
in </span>
<span style="font-size: 22pt">
this </span>
<span style="font-size: 24pt">
sentence </span>
<span style="font-size: 26pt">
get </span>
<span style="font-size: 28pt">
larger.</span>
</p>
Appears as:
The words in this sentence get larger.
body { font-size: 16px;}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
Relative values may be expressed in
ems (proportional to the size of the letter m) or
% (percent).
There are also the relative size names larger and smaller, which are not supported by WebTV.
Examples
font-size: 110%
h1 { font-size: 1.3em ;}
h2 { font-size: 120%; }
<span style="font-size:larger">
(pc only)
Font-size may be expressed by specific size names from xx-small to xx-large. Size names are not supported by WebTV.
Stylesheet example using font-size names
body { font-size: medium }
h1 { font-size: xx-large }
h2 { font-size: x-large }
h3 { font-size: large }
h4 { font-size: medium }
WebTV only shows fonts in 7 sizes (1-7). It would be useful to know how these sizes relate to points and pixels. These sizes are for WebTV's default sans-serif font.
| font size | points | pixels |
|---|---|---|
| font size="1" | 1-14 pts | 1-12 px |
| font size="2" | 15-16 pts | 13 px |
| font size="3" | 17-18 pts | 14-15 px |
| font size="4" | 19-20 pts | 16-17 px |
| font size="5" | 21-22 pts | 18 px |
| font size="6" | 23-26 pts | 19-22 px |
| font size="7" | 27 pts & up | 23 px & up |
We also have some tables that show how the sizes compare.
Donald's color-coded table (points)
Gnubee's tables
Use font-size on a page. Post your page or your stylesheet.
Happy coding!
Gnubee
