Fluid Typography

fluid-typography.css

:root {

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

    /* Generate here: https://www.fluid-type-scale.com/ */
    --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);

}

/* Font Family */
.fl-module-content .ff-heading,
.fl-module-content .ff-heading span,
.ff-heading .fl-module-content *,
.ff-heading span .fl-module-content *,
.ff-heading p {
  font-family: var(--ff-heading) !important;
}

.fl-module-content .ff-text,
.fl-module-content .ff-text span,
.fl-module-content .ff-body,
.fl-module-content .ff-body span,
.ff-body .fl-module-content *,
.ff-text .fl-module-content * {
  font-family: var(--ff-text) !important;
}

/* Font Weight */
.fl-module-content .fw-400,
.fw-400 .fl-module-content * {
  font-weight: 400 !important;
}

.fl-module-content .fw-600,
.fw-600 .fl-module-content * {
  font-weight: 600 !important;
}

.fl-module-content .fw-700,
.fw-700 .fl-module-content * {
  font-weight: 700 !important;
}

/* Font Size */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

body h1,
body h1 span {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

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

body h2,
body h2 span {
  font-size: var(--fs-h2);
  line-height: 1.35;
}

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

body h3,
body h3 span {
  font-size: var(--fs-h3);
  line-height: 1.35;
}

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

body h4,
body h4 span {
  font-size: var(--fs-h4);
  line-height: 1.2;
}

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

body h5,
body h5 span {
  font-size: var(--fs-h5);
  line-height: 1.2;
}

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

body h6,
body h6 span {
  font-size: var(--fs-h6);
  line-height: 1.55;
}

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

.fl-module-content .fs-small,
.fl-module-content .fs-small span,
.fs-small .fl-module-content *,
.fs-small h1,
.fs-small h2,
.fs-small h3,
.fs-small h4,
.fs-small h5,
.fs-small h6,
.fs-small p,
h1.fs-small,
h2.fs-small,
h3.fs-small,
h4.fs-small,
h5.fs-small,
h6.fs-small,
p.fs-small {
  font-size: var(--fs-small) !important;
}

.fl-module-content .lead,
.fl-module-content .text-large,
.lead .fl-module-content *,
.text-large .fl-module-content *,
.fs-intro .fl-module-content *,
.fl-module-content .fs-intro {
  font-size: var(--fs-h5);
  font-weight: 400;
}

.eyebrow p,
.eyebrow .fl-heading,
.eyebrow .fl-heading span,
.label .fl-module-content *,
.fl-module-content .label {
  font-family: var(--ff-text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: 2.5px;
  line-height: 1.3;
}

.eyebrow p,
.eyebrow .fl-heading span {
  font-size: var(--fs-h6);
}

.eyebrow .fl-heading {
  line-height: 1;
}

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