html scss

CSS + Dynamic Type

This must be viewed in Safari on macOS or iOS to make much sense—they allow one to use iOS and macOS system fonts directly on web. More importantly, they allow one to take advantage of Dynamic Type. Of course, use a fallback for non-Apple clients.

I was digging through old prototypes and found this snippet from April 2019. Pretty sure I threw this together when visiting The Minte in Chicago, when they were shipping an updated web app with higher usage than their mobile apps, and I wanted to see which accessibility features we could trivially use.

This 2015 post from the Webkit blog is the only public-facing documentation I can find for these font shorthands. When reassessing this weekend, I spelunked through Github to find this blurb from Stylelint, adding values title0 through title4. I verified with Webkit’s autocomplete values. When I’d first found it, there was no style for iOS’s largeTitle font style. Today’s additions still lack a correspondingly named largeTitle, but they’re better than my old approach of scaling headline by 2x.

Related—title0 is a regular-weight version of largeTitle, and I’m unsure which system font style title4 matches. That said, you can adjust title0’s font-weight and get largeTitle in no time.

One can also override font-face, but naturally neither font-size nor line-height. If that’s desirable, use a scale transform and wrap the text in a containing element to control block-size. You can’t modify line-height this way, but there should be layout trickery around this.

  • <div class="group">
  <span class="title4">Title 4</span>
</div>
<div class="group">
  <span class="title0">Title 0</span>
  <span class="title1">Title 1</span>
  <span class="title2">Title 2</span>
  <span class="title3">Title 3</span>
</div>
<div class="group">
  <span class="headline">Headline</span>
  <span class="headline short">Headline Short</span>
</div>
<div class="group">
  <span class="subheadline">Subheadline</span>
  <span class="subheadline short">Subheadline Short</span>
</div>
<div class="group">
  <span class="body short">Body Short</span>
  <span class="body">Body</span>
  <span class="body tall">Body Tall</span>
</div>
<div class="group">
  <span class="caption1">Caption1</span>
  <span class="caption1 short">Caption1 Short</span>
</div>
<div class="group">
  <span class="caption2">Caption2</span>
</div>
<div class="group">
  <span class="footnote">Footnote</span>
  <span class="footnote short">Footnote Short</span>
</div>
  • .title0 {
  font: -apple-system-title0;
}

.title1 {
  font: -apple-system-title1;
}

.title2 {
  font: -apple-system-title2;
}

.title3 {
  font: -apple-system-title3;
}

.title4 {
  font: -apple-system-title4;
}

.headline {
  font: -apple-system-headline;
}

.headline.short {
  font: -apple-system-short-headline;
}

.subheadline {
  font: -apple-system-subheadline;
}

.subheadline.short {
  font: -apple-system-short-subheadline;
}

.body {
  font: -apple-system-body;
}

.body.short {
  font: -apple-system-short-body;
}

.body.tall {
  font: -apple-system-tall-body;
}

.caption1 {
  font: -apple-system-caption1;
}

.caption1.short {
  font: -apple-system-short-caption1;
}

.caption2 {
  font: -apple-system-caption2;
}

.caption2.short {
  font: -apple-system-short-caption2;
}

.footnote {
  font: -apple-system-footnote;
}

.footnote.short {
  font: -apple-system-short-footnote;
}