Created
October 20, 2015 17:07
-
-
Save paceaux/3c673c09e85cf91b358f to your computer and use it in GitHub Desktop.
Font sizing demonstration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Font sizing demonstration | |
| */ | |
| html { | |
| color: #333; | |
| font-family: Helvetica, Arial; | |
| line-height:1.618; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: #f1f1f1; | |
| } | |
| h1, h2, h3, h4, h5, h6, p, li { | |
| font-weight: normal; | |
| padding: 0 ; | |
| margin: 0; | |
| } | |
| h1, .h1 { | |
| font-size: 3em; | |
| } | |
| h2, .h2 { | |
| font-size: 2em; | |
| } | |
| h3, .h3 { | |
| font-size: 1.5em; | |
| } | |
| h4, .h4 { | |
| font-size: 1.25em; | |
| } | |
| p, .p{ | |
| font-size: 1em; | |
| } | |
| .f-largest {font-size: 48px;} | |
| .f-larger {font-size: 32px;} | |
| .f-large {font-size: 24px;} | |
| .f-standard {font-size: 16px;} | |
| [class*="Container"] { | |
| padding: 10px; | |
| outline: .3125em solid #434343; | |
| margin: 1rem; | |
| } | |
| .bigContainer { | |
| font-size: 24px; | |
| } | |
| .smallContainer { | |
| font-size: 10px; | |
| } | |
| .bigContainerEm { | |
| font-size: 2em; | |
| } | |
| .smallContainerEm { | |
| font-size: .625em; | |
| } | |
| .example { | |
| padding: 1rem; | |
| border: 8px solid ; | |
| margin: 3rem 0; | |
| background: #fefefe; | |
| } | |
| .example__expl{ | |
| color: #565656; | |
| font-style: italic; | |
| border-bottom: 1px dashed; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- content to be placed inside <body>…</body> --> | |
| <header> | |
| <p>This is a demonstration and explanation of relative font-sizes, in particular how to deal with <code>em</code></p> | |
| </header> | |
| <figure class="example"> | |
| <figcaption class="example__expl"> | |
| <p>Fonts, size in em, in their natural state</p> | |
| <p>Font size is based on the font-size of "body", since that's the parent element</p> | |
| </figcaption> | |
| <h1 class="h1">Font-size of 3em</h1> | |
| <h2 class="h2">Font-size of 2em</h1> | |
| <h3 class="h3">font size of 1.5em</h3> | |
| <p class="p">font-size of 1em</p> | |
| </figure> | |
| <figure class="example"> | |
| <figcaption class="example__expl"> | |
| <p>font size is based on the container, which is <code>.bigContainer</code>, and we increased the font size in it. <code>.bigContainer</code>'s font-size is 24px; | |
| </figcaption> | |
| <div class="bigContainer"> | |
| <h1 class="h1">Font-size of 3em</h1><h2 class="h2">Font-size of 2em</h1><h3 class="h3">font size of 1.5em</h3> | |
| <p class="p">font-size of 1em</p> | |
| </div> | |
| </figure> | |
| <figure class="example"> | |
| <figcaption class="example__expl"> | |
| <p>font size is based on the container, which is <code>.smallContainer</code>, and we decreased the font size in it. <code>.smallContainer</code>'s font-size is 10px. | |
| </figcaption> | |
| <div class="smallContainer"> | |
| <h1 class="h1">Font-size of 3em</h1> | |
| <h2 class="h2">Font-size of 2em</h1> | |
| <h3 class="h3">font size of 1.5em</h3> | |
| <p class="p">font-size of 1em</p> | |
| </div> | |
| </figure> | |
| <figure class="example"> | |
| <figcaption class="example__expl"> | |
| <p>these are sized in pixels. they won't inherit the font size of their parent. They'll look the same as the first example, event though they're inside of <code>.bigContainer</code></p> | |
| </figcaption> | |
| <div class="bigContainer"> | |
| <h1 class="f-largest">Font-size of 48px</h1> | |
| <h2 class="f-larger">Font-size of 32px</h1> | |
| <h3 class="f-large">font size of 24px</h3> | |
| <p class="f-standard">font-size of 16px</p> | |
| </div> | |
| </figure> | |
| <figure class="example"> | |
| <figcaption class="example__expl"> | |
| <p>This is where people make their lives difficult. This is <code>.smallContainer</code> inside of <code>.bigContainer</code>.</p> | |
| <p>Take note that, when they aren't in containers, their font-size is the same. The one size in pixels never changes. The one sized in em has changed every time. </p> | |
| </figcaption> | |
| <h3 class="h3">I have a font-size of 1.5em</h3> | |
| <h3 class="f-large">And I have a font-size of 24px</h3> | |
| <p>font-size of 1em</p> | |
| <div class="bigContainer"> | |
| <h3 class="h3">I have a font-size of 1.5em</h3> | |
| <h3 class="f-large">And I have a font-size of 24px</h3> | |
| <p>font-size of 1em</p> | |
| <div class="smallContainer"> | |
| <h3 class="h3">I have a font-size of 1.5em</h3> | |
| <h3 class="f-large">And I have a font-size of 24px</h3> | |
| <p class="p">font-size of 1em</p> | |
| </div> | |
| </div> | |
| </figure> | |
| <figure class="example"> | |
| <figcaption class="example__expl"> | |
| <p>This is where people make their lives absolutely terrible.Instead of setting the <code>font-size</code> of our <em>containers</em> in pixels, we'll set them in <code>em</code>. </p> | |
| <ol> | |
| <li> | |
| We started the font-size at 1em (which was probably 16px).</li> | |
| <li> Then, <code>.bigContainerEm</code> set the font-size to 2em. So the base font-size became 32px.</li> | |
| <li>but our <code>.h3</code> has a font-size of 1.5em. So its font-size is 48px</li> | |
| <li>In <code>.smallContainerEm</code> we set the font-size to .625em. So, we do <code>32px * .625</code> and get a base font-size of 20px.</li> | |
| <li>So, the <code>.h3</code> still has a font-size of 1.5em. now it's <code> 1.5 * 20</code> which means that this computed font-size is 30px</li> | |
| </ol> | |
| </figcaption> | |
| <h3 class="h3">I have a font-size of 1.5em</h3> | |
| <h3 class="f-large">And I have a font-size of 24px</h3> | |
| <p class="p">font-size of 1em</p> | |
| <div class="bigContainerEm"> | |
| <h3 class="h3">I have a font-size of 1.5em</h3> | |
| <h3 class="f-large">And I have a font-size of 24px</h3> | |
| <p class="p">font-size of 1em</p> | |
| <div class="smallContainerEm"> | |
| <h3 class="h3">I have a font-size of 1.5em</h3> | |
| <h3 class="f-large">And I have a font-size of 24px</h3> | |
| <p class="p">font-size of 1em</p> | |
| </div> | |
| </div> | |
| </figure> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment