Delphinidin

ITALIC, BOLD, SMALL CAPS

- Italic Text
The font-style property is used to switch between styles provided by a particular font; those styles are italic or oblique. For many fonts the information required to render text in an italic version of the font is included in the font file. The oblique style does not use this information, even if it is available, instead it simulates italicized text, not always to great effect. The following table outlines the possible values for the font-style property.

{font-style: normal | italic | oblique;}
Initial value: normal

Example:
h1 {font-style: italic;}

The italic and oblique values are, with most fonts, indistinguishable in how they render; however, I have never used or seen used the oblique style in real-world code, so we will limit our use of the font-style to italicizing text. There is only one gotcha with font-style. Not all fonts have an italic style, and browsers differ in how they handle this case. IE will render the font in the normal style, whereas other browsers will fall back to the next specified font that has an italic version.

- Bold Text
The font-weight property provides the functionality to specify how bold a font is. The following table outlines the font-weight property and the values that it allows.

{font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;}
Initial value: normal

Example:
h1 {font-weight: 900;}

As you can see in the preceding table, the font-weight property has several values. Despite all of these different values being available for the font-weight property, in real-world web design, a font is either bold or it isn’t. That is to say, in real-world web design, the only two values that matter in the preceding table are the normal and bold values. This majority of fonts used on the Web do not support the variations that the font-weight property allows. For those interested, normal text usually equates to a font-weight value of 400 and bold text to a value of 700.

- Small Caps Text
The following table outlines the font-variant property and its possible values.

{font-variant: normal | small-caps;}
Initial value: normal

Example:
h1 {font-variant: small-caps;}

The font-variant: small-caps; declaration causes letters to appear in uppercase but scaled slightly smaller than capitalized letters. The capitalized letter maintains its case and size, but all lowercase letters are displayed as capital letters scaled slightly smaller than any real capital letters appearing in the markup’s source code. It can be a nice effect to use in headings but can make long sections of text hard to read.

FONT SIZE
The font-size property is, of course, used to control the size of fonts. The following table outlines the font-size property and its possible values.

{font-size:<absolute-size> | <relative-size> | <length> | <percentage>}
Initial value: medium

Of these, you will rarely find any values other than length and percentage in use in real world code, so let’s briefl y take a look at absolute-size and relative-size before we move on to the practical stuff.

- Absolute Font Sizes
The <absolute-size> value notation of the font-size property refers to one of seven keyword values. Absolute values for the font-size property are defined using keywords that range from xx-large to xx-small. The following table outlines the absolute values and their relation to HTML heading sizes.

KEYWORD |XX-SMALL | X-SMALL | SMALL | MEDIUM | LARGE | X-LARGE | XX-LARGE
HTML |||| n/a ||||| <h6> |||| <h5> || <h4> ||| <h3> || <h2> |||| <h1>Heading

These keywords specify the font size based on a scaling factor of 1.2. Scaling factor is the ratio between two shapes. The scaling factor is determined by multiplying the font size by 1.2 to determine the next font size relative to the previous one. For instance, if a font size of 16 pixels is assumed for the medium keyword value, the large keyword would be approximately 20 pixels, rounding up from 19.2, because 16 multiplied by 1.2 equals 19.2.

- Relative Font Sizes
The <relative-size> notation of the font-size property refers to two values: larger and smaller. When either of these two values is used, the font size is determined by the values appearing in the table for absolute size. If the value is specified with a length unit — say, for instance, as pixels — the browser simply applies a 1.2 scaling factor to that size to get the larger size.

- Length and Percentage Font Sizes
Length and percentage font sizes are what you will most commonly see and use, and both work in the same way. Font sizes can be set in any of the absolute (inches, centimeters, millimeters, points, and picas) or relative (em, ex, pixels and percentage) measurements that we saw in the “Length and Measurement”  before. Of these you will rarely see absolute measurements used for text outside of print style sheets  and will rarely see ex used in any context.

The font size for the h1 element is 1.5em, which means 1.5 times the default font size. The font size of the p element is made 150% larger than the default font, and you can see that they are both the same size. This means that 1em is interchangeable with 100%, with 2em being the same as 200% etc. As long as you set your font sizes with ems or percentages, all browsers, including IE, will allow your users to resize text. It is therefore common to see styles such as the one in the following code.

body {font-size: 62.5%;}

Based on the default font size of 16px, common to all modern web browsers, this sets the size of 1em to 10px, making it much easier to calculate the value required to set font sizes of other values (for example, 13px would be 1.3em or 130%). There is one gotcha with relative measurements: They are cumulative. In other words, if you nest two elements that both have styles changing the font size of the text, both changes will be applied.

THE FONT SHORTHAND PROPERTY
Font is a shorthand property that allows you to write several font-related properties in a single property.

Example:
body {font: 62.5% arial, helvetica, sans-serif;}
h1 {font: small-caps 1.6em “Times New Roman”, Georgia, Serif;}
.text .footer {font: italic 1em arial, helvetica, sans-serif;}