<h1>Cool Person <check-mark name="Cool Person"></check-mark>
</h1>

<p>Hello, my name is <span>Andy <check-mark name="Andy"></check-mark></span> and I am definitely verified.</p>

<p class="mahoosive">I am absolutely massive text, and I'm still <span>verified<check-mark name="Massive text" color="#353578"></check-mark></span>
</p>

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.414,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.63rem, calc(0.84rem + -0.27vw), 0.78rem);
  --step--1: clamp(0.88rem, calc(0.96rem + -0.09vw), 0.94rem);
  --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --step-1: clamp(1.35rem, calc(1.2rem + 0.73vw), 1.77rem);
  --step-2: clamp(1.62rem, calc(1.31rem + 1.53vw), 2.5rem);
  --step-3: clamp(1.94rem, calc(1.39rem + 2.77vw), 3.53rem);
  --step-4: clamp(2.33rem, calc(1.41rem + 4.63vw), 5rem);
  --step-5: clamp(2.8rem, calc(1.32rem + 7.42vw), 7.07rem);
}

body {
  padding: 3em;
  background: #f3f3f3;
  color: #252525;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
    sans-serif;
  font-size: var(--step-1);
}

.mahoosive {
  font-size: var(--step-4);
  line-height: 1.1;
}

body > * + * {
  margin-top: 2rem;
}

h1,
p span {
  display: inline-flex;
  gap: 0 0.5ch;
}

h1 {
  align-items: end;
  line-height: 1;
}