Fonts in HTML: Creating a Website Made Easy
This is a tutorial on fonts or typefaces in HTML for a Udemy course on HTML5 and CSS3.
Full Course Description and 25% Discount Coupon:
Fonts, also called typefaces, are the families of shapes which make up a specific style of lettering. In this lesson, we will be learning all about fonts and how to use them in HTML. Also, we will be covering a few of the hundreds of special symbols that are available to you.
Though the [font] (angle brackets not allowed in YouTube description) tag is not supported in HTML5—the latest HTML specification—there are still plenty of websites and browsers which continue to support this tag. What you learn hear about fonts will help you understand the upcoming lessons in CSS. The basics of typefaces do not change. The syntax will change slightly.
We learned in the last lesson about BOLD and ITALIC. These are forms of emphasis which can be applied to any typeface family.
For instance, here are examples of Arial regular, italic, bold and bold italic.
And here are examples of Times New Roman regular, italic, bold and bold italic.
The baseline of a line of type is what the flat-bottomed capital letters would sit on. Some lowercase letters—g, j, p, q, y—have parts that descend below the baseline. These are called descenders. Some lowercase letters have parts which extend up above the shortest letters—b, d, f, h, k, l, t. These are called ascenders. Between the ascenders and descenders is called the "x-height" of the font.
Some fonts have relatively large x-heights compared to the capitals and are thus a little easier to read.
Others may have small x-heights compared to the capitals, making them a little more difficult to read.
Most typefaces come in one or another style called serif or sans-serif. Sans merely means "without," as if the serifs have been sanded off. Other typefaces are called "novelty" faces, because they are used more for display type in order to create a certain mood or feeling.
Times New Roman, Garamond, Palatino Linotype
Arial, Futura, Verdana
Monotype Corsiva, Pepita, Papyrus, Vivaldi
Not all computers have the typefaces, Arial or Times New Roman. Typically, the fonts used in displaying a web page come from the client or user computer, not from the web hosting server. Because of this, you have little control over the actual typeface used.
What you can control are to suggest a hierarchy of choices, ending with either "serif" or "sans-serif."
The attributes for the [font] tag are,
We will be going over the use of color in the next lesson. We will use a little color here, though.
Size is a number from 1 to 7. Browser default is 3.
An example of font tag use,
[font color="red" size="4" face="arial, helvetica, sans-serif"]This is sample text.[/font]
If a font name contains a space, it needs to be placed in quotes. Since the font names are already in doublequotes, you then need to enclose the two-part font name in single quotes.
[font face="'palatino linotype', Times New Roman, serif"]This is a serif face.[/font]
We have already encountered two special symbols in earlier lessons. One of these is the non-breaking space. Though it is not itself visible, it does create a visible effect by keeping two words together. We also saw the copyright symbol. The following is a very short sample of a very long list of available symbols used for punctuation, currency, letter diacritics and much more.
– – –
— — —
¡ ¡ ¡
¿ ¿ ¿
" " "
¢ ¢ ¢
© © ©
÷ ÷ ÷
€ € €
® ® ®
™ ™ ™
° ° °
é é é
ñ ñ ñ
Now, get ready for your Action Item.
[not included here]
The next lesson will go in depth into the subject of color.
"Club Diver," "Darkness Speaks," and "Fanfare for Space" by Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0