1 #Typography Typography

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

To achieve perfect vertical rhythm, we're using Modular Scale. http://www.modularscale.com/
To achieve perfect fluid typography, we're using CSS Locks. https://fvsch.com/code/css-locks/

Example

Getting Ready: Planning And Metrics Link

Micro-optimizations are great for keeping performance on track, but it's critical to have clearly defined targets in mind — measurable goals that would influence any decisions made throughout the process. There are a couple of different models, and the ones discussed below are quite opinionated — just make sure to set your own priorities early on.

Establish a performance culture.

In many organizations, front-end developers know exactly what common underlying problems are and what loading patterns should be used to fix them. However, as long as there is no alignment between dev/design and marketing teams, performance isn't going to sustain long-term. Study common complaints coming into customer service and see how improving performance can help relieve some of these common problems.

Run performance experiments and measure outcomes — both on mobile and on desktop. It will help you build up a company-tailored case study with real data. Furthermore, using data from case studies and experiments published on WPO Stats can help increase sensitivity for business about why performance matters, and what impact it has on user experience and business metrics. Stating that performance matters alone isn't enough though — you also need to establish some measurable and trackable goals and observe them.

Markup
<h1>Getting Ready: Planning And Metrics Link</h1>
<p>Micro-optimizations are great for keeping performance
on track, but it's critical to have clearly defined
targets in mind — measurable goals that would influence
any decisions made throughout the process. There are a
couple of different models, and the ones discussed below
are quite opinionated — just make sure to set your own
priorities early on.</p>
<h2>Establish a performance culture.</h2>
<p>In many organizations, front-end developers know
exactly what common underlying problems are and what
loading patterns should be used to fix them. However,
as long as there is no alignment between dev/design
and marketing teams, performance isn't going to sustain
long-term. Study common complaints coming into customer
service and see how improving performance can help
relieve some of these common problems.</p>
<p>Run performance experiments and measure outcomes —
both on mobile and on desktop. It will help you build up
a company-tailored case study with real data. Furthermore,
using data from case studies and experiments published on
WPO Stats can help increase sensitivity for business about
why performance matters, and what impact it has on user
experience and business metrics. Stating that performance
matters alone isn't enough though — you also need to
establish some measurable and trackable goals and observe them.</p>
Source: components/_typography.scss, line 1
Example

This is a heading h1

This is a heading h2

This is a heading h3

This is a heading h4

This is a heading h5
This is a heading h6
Markup
<h1>This is a heading h1</h1>
<h2>This is a heading h2</h2>
<h3>This is a heading h3</h3>
<h4>This is a heading h4</h4>
<h5>This is a heading h5</h5>
<h6>This is a heading h6</h6>
Source: components/_typography.scss, line 61
Example

This is a paragraph.

Markup
<p>This is a paragraph.</p>
Source: components/_typography.scss, line 46
Example
  font-size: rem(20px);
Markup
<pre>
  <code>font-size: rem(20px);</code>
</pre>
Source: components/_typography.scss, line 99