Re: bolder/lighter defintion

Philippe Wittenbergh wrote:

>>> Values of 'bolder' and 'lighter' indicate values relative to the
>>> weight of the parent element.  Based on the inherited weight value,
>>> the weight used is calculated using the chart below.  Child elements
>>> inherit the calculated weight, not a value of 'bolder' or 'lighter'.
>>>
>>>   Inherited value   bolder  lighter
>>>   100               400     100
>>>   200               400     100
>>>   300               400     100
>>>   400               700     100
>>>   500               700     100
>>>   600               900     400
>>>   700               900     400
>>>   800               900     700
>>>   900               900     700
>>>
>>> The table above is equivalent to selecting the next relative bolder
>>> or lighter face, given a font family containing normal and bold faces
>>> along with a thin and a heavy face. Authors who desire finer control
>>> over the exact weight values used for a given element should use
>>> numerical values instead of relative weights.
>
> Just to clear up any possible misunderstanding on my part. Assuming
> the used font has weights 100, 200, 300 and 400, and the parent
> element is set to use font-weight 100, then 'bolder' for a descendent
> element will still map to 200. Correct ? Or will it always go to 400 ?

No, the bolder/lighter calculation here is independent of the font
family, it will always jump to 400 if the parent element has weight 100,
irregardless of the set of weights available for any given family.

A direct mapping like this isn't an ideal solution for all situations
but it does do the right thing for most cases, bolder maps to a
distinctly bolder face if it exists and lighter a distinctly lighter
face if it exists. It also makes the definition much simpler for both
authors and implementors.  Using specific weights will always offer a
much finer degree of control.

Subtle weight distinction:

  p { font-weight:100; }
  p > span { font-weight:300; }

  <p>text text <span>bolder text</span> and more text</p>

Dramatic weight distinction:

  p { font-weight:100; }
  p > span { font-weight:bold; }

  <p>text text <span>bolder text</span> and more text</p>

Renderings of these:
http://people.mozilla.org/~jdaggett/weightdistinctions.png

John

Received on Tuesday, 19 May 2009 04:34:12 UTC