font-weight

The display of text elements such as headings, notes, and paragraphs are controlled by the Font Properties. This is the most common type of formatting used with Style Sheets. There are five font properties, as listed below. Each font property has its own array of values. • font-style Sets the font style (ie: italic) • font-variant Sets the font case (upper, lower, small-caps) • font-weight Sets the font to lighter or bolder • font-size Sets the font size • font-family Sets the type of font (font face) used font-weight This property is used to display lighter or darker versions of the font used, and can be set as a numeric or relative value. font-weight values are inherited. The statement in which the value is first used is referred to as the Parent Element. All other instances of the value below the Parent are referred to as Child Elements. When you set the font-weight for an element, the child elements inherit that weight as thier normal weight. Since the child elements see this as thier normal weight, you can increase or decrease the weight based on this inherited weight. font-weight values: normal weight The normal statement will set the font weight to its normal, or default, level which is specified by the font itself. syntax: {font-weight: normal} relative weight This statement will set the font-weight to a value relative to the normal weight. The options for this vlaue are bold, bolder, light, and lighter. syntax: {font-weight: bold} {font-weight: bolder} {font-weight: light} {font-weight: lighter} gradient weight This statement will set the font-weight to be expressed as a specific level of heaviness. The options for the is value are numeric; 100, 200, 300, 400 (which is the same weight as normal), 500, 600, 700 (which is the same weight as bold), 800, and 900. By using the Gradient Weight method, you achieve a greater control of the weight of the font. syntax: {font-weight: 100} {font-weight: 200} ... etc ... {font-weight: 800} {font-weight: 900} EXAMPLES: BODY {font-weight: 500} Because the font-weight statement is attached to the BODY tag, this example sets the font-weight for the entire document to a level slightly higher than normal, since the font-weight value of 400 is considered the normal weight. This statement is of the Gradient type, which is a numeric value. It should be noted that all values are multiples of 100. That is, a value of 330 would not be interpreted as a valid value. H2, H4 {font-weight: bolder} This statement sets the heading levels H2 and H4 to a BOLDER weight, which will appear darker than the previously set level, regardless of what that level is. However, since a numeric (Gradient Type) value of 900 is the heaviest weight supported, applying a BOLDER font-weight statement will produce an un-noticable result: There will be no change in the appearance of the font.