css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>
    <p class="fleuron">❧</p>
    <h1>Typographic Details Cheat Sheet</h1>
</header>
<main>
    <blockquote>
        <p>One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy.</p>
        <cite>&mdash; Robert Bringhurst</cite>
    </blockquote>
    <hr>
    <section>
        <h2>Introduction</h2>
        <p>Welcome to this quick cheat sheet that will you help you know which spaces, punctuation, characters and numbers to use to make your web typography great! Much of this content has been adapted from Richard Rutter's excellent handbook <a href="http://book.webtypography.net/">Web Typography</a>.</p>
    </section>
    <section>
        <h2>Use the right spaces</h2>
        <ul>
            <li>Use a <em>non-breaking space</em> to keep words together on the same line. <br/>
                <span class="all-small-caps">Example:</span> Page&nbsp;2.</li>
            <li>Use a <em>thin space</em> to separate characters when a regular space is too big. One use is separating nested quotation marks. <br/>
                <span class="all-small-caps">Example:</span> <i>Looking up he said, “She mouthed ‘I love you’&thinsp;” and then returned to his book.</i></li>
            <li>Use a <em>hair space</em> to prevent adjacent characters touching. <br/>
                <span class="all-small-caps">Example:</span> D.&#8239;H.&#8239;Lawrence.</li>
            <li>Use a <em>narrow no-break space</em> to prevent initials or numbers and their units from wrapping across two lines. <br/>
                <span class="all-small-caps">Example:</span> A hair space is 1/24&#8239;em wide.</li>
        </ul>
        <figure>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: left;">Space type</th>
                        <th><span class="all-small-caps">HTML</span> entity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Non-breaking</td>
                        <td><code>&amp;nbsp;</code></td>
                    </tr>
                    <tr>
                        <td>Thin</td>
                        <td><code>&amp;thinsp;</code></td>
                    </tr>
                    <tr>
                        <td>Hair</td>
                        <td><code>&amp;hairsp;</code></td>
                    </tr>
                    <tr>
                        <td>Narrow no-break</td>
                        <td><code>&amp;#8239;</code></td>
                    </tr>
                </tbody>
            </table>
        </figure>
    </section>
    <section>
        <h2>Use the right punctuation marks</h2>
        <ul>
            <li>Use a hyphen for one of the following:
                <ul>
                    <li>joining words to indicate they have a combined meaning</li>
                    <li>indicating missing words shared by a series of compounds</li>
                    <li>indicating stuttering speech</li>
                    <li>splitting words when breaking them across lines</li>
                </ul>
            </li>
            <li>Use an <em>en dash</em> in phrases with numerical ranges. <br/>
                <span class="all-small-caps">Example:</span> 4–5 minutes.</li>
            <li>Use an <em>em dash</em> to set off phrases. Separate em dashes from phrases with hair spaces. You can also use to indicate attribution after a quote, followed by a full space. <br/>
                <span class="all-small-caps">Example:</span> this and that&hairsp;—&hairsp;that and this.</li>
            <li>Use a proper minus glyph to mean minus. <br/>
                <span class="all-small-caps">Example:</span> 10−7=3.</li>
            <li>Use an <em>obelus</em> to indicate division. <br/>
                <span class="all-small-caps">Example:</span> 6÷2=3.</li>
            <li>Use the proper quotation marks and apostrophes: ‘&thinsp;’ and “&thinsp;” </li>
            <li>Don't italicize parentheses or brackets. <br/>
                <span class="all-small-caps">Example:</span> <i>Nobody <span class="paren">(</span>save the other craftsmen<span class="paren">)</span> will appreciate half your skill.</i></li>
            <li>Use a proper ellipsis: …</li>
            <li>Use a proper multiplication sign <br/>
                <span class="all-small-caps">Example:</span> 4×4</li>
            <li>Use primes to indicate feet and inches, minutes and seconds. <br/>
                <span class="all-small-caps">Example:</span> He was 6′4″.</li>
            <li>Use a proper degree symbol <br/>
                <span class="all-small-caps">Example:</span> 50°.</li>
        </ul>
        <p><span class="all-small-caps">NOTE:</span> You can use the above characters directly in your code without needing to use an <span class="all-small-caps">HTML</span> entity. If you are using a Mac, open your symbol viewer and pop in the correct character.</p>
    </section>
    <section>
        <h2>Use the right characters</h2>
        <section>
            <h3>Common/Standard Ligatures</h3>
            <p>You should use these in most circumstances. They are enabled by default in most browsers.</p>
            <div class="example" style="font-size: 48px; text-align: center;">
                <p><span class="highlight">fi</span>ght o<span class="highlight">ff</span>ice <span class="highlight">fl</span>ight <span class="highlight">fj</span>ord</p>
                <p style="font-variant-ligatures: none;"><span class="highlight">fi</span>ght o<span class="highlight">ff</span>ice <span class="highlight">fl</span>ight <span class="highlight">fj</span>ord</p>
            </div>
            <pre><code>font-variant-ligatures: common-ligatures;</code></pre>
        </section>
        <section>
            <h3>Discretionary ligatures</h3>
            <p>Use to achieve a special typographic effect.</p>
            <div class="example" style="font-size: 48px; text-align: center;">
                <p style="font-variant-ligatures: discretionary-ligatures;">ct sp st</p>
                <p>ct sp st</p>
            </div>
            <pre><code>font-variant-ligatures: discretionary-ligatures;</code></pre>
        </section>
        <section>
            <h3>Contextual ligatures</h3>
            <p>Use to better harmonize the shapes of grouped glyphs.</p>
            <div class="example" style="font-size: 48px; text-align: center;">
                <p style="font-family: 'caflisch-script-pro'; font-variant-ligatures: contextual;">The <span class="highlight">bloo</span>m has g<span class="highlight">on</span>e off the r<span class="highlight">ose</span></p>
                <p style="font-family: 'caflisch-script-pro'; font-variant-ligatures: no-contextual;">The <span class="highlight">bloo</span>m has g<span class="highlight">on</span>e off the r<span class="highlight">ose</span></p>
            </div>
            <pre><code>font-variant-ligatures: contextual;</code></pre>
        </section>
        <section>
            <h3>Small Caps</h3>
            <p>Use when capitalizing words in running text.</p>
            <div class="example" style="font-size: 36px; text-align: center;">
                <p>operates <span class="all-small-caps highlight">jpl</span> for <span class="all-small-caps highlight">nasa</span> programs</p>
                <p>operates <span class="highlight">JPL</span> for <span class="highlight">NASA</span> programs</p>
            </div>
            <pre><code>font-variant-caps: small-caps;</code></pre>
        </section>
        <section>
            <h3>All Small Caps</h3>
            <p>Converts both upper and lowercase letters to small caps. Typically you will want to use this instead of small caps.</p>
            <div class="example" style="font-size: 36px; text-align: center;">
                <p>convert <span class="highlight" style="font-variant-caps: all-small-caps;">All Letters</span> to small caps</p>
                <p>convert <span class="highlight" style="font-variant-caps: small-caps;">All Letters</span> to small caps</p>
            </div>
            <pre><code>font-variant-caps: all-small-caps;</code></pre>
        </section>
    </section>
    <section>
        <h2>Use the right numbers</h2>
        <section>
            <h3>Lining numerals</h3>
            <p>Use in headings. These are enabled by default.</p>
            <div class="example" style="font-size: 36px; text-align: center;">
                <p style="font-variant-numeric: lining-nums;"><span class="highlight">1912</span> Ditching Sussex</p>
                <p style="font-variant-numeric: oldstyle-nums;"><span class="highlight">1912</span> Ditching Sussex</p>
            </div>
            <pre><code>font-variant-numeric: lining-nums;</code></pre>
        </section>
        <section>
            <h3>Old-style numerals</h3>
            <p>Use in running text.</p>
            <div class="example" style="font-size: 24px;">
                <p style="margin-bottom: 1rem; font-variant-numeric: oldstyle-nums;">For nearly <span class="highlight">50</span> years the Swiss type designer Adrian Frutiger, born in <span class="highlight">1928</span>, was a hugely infuential figure in typography.</p>
                <p style="font-variant-numeric: lining-nums;">For nearly <span class="highlight">50</span> years the Swiss type designer Adrian Frutiger, born in <span class="highlight">1928</span>, was a hugely infuential figure in typography.</p>
            </div>
            <pre><code>font-variant-numeric: oldstyle-nums;</code></pre>
        </section>
        <section>
            <h3>Tabular lining numerals</h3>
            <p>Use in numeric tables.</p>
            <div class="example">
                <table style="margin: 0 auto; text-align: right;">
                    <thead>
                        <tr>
                            <th style="text-align: right;">Tabular</th>
                            <th style="text-align: right;">Proportional</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="font-variant-numeric: lining-nums tabular-nums;">409,280</td>
                            <td style="font-variant-numeric: proportional-nums;">409,280</td>
                        </tr>
                        <tr>
                            <td style="font-variant-numeric: lining-nums tabular-nums;">367,112</td>
                            <td style="font-variant-numeric: proportional-nums;">367,112</td>
                        </tr>
                        <tr>
                            <td style="font-variant-numeric: lining-nums tabular-nums;">155,068</td>
                            <td style="font-variant-numeric: proportional-nums;">155,068</td>
                        </tr>
                        <tr>
                            <td style="font-variant-numeric: lining-nums tabular-nums;">171,792</td>
                            <td style="font-variant-numeric: proportional-nums;">171,792</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <pre><code>font-variant-numeric: lining-nums tabular-nums;</code></pre>
        </section>
        <section>
            <h3>User proper subscripts and superscripts</h3>
            <p>Use to overwrite browser default styling of <code>sub</code> and <code>sup</code> elements. Currently only supported in Firefox.</p>
            <div class="example" style="font-size: 48px; text-align: center;">
                <p>Caffeine<sup class="sup highlight">1</sup> is C<sub class="sub highlight">8</sub>H<sub class="sub highlight">10</sub>N<sub class="sub highlight">4</sub>O<sub class="sub highlight">2</sub>.</p>
                <p>Caffeine<sup class="highlight">1</sup> is C<sub class="highlight">8</sub>H<sub class="highlight">10</sub>N<sub class="highlight">4</sub>O<sub class="highlight">2</sub>.</p>
            </div>
            <pre><code>font-variant-position: sub;
font-variant-position: super;</code></pre>
        </section>
        <section>
            <h3>Fractions</h3>
            <p>Use to properly style fractions.</p>
            <div class="example" style="font-size: 36px;">
                <p>Add 1<span class="highlight" style="font-variant-numeric: diagonal-fractions;">3/4</span> C of flour, <span class="highlight" style="font-variant-numeric: diagonal-fractions;">1/2</span> cup at a time.</p>
                <p>Add 1<span class="highlight">3/4</span> C of flour, <span class="highlight">1/2</span> cup at a time.</p>
            </div>
            <pre><code>font-variant-numeric: diagonal-fractions;</code></pre>
        </section>
        <section>
            <h3>Ordinals</h3>
            <p>Use to properly display ordinals.</p>
            <div class="example" style="font-size: 24px;">
                <p>Prizes will be awarded to <span class="highlight" style="font-variant-numeric: ordinal;">1st</span>, <span class="highlight" style="font-variant-numeric: ordinal;">2nd</span>, and <span class="highlight" style="font-variant-numeric: ordinal;">3rd</span> place winners.</p>
                <p>Prizes will be awarded to <span class="highlight">1st</span>, <span class="highlight">2nd</span>, and <span class="highlight">3rd</span> place winners.</p>
            </div>
            <pre><code>font-variant-numeric: ordinal;</code></pre>
        </section>
        <section>
            <h3>Slashed zero</h3>
            <p>Use for stylistic effect.</p>
            <div class="example" style="font-size: 48px; text-align: center;">
                <p style="font-variant-numeric: slashed-zero;"><span class="highlight">0</span>123456789</p>
                <p style="font-variant-numeric: lining-nums;"><span class="highlight">0</span>123456789</p>
            </div>
            <pre><code>font-variant-numeric: slashed-zero;</code></pre>
        </section>
    </section>
    <section>
        <h2>Use optional letterforms</h2>
        <section>
            <h3>Historical Forms</h3>
            <p>Use for a “period” effect.</p>
            <div class="example" style="font-size: 48px; text-align: center;">
                <p style="font-family: 'Cardo'; font-style: italic; font-feature-settings: 'hist' 1; font-variant-alternates: historical-forms;">The gla<span class="highlight">ss</span> is 1/2 full.</p>
                <p style="font-family: 'Cardo'; font-style: italic;">The gla<span class="highlight">ss</span> is 1/2 full.</p>
            </div>
            <pre><code>font-variant-alternates: historical-forms;</code></pre>
        </section>
        <section>
            <h3>Stylistic Alternates & Stylesets</h3>
            <p>Use to select alternate glyphs with various stylistic features.</p>
            <div class="example" style="font-size: 36px;">
                <p style="font-family: 'hypatia-sans-pro'; font-feature-settings: 'ss02';">His <span class="highlight">a</span>ccomplice <span class="highlight">& g</span>et<span class="highlight">a</span>w<span class="highlight">ay</span> driver</p>
                <p style="font-family: 'hypatia-sans-pro';">His <span class="highlight">a</span>ccomplice <span class="highlight">& g</span>et<span class="highlight">a</span>w<span class="highlight">ay</span> driver</p>
            </div>
            <pre><code>font-variant-alternates: stylistic(feature-value-name);
font-variant-alternates: styleset(feature-value-name);
font-variant-alternates: character-variant(feature-value-name);</code></pre>
        </section>
        <section>
            <h3>Swashes</h3>
            <p>Use in headings for a flourish effect.</p>
            <div class="example" style="font-size: 48px; text-align: center;">
                <p style="font-family: 'bookmania';"><span class="swash highlight">M</span>ar<span class="swash highlight">g</span>arit<span class="swash highlight">a</span></p>
                <p style="font-family: 'bookmania';"><span class="highlight">M</span>ar<span class="highlight">g</span>arit<span class="highlight">a</span></p>
            </div>
            <pre><code>font-variant-alternates: swash(feature-value-name);</code></pre>
        </section>
    </section>
</main>
            
          
!
            
              body {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1rem;
    font-family: 'warnock-pro';
}

section {
    margin-top: 3rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: #2eec96;
}

a:hover,
a:focus,
a:active {
    text-decoration: underline;
    outline: 0;
}

hr {
    height: 1px;
    padding: 0;
    border: 0;
    background-color: #ccc;
}

p,
ul,
ol {
    font-variant-numeric: oldstyle-nums;
}

ul,
ol {
    margin: 0.075rem 0;
}

li {
    margin-bottom: 0.25rem;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    position: relative;
    padding-left: 1em;
}

ul li::before {
    position: absolute;
    left: 0;
    color: #2eec96;
    content: '•';
}

ol {
    padding-left: 1.2rem;
}

figure {
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

pre {
    padding: 0.75rem 0;
}

pre code {
    line-height: 1.6;
}

th,
td {
    padding-right: 2rem;
}

blockquote {
    margin: 0;
}

blockquote cite {
    display: block;
    text-align: right;
}

.sub {
    font-variant-position: sub;
}

@supports (font-variant-position: sub) {
    .sub {
        vertical-align: inherit;
        font-size: inherit;
    }
}

.sup {
    font-variant-position: super;
}

@supports (font-variant-position: super) {
    .sup {
        vertical-align: inherit;
        font-size: inherit;
    }
}

.paren {
    font-style: normal;
}

.quoted p {
    quotes: '“' '”' '‘' '’';
}

.quoted p::before {
    content: open-quote;
    margin-left: -0.83ch;
}

.quoted p::after {
    content: close-quote;
}

.small-caps {
    font-variant-caps: small-caps;
}

.all-small-caps {
    font-variant-caps: all-small-caps;
}

@font-feature-values 'bookmania' {
    @swash { swishy: 1; }
}

.swash {
    font-feature-settings: 'swsh' 1;
}

@supports (font-variant-alternates: swash(swishy)) {
    .swash {
        font-feature-settings: normal;
        font-variant-alternates: swash(swishy);
    }
}

.fleuron {
    margin: 0;
    text-align: center;
    font-size: 48px;
    color: #2eec96;
}

header h1 {
    margin-top: 0;
    text-align: center;
}

main {
    hyphens: auto;
}

main blockquote {
    margin: 3rem 0;
}

main blockquote:first-child p:first-line {
    font-variant-caps: small-caps;
}

main blockquote:first-child p:first-letter {
    color: #2eec96;
    float: left;
    font-size: 75px;
    line-height: 60px;
    padding-top: 10px;
    padding-right: 8px;
    padding-left: 3px;
}

.example {
    padding: 1.5rem;
    background-color: #eee;
}

.example p {
    margin: 0;
    line-height: 1.4;
}

.highlight {
    color: #2eec96;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console