Fluid Typography

fluid-typography.css

:root {

    --ff-heading: 'Playfair Display', serif;
    --ff-text: 'Source Sans Pro', sans-serif;

    --fs-h1: clamp(40px, 6.0vw + 10px, 85px);
    --fs-h2: clamp(30px, 1.7vw + 23px, 45px);
    --fs-h3: clamp(25px, 1.3vw + 18px, 35px);
    --fs-h4: clamp(20px, 1vw + 15px, 28px);
    --fs-h5: clamp(16px, 0.9vw + 12px, 22px);
    --fs-h6: clamp(13px, 0.7vw + 10px, 18px);
    --fs-small: clamp(12px, 0.75vw + 8px, 15px);

}

.ff-heading,
.ff-heading span,
.ff-heading p {
    font-family: var(--ff-heading) !important;
}

.ff-text,
.ff-text span {
    font-family: var(--ff-text) !important;
}

h1,
h1 span {
    font-size: var(--fs-h1);
    line-height: 1;
}
.fs-h1,
.fs-h1 span,
.fs-h1 h2,
.fs-h1 h3,
.fs-h1 h4,
.fs-h1 h5,
.fs-h1 h6,
.fs-h1 p {
    font-size: var(--fs-h1) !important;
    line-height: 1;
}

h2,
h2 span {
    font-size: var(--fs-h2);
    line-height: 1;
}
.fs-h2,
.fs-h2 span,
.fs-h2 h1,
.fs-h2 h2,
.fs-h2 h3,
.fs-h2 h4,
.fs-h2 h5,
.fs-h2 h6,
.fs-h2 p {
    font-size: var(--fs-h2) !important;
    line-height: 1;
}

h3,
h3 span {
    font-size: var(--fs-h3);
    line-height: 1;
}
.fs-h3,
.fs-h3 span,
.fs-h3 h1,
.fs-h3 h2,
.fs-h3 h3,
.fs-h3 h4,
.fs-h3 h5,
.fs-h3 h6,
.fs-h3 p {
    font-size: var(--fs-h3) !important;
    line-height: 1;
}

h4,
h4 span {
    font-size: var(--fs-h4);
    line-height: 1.2;
}
.fs-h4,
.fs-h4 span,
.fs-h4 h1,
.fs-h4 h2,
.fs-h4 h3,
.fs-h4 h4,
.fs-h4 h5,
.fs-h4 h6,
.fs-h4 p {
    font-size: var(--fs-h4) !important;
    line-height: 1.2;
}

h5,
h5 span {
    font-size: var(--fs-h5);
    line-height: 1.2;
}
.fs-h5,
.fs-h5 span,
.fs-h5 h1,
.fs-h5 h2,
.fs-h5 h3,
.fs-h5 h4,
.fs-h5 h5,
.fs-h5 h6,
.fs-h5 p {
    font-size: var(--fs-h5) !important;
    line-height: 1.2;
}

h6,
h6 span {
    font-size: var(--fs-h4);
    line-height: 1.2;
}
.fs-h6,
.fs-h6 span,
.fs-h6 h1,
.fs-h6 h2,
.fs-h6 h3,
.fs-h6 h4,
.fs-h6 h5,
.fs-h6 h6,
.fs-h6 p {
    font-size: var(--fs-h6) !important;
    line-height: 1.2;
}

.lead {
    font-size: var(--fs-h6);
    font-weight: 400;
}

.eyebrow p,
.eyebrow .fl-heading span {
    font-family: var(--ff-text);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-small);
    letter-spacing: 2px;
    width: fit-content;
    line-height: 2;
}

.eyebrow .fl-heading {
    line-height: calc(var(--fs-small)) * 2);
}

.eyebrow .fl-module-content {
    margin-bottom: 0;
}