Font type and font size for text in HTML
Specification of font type
Today there really is only one way of specifying the font type, and that is STYLE="font-family:name", where the name of the font is written in single quotes, i.e. 'Times New Roman' and 'Arial'. In older litterature you can encounter the tag <FONT>, and it will probably work for som browsers, as long as you program according to HTML 4, but it isn't a viable solution for a modern web site.
Most browsers use Times New Roman as default for text, and it is a good font for many things. This web site uses Times New Roman for headlines bur Arial for the main text, as it is better for reading on computer screens. The style font-family can be applied on all tags for text, i.e. besides the common text section like <DIV> and <SPAN>, it can also be used for tage like table rows and table cells, <TR> and <TD>. For a <SPAN> where we want to change from our standard Arial to Times New Roman, the code looks like this:
På siden, når den vises, ser det således ud:
For a web site, it is always a good idea to have specified a standard font type for the pages to use, unless something else has been specified. The quickest and easiest way of doing this, is by specifying the font type in the BODY tag. If you want to be a bit practical about it, you specify it in your CSS file.
Most browsers use Times New Roman as default for text, and it is a good font for many things. This web site uses Times New Roman for headlines bur Arial for the main text, as it is better for reading on computer screens. The style font-family can be applied on all tags for text, i.e. besides the common text section like <DIV> and <SPAN>, it can also be used for tage like table rows and table cells, <TR> and <TD>. For a <SPAN> where we want to change from our standard Arial to Times New Roman, the code looks like this:
Here the text is normal, <SPAN STYLE="font-family:'Times New Roman'">here the text changes to Times New Roman,</SPAN> and here it returns to normal.
På siden, når den vises, ser det således ud:
Here the text is normal, here the text changes to Times New Roman, og and here it returns to normal.
For a web site, it is always a good idea to have specified a standard font type for the pages to use, unless something else has been specified. The quickest and easiest way of doing this, is by specifying the font type in the BODY tag. If you want to be a bit practical about it, you specify it in your CSS file.
Basic specification of font size
Today there really is only one way of specifying the font size, and that is STYLE="font-size:size". In older litterature you can encounter the attribute SIZE, and it will probably work for som browsers, as long as you program according to HTML 4, but it isn't a viable solution for a modern web site.
Which font size to use depends entirely on the font type and layout. The general recommendation is to make it so big, that it is easy to read. From here you have to try to see what works.
Font sizes can be specified in three ways: size in points (pt), size in pixels (px) and centimeters (cm) or millimeters (mm). You can also specify it in other ways, e.g. percents, but this requires a specified start size, e.g. for the BODY tag. Relative font sizes are explained in the next section. Choosing pt or px is a matter of personal taste, you just have to be consistent and use only one type of specification, so you don't get in trouble with the relative sizes.
As code, the scaling looks like this:
On the page, when shown, it looks like this:
NOTE: Pixels (px) needs to be integers, as you can't have e.g. half a pixel or a quarter of a pixel on a screen. Points (pt), centimeters (cm) and millimeters (mm) can be decimal numbers, no problem.
Which font size to use depends entirely on the font type and layout. The general recommendation is to make it so big, that it is easy to read. From here you have to try to see what works.
Font sizes can be specified in three ways: size in points (pt), size in pixels (px) and centimeters (cm) or millimeters (mm). You can also specify it in other ways, e.g. percents, but this requires a specified start size, e.g. for the BODY tag. Relative font sizes are explained in the next section. Choosing pt or px is a matter of personal taste, you just have to be consistent and use only one type of specification, so you don't get in trouble with the relative sizes.
As code, the scaling looks like this:
Here the text is normal, <SPAN STYLE="font-size:18.0pt">here the text changes to 18.0pt,</SPAN> and here it returns to normal.
Here the text is normal, <SPAN STYLE="font-size:18px">here the text changes to 18px,</SPAN> and here it returns to normal.
Here the text is normal, <SPAN STYLE="font-size:18mm">here the text changes to 18mm,</SPAN> and here it returns to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text changes to 18.0pt, and here it returns to normal.
Here the text is normal, here the text changes to 18px, and here it returns to normal.
Here the text is normal, here the text changes to 18mm, and here it returns to normal.
NOTE: Pixels (px) needs to be integers, as you can't have e.g. half a pixel or a quarter of a pixel on a screen. Points (pt), centimeters (cm) and millimeters (mm) can be decimal numbers, no problem.
Relative font sizes
Relative size has to be used with some care. For HTML there is a number of options, that aren't all that well-defined:
Because there is a difference between browsers and how they interpret the various sizes, you can't be sure that e.g. small always reduce the size to the same small size, which can cause som problems with the layout. The solution is using %, e.g. in a CLASS in CSS, and stay far away from sizes that aren't well-defined.
The relative sizes are used exactly like the absolute font sizes, e.g. using percents:
On the page, when shown, it looks like this:
| Value | Description |
| medium | Setting the font size to medium. This is default |
| xx-small | Setting the font size to medium xx-small |
| x-small | Setting the font size to medium extra small |
| small | Setting the font size to medium small |
| large | Setting the font size to medium large |
| xx-large | Setting the font size to medium xx-large |
| smaller | Setting the font size to something smaller than the parent element |
| larger | Setting the font size to something bigger than the parent element |
| % | Setting the font size to a percentage of the parent element's font size |
| initial | Setting the font size to the initial value for the type of element |
| inherit | Inherit the value from the parent element. |
Because there is a difference between browsers and how they interpret the various sizes, you can't be sure that e.g. small always reduce the size to the same small size, which can cause som problems with the layout. The solution is using %, e.g. in a CLASS in CSS, and stay far away from sizes that aren't well-defined.
The relative sizes are used exactly like the absolute font sizes, e.g. using percents:
Here the text is normal, <SPAN STYLE="font-size:150%'">here the text changes size to 150 %,</SPAN> and here it returns to normal.
On the page, when shown, it looks like this:
Here the text is normalt, here the text changes size to 150 %, and here it returns to normal.