StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>From the <a href="http://www.w3.org/TR/CSS21/fonts.html#font-boldness" rel="nofollow"><code>font-weight</code> section of the CSS2.1 specification</a>:</p> <blockquote> <p>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'.</p> </blockquote> <pre class="lang-none prettyprint-override"><code>Inherited val 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 </code></pre> <p>This means that anything <code>bolder</code> than a <code>font-weight</code> of 400 is given a weight of 700, and anything bolder than a font-weight of 700 is given a weight of 900.</p> <p>This is exactly what is happening in your JSFiddle demo.</p> <h3>Bolder</h3> <pre class="lang-html prettyprint-override"><code>This is some text with weight 400.  This text is one step bolder than above.  This text is one step bolder than above.  This text is one step bolder than above.  This text is one step bolder than above.  </code></pre> <h3>Lighter</h3> <pre class="lang-html prettyprint-override"><code>This is some text with weight 400.  This text is one step lighter than above.  This text is one step lighter than above.  This text is one step lighter than above.  </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload