Variable Font Refresher


by Jeremy Caudle
code

It has been a bit since I worked with a variable font, so I wanted to work with it again today to help myself remember how to make use of them. Jason Pamental's resources over on his website (rwt.io) are always helpful, so take a look!

Header

Duis rutrum, justo quis iaculis ultrices, risus risus accumsan turpis, ac maximus mauris ipsum mattis eros. Praesent eu consequat est. Proin leo urna, ornare sed tellus et, ullamcorper tempor enim. Quisque sagittis mi quam, in varius erat cursus nec. Fusce tortor eros, lobortis at pulvinar nec, consequat vel ante.

Sub-Header

Vestibulum non eros id dolor accumsan eleifend. Nullam in metus vitae nunc vehicula dapibus. Vestibulum faucibus velit in risus ultrices facilisis. Cras eu turpis lobortis, rutrum ipsum non, varius justo. Vivamus ut orci nunc. Duis vitae arcu consequat, viverra urna eu, ultrices lorem.

Photo of yakiniku restaurant logo and metal chopsticks.

Sed ut tempus lectus. Mauris ut ipsum vitae metus sodales mollis eget quis eros.

View the code:

HTML and JS 
<div class="code-block bg-black">
            <h2>Header</h2>
            <section class="three-col">
                <p>Duis rutrum, justo quis iaculis ultrices, risus risus accumsan turpis, ac maximus mauris ipsum mattis eros. Praesent eu consequat est. Proin leo urna, ornare sed tellus et, ullamcorper tempor enim. Quisque sagittis mi quam, in varius erat cursus nec. Fusce tortor eros, lobortis at pulvinar nec, consequat vel ante.</p>
                <h3>Sub-Header</h3>
                <p>Vestibulum non eros id dolor accumsan eleifend. Nullam in metus vitae nunc vehicula dapibus. Vestibulum faucibus velit in risus ultrices facilisis. Cras eu turpis lobortis, rutrum ipsum non, varius justo. Vivamus ut orci nunc. Duis vitae arcu consequat, viverra urna eu, ultrices lorem. </p>
                <img src="https://jeremycaudle.com/ygg/resources/c9fe90d8-3b55-4f31-883d-25b97af0752f.jpeg" alt="Photo of yakiniku restaurant logo and metal chopsticks." width="1000" height="1083" />
                <p>Sed ut tempus lectus. Mauris ut ipsum vitae metus sodales mollis eget quis eros. </p>
            </section>
        </div>
CSS 
/* Variables */
            :root {
                --main-bg: rgb(20, 15, 13);
            }

@font-face {
                font-family: "Blinker";
                src: url("../ast/fonts/Blinker_variable.ttf") format("truetype");
                font-style: normal;
                font-variation-settings: 'wght' 40;
                font-optical-sizing: auto;
            }

            .code-block {
                margin: 3rem auto;
                width: clamp(16em, 90vw, 60em);
                min-height: 4rem;
                padding: 1rem;
                color: #ddd;
                font-size: 20px;
                font-family: "Blinker", sans-serif;
            }

            .code-block h2, .code-block h3  {
                font-family: "Blinker", sans-serif;
                font-size: 5rem;
                font-variation-settings: 'wght' 171;
                color: white;
                margin-top: 0;
                border-bottom: solid .5rem white;
            }

            .code-block h3 {
                font-size: 1.5rem;
								font-variation-settings: 'wght' 78;
                border-bottom: none;
            }
            

            .code-block p {
                font-variation-settings: 'wght' 40;
                line-height: 1.5;
            }

            .bg-black { 
                background-color: rgb(20, 15, 13);
                background-color: var(--main-bg, rgb(20, 15, 13));
                }

            .code-block img {
                display: block;
                width: 100%;
                height: auto;
                text-align: center;
                font-style: italic;
                color: #777;
            }

            @media (min-width: 50em) {

                .three-col {
                    column-count: 3;
                    column-gap: 2rem;
                    column-width: 33.33%;
                }

                .code-block p {
                    margin-top: 0;
            }

                .code-block p:first-of-type::first-line {
                    font-variation-settings: 'wght' 90;
                }

        }

Tags