Learning about fluid typography and CSS clamp


by Jeremy Caudle
code

I haven't ever worked with the CSS clamp function or the ch unit. After reading Andy Bell's tutorial mentioned inside this post, I thought I'd try them out and followed his tutorial for Fluid Typography. I've read a bit about clamp in the past and I'm excited to work with it more. Andy's article has some great resources, so be sure to check it out!

Fluid Typography

w/ clamp() and CSS Custom Properties

Followed the Fluid typography with CSS clamp tutorial by Andy Bell while making this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at arcu mauris. Pellentesque hendrerit dolor eget elementum aliquet. Vestibulum et odio tincidunt, faucibus nibh eu, consequat ipsum. Ut a luctus nibh. Donec suscipit orci non neque dignissim, vitae euismod quam luctus. Curabitur suscipit est a neque sodales sagittis.

View the code:

HTML and JS 
<section class="code-block">
            <h1>Fluid Typography</h1>
            <h2>w/ clamp() and CSS Custom Properties</h2>
            <h3>Followed the <a href="https://piccalil.li/tutorial/fluid-typography-with-css-clamp">Fluid typography with CSS clamp tutorial</a> by Andy Bell while making this.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at arcu mauris. Pellentesque hendrerit dolor eget elementum aliquet. Vestibulum et odio tincidunt, faucibus nibh eu, consequat ipsum. Ut a luctus nibh. Donec suscipit orci non neque dignissim, vitae euismod quam luctus. Curabitur suscipit est a neque sodales sagittis.</p>
        </section>
CSS 
html { box-sizing: border-box; z-index: 0; }
            html * { box-sizing: inherit; }
            section.code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                z-index: 1;
                padding: 1rem;
                margin: 1rem auto;
                background: #232323;
                color: rgb(166, 219, 190);
                line-height: 1.5;
            }
            section.code-block a {
                color: rgb(166, 176, 219);
            }
            section.code-block a:visited {
                color: rgb(219, 161, 75);
            }
            /* Basic typography */
            section.code-block h1, section.code-block h2, section.code-block h3 {
                font-family:Georgia, 'Times New Roman', Times, serif;
                line-height: 1.1;
                font-weight: 900;
                color: rgb(54, 235, 136);
            }
            /* Fluid typography */
            section.code-block h1, section.code-block h2, section.code-block h3, section.code-block p {
                font-size: clamp(
                    var(--fluid-type-min, 1rem),
                    calc(1rem + var(--fluid-type-target, 3vw)),
                    var(--fluid-type-max, 1.3rem)
                );
            }
            section.code-block h1 {
                --fluid-type-min: 2.5rem;
                --fluid-type-max: 5rem;
                --fluid-type-target: 5vw;

                max-width: 15ch;
            }
            section.code-block h2 {
                --fluid-type-min: 1.8rem;
                --fluid-type-max: 3rem;
                color: rgb(157, 235, 54)
            }
            section.code-block h3 {
                --fluid-type-min:1.5rem;
                --fluid-type-max:2.5rem;
            }

            section.code-block h2, section.code-block h3 {
                max-width: 30ch;
            }

            section.code-block p {
                max-width: 60ch;
            }

Tags