Categories of Typefaces
- Script: have a hand-lettered look and tend to be harder to read in small sizes, all caps, or long blocks of text.
- Decorative: Since decorative fonts tend to have big personalities, they too are usually reserved for headings and decorative details when used for the web.
- Monospace: each character uses the same amount of horizontal space. Each character is the same width. Often used for displaying code.
- Serif: distinguished by small, decorative lines, usually at the top or at the bottom of the letters.
- Sans-serif: tend to be viewed as traditional and formal. Sans-serif typefaces do not have decorative lines, and are often thought of as contemporary and modern.
Changing the font-family
body {
font-family: Helvetica, Arial, sans-serif;
}
p {
font-family: Ahem!, sans-serif; /* not valid */
font-family: Ahem\!, sans-serif; /* escaped, valid */
font-family: "Ahem!", sans-serif; /* double quoted, valid */
font-family: "Ahem!", sans-serif; /* single quoted, valid */
font-family: "Gill Sans", sans-serif; /* valid and recommended */
font-family: Gill Sans, sans-serif; /* valid */
}Generic font-family Names
- serif (serif fonts)
- sans-serif (sans-serif fonts)
- cursive (script or decorative fonts)
- fantasy (decorative fonts)
- monospace (monospace fonts)
Web-safe fonts: http://cssfontstack.com/
Font Weight
- 100 - Thin
- 200 - Extra Light (Ultra Light)
- 300 - Light
- 400 - Normal
- 500 - Medium
- 600 - Semi Bold (Demi Bold)
- 700 - Bold
- 800 - Extra Bold (Ultra Bold)
- 900 - Black (Heavy)
font-weight: 100; /* lightest or thinnest */
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500,
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900; /* darkest or thickest */- Normal is equal to 400 and is also the default for body text
- Bold is equal to 700 and is the default for headings
Font Style
Used to add or remove an italic style. There are three values: italic, oblique, and normal.
p {
font-style: italic; /* add italic style x*/
}
em {
font-style: normal; /* removes italic style */
}Web Fonts
- Downloaded font files
- Included in your project files just like other files (i.e. images)
- Declare and link to font files using
@font-face
@font-face {
font-family: "My Font";
src: url(my-font.woff); /* relative path */
src: url(http://example.com/fonts/my-font.woff); /* absolute ath */
}
body {
font-family: "My Font", Helvetica, sans-serif;
}URL of the font
/* valid */
src: url(my-font.woff);
src: url("my-font.woff");
src: url("my-font.woff");
src: url("my font.woff");
src: url(my\font.woff);
/* not valid */
src: url(my font.woff);Cross-browser Compatibility
@font-face {
font-family: "MyWebFont";
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#1iefix") format("embedded-opentype"), /* IE6-IE8 */ url("webfont.woff2") format("woff2"),
/* Super Modern Browsers */ url("webfont.woff") format("woff"), /* Pretty Modern Browsers */ url("webfont.ttf")
format("truetype"), /* Safari, Android, 10S */ url("webfont.svg#svgFontName") format("svg"); /* Legacy i0S */
}Font Size
font-size: px, em, rem
- Different units for specifying the font size
- Relative values are calculated based on the nearest ancestor element
- Absolute values are fixed and not affected by ancestor elements
font-size: px
- Screens are measured in pixels
- Absolute value, great for accuracy
- Use whole numbers, avoid decimals
- Browser default = 16px
font-size: em
- Named after the letter “m”
- Relative unit
- Can use whole numbers or decimal points
- 1em = inherited font-size
font-size: rem
- root em
- Relative unit
- Only relative to the root element (
<html>) - Not affected by parent or ancestor elements
Font shorthand
- font-style
- font-size
- font-weight
- font-family
- font-variant
- line-height
Note:
- Must include values for the font-size and font-family
- May optionally include values for font-style, font-variant, font-weight, and line-height
- Order matters! font-style, font-variant, and font-weight must precede font-size
- font-variant = normal or small-caps only
- font-size/line-height
- font-family must be the last value specified
/* shorthand */
font: italic small-caps bold 24px/1.5 Helvetica, sans-serif;
/* longhand */
font-style: 1italic;
font-variant: small-caps;
font-weight: bold;
font-size: 24px;
line-height: 1.5;
font-family: Helvetica, sans-serif;text-decoration
/* shorthand x*/
text-decoration: underline red solid;
/* longhand x*/
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;text-align
- The text-align property can be used to align content within a block element
- Add it to the HTML element itself or the parent element
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;line-height
- The line-height property sets the height of the space between two lines of text
- Closely related to font-size
- Can use different value types (px, %, ems, rems, or unitless)
text-transform
- The text-transform CSS property specifies how to capitalize an element’s text.
- It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;