Style your fonts with CSS
font-family:georgia, times new roman, Verdana;
The font types are serif, sans serif, monospace, cursive and fantasy.
Serif fonts are the fonts that have the curves and bends
on the ends. Serif fonts are considered easier to read. They are used in the main
body content. The best web safe fonts for serif are Times New Roman, Georgia,
and Garamond.
Sans serif
fonts are the fonts that do not have the curves and bends. Sans serif fonts are a neater
font used in heading and titles. The best web safe fonts for sans serif are Arial, Verdana,
Helvetica, Tahoma and Trebuchet MS.
Monospace fonts use a equal amount of width for every letter where other fonts
do not give as much space for a i compared to a H. Monospace fonts are not used much. The best web safe
font for Monospace is Courier New.
Cursive fonts look like handwriting. The best web safe font for Cursive is
Brush Script MT
Fantasy fonts are decorative used only for decorative purposes.
The font you use has to be installed on the users computer or they will not work. Fonts that
all the browsers have on them are called web safe fonts meaning all the browsers have those
fonts installed already and are safe to use. Otherwise the default font used by
the browser will appear on the web page. You can list more than one font in the css. The
first font you list is the one it will use and the others listed will serve as a backup in
case the first is not on the users computer.
In the css below, The browser will first
use Georgia fonts. If Georgia is not on the computer, the browser will try to use
Times New Roman and if Times New Roman is not on the computer, the browser will use Verdana.
If Verdana is not on the computer, the browser will use the font set as the default.
There are many types of fonts. This is not a complete listing for types of fonts. I
attempt to make things easier.
p {
font-family:georgia, times new roman, Verdana;
}
Here is the list of websafe fonts. After making this list, I noticed that not all of them work on apple or android like brush script MT. The cell phone
companies like google android and apple must not have all the web safe fonts installed but you can list more than one font in the CSS.
This font is Times New Roman
This font is Georgia
This font is Garamond
This font is Arial
This font is Verdana
This font is Helvetica
This font is Tahoma
This font is trebuchet ms
This font is courier new
This font is Brush Script MT
font-size:16px;
The default font size in your browser is almost always 16px. You can use css to change it.
You can use pixels (px),
em, rem, vw or percentages (%). Five different ways. Use the
method you like best.
12pt is equal to 16px, 1em and 100%.
18pt is equal to 24px, 1.5em and 150%.
24pt is equal to 32px, 2em and 200%.
p {
font-size:150%;
}
I use rem a lot. It was recomended. rem uses the font size on the <html> tag. Other wise, it uses the size set as the default in the browser.
The font-size is always the same this way. If you style a area font-size:1rem; , it will be 16 pixels which is what the browsers are usually set at. To
make sure it is using 16px as your base font-size, add this to your CSS:
html {
font-size:16px;
}
em uses the parent elements font-size so you end up with different sized fonts on your page.
font-weight:bold;
Font-weight is mostly used to make something appear in bold text. Some html has default bold
text like headings. You can use this to remove bold text that is there by default.
Use bold as the value to make text bold and use normal as the value to make something
appear as not bold.
p {
font-weight:bold;
}
font-style:italic;
You can make text italic using this one. You can also make the text normal or oblique.
Oblique looks like italic text.
p {
font-style: italic;
}
line-height:20px;
This will make more space on top and below the line of text. Use px, pt, em, rem or percentage. You can also use normal.
p {
line-height: 150%;
}