font-weight in CSS| font-weight value | effect |
|---|---|
| normal | This is normal. |
| bold | This is bold. |
| bolder | This is bold. This is bolder. |
| 100 | This is light (100). |
| lighter | This is light. This is lighter. |
| 300 | This is light (300). |
font-styleA value of "italic" selects a font that is labeled "italic", or, if that is not available, one labeled "oblique". while "oblique" selects a font that is labeled "oblique". The font that is labeled "oblique" in the font database may actually have been generated by electronically slanting a normal font.
The lower-contrast type can cause problems for people with compromised vision. For professional design scenarios where a broad audience is expected, sticking with more conventional color and contrast choices is important for maximum readability.
Perhaps the most irksome problem with type design on the Web is that the list of usable fonts is both small and unpredictable, given that users can so easily customize which fonts they have installed on their computer.
Web-based type relies on the fonts installed on the end user's computer. Most users aren't designers, so their list of fonts very rarely contains more than whatever comes installed with their operating system and various software packages.
| Windows | Macintosh | Unix/Linux | |
|---|---|---|---|
| Serif | Book Antiqua, Bookman Old Style, Garamond | New York, Palatino, Times | Bitstream Vera Serif, New Century Schoolbook, Times, Utopia |
| Sans serif | Arial Narrow, Century Gothic, Lucida Sans Unicode, Tahoma | Charcoal, Chicago, Geneva, Helvetica, Lucida Grande | Bitstream Vera Sans, Helvetica, Lucida |
| Monospace | Courier, Lucida Console | Courier, Monaco | Bitstream Vera Mono, Courier |
Serif fonts have decorative serifs, which are the little barbs and hooks at the ends of various letter strokes. Times New Roman is almost always the default serif font, unless the user has manually changed it.
Sans-serif fonts are without serifs. Arial is almost always the default sans-serif font.
A monospace font is a fixed-width font: Each character is given the same amount of space. So, for example, "i" takes up the same amount of space, widthwise, as "m" in these fonts. They are useful when listing code, which requires consistent character positions from line to line. Courier (or Courier New) is almost always the default monospace font.
Cursive fonts simulate a hand-written appearance, and they are mainly used for headers. The name suggests script-style fonts, but the category extends to any font that appears hand-written. Defaults vary, but Comic Sans is the most common cursive font.
A fantasy font is purely decorative and is mainly used for headers. Because this classification contains such a wide range of fonts, there's no way to predict how the combination of font family and size will appear. Thus, no one uses fantasy for serious design on the Web.
Always use substitute fonts when you're not sure if the font you're using is widely installed. Some fonts look bigger than others, even though you've given them the same font-size value. When you're assigning multiple font names to the font-family, keep in mind that the font-size value applies to all of them equally. Testing your choice on other browsers and platforms ensures the best legibility possible.
The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").
Relative unit or Absolute unit?
Absolute length units are only useful when the physical properties of the output medium are known. Fonts sized with the px unit (a relative unit) don't scale in Internet Explorer for Windows.
Building a style sheet that uses a relative unit means starting with a base size, 1em or 100%, and adjusting all font sizes proportionately. Headers may be 150% or 2.2em, captions might be 0.8em or 75%. The base size may be specified or left to browser defaults, and in either case users can change their preferred base size and have the fonts on the page scale accordingly. This user-controlled adjustment is the main benefit of a relative unit.
The em unit is equal to the computed value of the font-size property of the element on which it is used. The exception is when em occurs in the value of the font-size property itself, in which case it refers to the font size of the parent element.
h1 { line-height: 1.2em }
means that the line height of "h1" elements will be 20% greater than the font size of the "h1" elements.
h1 { font-size: 1.2em }
means that the font-size of "h1" elements will be 20% greater than the font size inherited by "h1" elements.
The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context.
<div id="benefits"> <h3>Benefits</h3> <p>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for CSS-based design. This is sorely needed, even today.</p> </div>
#benefits {
font-size: 75%;
}
p {
font-size: 75%;
}
What's the size of the paragraph text?
With every method of specifying font sizes introducing slightly different problems, what is a poor Web designer to do?
There are many reliable methods, each with pros and cons: 1) The Em Method, 2) The Style-Switching Method. 3) ... . We use the first one most often.
When a percentage value was assigned to the body element and an em unit was assigned to everything else, relative font sizing could be used with a strong degree of consistency.
body { font-size: 76%; }
p { font-size: 1em; }
For exact control of onscreen type, px makes the most sense. So, create a "preferred stylesheet" with the default font-size, and create one or several more "alternative stylesheet(s)" with bigger font-sizes. Provide the bigger font-size options on your web page, and use the style switching script to swtich between alternative and preffered stylesheets. Read this article about style switching for more information about the style switching JavaScript.
| property | example |
|---|---|
| Font-Variant | With font variant is set to small-caps |
| Text-Decoration | blink text; line-through text; overline text; underline text |
| White-Space Styling | Smller line height Smller line height Smller line height Smller line height Smller line height; Bigger line height Bigger line height Bigger line height Bigger line height Bigger line height Bigger line height |
| Letter-Spacing | Big letter space; Negative letter space |
| Word-Spacing | These are spaced words |
| Text-Align | Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified?
Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? Am I justified? |