index.html

--- layout: single property_name: font-size ---<section id="font-size" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/font-size/" data-property-name="font-size" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="font-size">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-size" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#font-size"><span>#</span>font-size</a></h2><div class="property-description"><p>Defines the size of the text.</p></div></header><style type="text/css">.font-size { line-height: 1.2; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: medium;">font-size: medium;</code></p><div class="example-description"><p>The text will use the browser&#39;s default <strong>medium</strong> size.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div font-size" id="font-size-medium"><p>Hello world</p><p>The quick brown fox jumps over the lazy dog</p></div></div></aside><style type="text/css">#font-size-medium{ font-size:medium;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 20px;">font-size: 20px;</code></p><div class="example-description"><p>You can use <strong>pixel</strong> values.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div font-size" id="font-size-20px"><p>Hello world</p><p>The quick brown fox jumps over the lazy dog</p></div></div></aside><style type="text/css">#font-size-20px{ font-size:20px;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 1.2em;">font-size: 1.2em;</code></p><div class="example-description"><p>You can use <strong>em</strong> values.</p><p>The value is <strong>relative</strong> to the <strong>parent</strong>&#39;s <code>font-size</code>.<br>As a result, the value will <strong>cascade</strong> if used on child elements.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div font-size" id="font-size-12em"><div class="parent">Parent container: <strong>18px</strong><div class="block block--alpha">Font-size: 1.2em = <strong>21.6px</strong><div class="block block--pink">Font-size: 1.2em = <strong>25.92px</strong><div class="block block--yellow">Font-size: 1.2em = <strong>31.104px</strong></div></div></div></div></div></div></aside><style type="text/css">#font-size-12em .parent { font-size: 18px; }#font-size-12em .block { font-size: 1.2em;margin-top: 0.25rem; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 1.2rem;">font-size: 1.2rem;</code></p><div class="example-description"><p>You can use <strong>rem</strong> values.</p><p>The value is <strong>relative</strong> to the <strong>root element</strong>&#39;s <code>font-size</code>, which is the <code>&lt;html&gt;</code> element.<br>As a result, the value will <strong>not</strong> vary depending on the <em>depth</em> of the element in the HTML hierarchy, and will reamin context independent.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div font-size" id="font-size-12rem"><div class="parent"><code>&lt;html&gt;</code> root element: <strong>18px</strong><div class="block block--alpha">Font-size: 1.2rem = <strong>21.6px</strong><div class="block block--pink">Font-size: 1.2rem = <strong>21.6px</strong><div class="block block--yellow">Font-size: 1.2rem = <strong>21.6px</strong></div></div></div></div></div></div></aside><style type="text/css">#font-size-12rem .parent { font-size: 18px; }#font-size-12rem .block { font-size: 1.2rem;margin-top: 0.25rem; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 90%;">font-size: 90%;</code></p><div class="example-description"><p>You can use <strong>percentage</strong> values. They act like em values.</p><p>The value is <strong>relative</strong> to the <strong>parent</strong>&#39;s <code>font-size</code>.<br>As a result, the value will <strong>cascade</strong> if used on child elements.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div font-size" id="font-size-90"><div class="parent">Parent container: <strong>18px</strong><div class="block block--alpha">Font-size: 90% = <strong>16.2</strong><div class="block block--pink">Font-size: 90% = <strong>14.58px</strong><div class="block block--yellow">Font-size: 90% = <strong>13.122px</strong></div></div></div></div></div></div></aside><style type="text/css">#font-size-90 .parent { font-size: 18px; }#font-size-90 .block { font-size: 90%;margin-top: 0.25rem; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: smaller;">font-size: smaller;</code></p><div class="example-description"><p>You can use <strong>relative keywords</strong>. The value is relative to the <strong>parent</strong>.</p><p>The following are available:</p><ul><li><code>larger</code></li><li><code>smaller</code></li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div font-size" id="font-size-smaller"><div class="parent">Parent container: <strong>18px</strong><div class="block block--alpha">Font-size: smaller<div class="block block--pink">Font-size: smaller<div class="block block--yellow">Font-size: smaller</div></div></div></div></div></div></aside><style type="text/css">#font-size-smaller .parent { font-size: 18px; }#font-size-smaller .block { font-size: smaller;margin-top: 0.25rem; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: x-large;">font-size: x-large;</code></p><div class="example-description"><p>You can use <strong>absolute keywords</strong>. The value is relative to the <strong>root element</strong> <code>&lt;html&gt;</code>.</p><p>The following are available:</p><ul><li><code>xx-small</code></li><li><code>x-small</code></li><li><code>small</code></li><li><code>medium</code></li><li><code>large</code></li><li><code>x-large</code></li><li><code>xx-large</code></li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div font-size" id="font-size-x-large"><div class="parent"><code>&lt;html&gt;</code> root element: <strong>18px</strong><div class="block block--alpha">Font-size: x-large<div class="block block--pink">Font-size: x-large<div class="block block--yellow">Font-size: x-large</div></div></div></div></div></div></aside><style type="text/css">#font-size-x-large .parent { font-size: 18px; }#font-size-x-large .block { font-size: x-large;margin-top: 0.25rem; }</style></section></section>