Some common terms:
An individual mark on a written medium that contributes to the meaning of what is written. A glyph can be an alphabetic or numeric font or some other symbol that pictures an encoded character. An ideal characterization of characters and glyphs and their relationship may be stated as follows:
Letters, numbers, punctuation and other symbols stored in a computer file or physically as metal stamps. You may have a font for bold, a font for italic and a normal font for example all having the same typeface and together considered a family.
]The stylistic rendering of letters, numbers, punctuation and other symbols for a Font or Fonts in a Font Family.
In typography, a typeface is a set of one or more fonts each composed of glyphs that share common design features. Each font of a typeface has a specific weight, style, condensation, width, slant, italicization, ornamentation, and designer or foundry (and formerly size, in metal fonts). You may think of a Font Family as the normal, bold and italic version of the Font. Wikipedia.
A type foundry is a company that designs or distributes typefaces. Originally, type foundries manufactured and sold metal and wood typefaces and matrices for line-casting machines like the Linotype and Monotype machines designed to be printed on letterpress printers. Wikipedia.
Each font can have more than one style. Arial for example has Arial Black. Each requires a separate set of glyphs. More generally font weight it is isolated to mean the thickness of the typeface.
A detailed list of font terminology can be found at the FontShop Glossary.
A list of one or more font family names that are available either on the web browser’s computer or were downloaded. Examples:
font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospacefont-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-seriffont-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serifGenerally you want to include a safe font name for fallback in case the font you intended is not available. The fallback font is selected by the web browser usually from the computer operating system. This is a list of fallback font family names:
Size of the font. Examples:
font-size:largefont-size:50pxfont-size:1.1emfont-size:110%Although you can change the font size for text containing tags, be sure to use the correct semantic font to maximize search engine reading. In other words a large font for a heading using the <p> tag should be replaced with the <h1> tag.
Boldness of the font. Examples:
font-weight:boldfont-weight:lighter (less common)font-weight:bolder (less common)font-weight:100 (lightest) to font-weight:900 (boldest).Make name sense of the numeric weights:
Italic or not. Examples:
font-style:italicfont-style:normalUnderline, overline or line through. Examples:
text-decoration:underlinetext-decoration:overlinetext-decoration:line-throughThe case of letters. Examples:
text-transform:capitalize (first letter of words uppercase)text-transform:uppercase (everything uppercase)text-transform:lowercase (everything in lowercase)text-decoration:noneSpacing and positioning. Examples:
letter-spacing:0.5em; (spacing between letters)word-spacing:2em; (spacing between words)line-height:1.5 (height of the lines in an element without impacting font size. multiple of the font size)text-align:center (Align within element left, right, center, or justify.) text-indent:1em; (Indent the first line of a paragraph. Not common for digital media. Common for print media.)Properties
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
Browsers
Basic Example
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>