Skip to content

Instantly share code, notes, and snippets.

@sandren
Last active July 22, 2023 11:30
Show Gist options
  • Save sandren/4fc356aa22daa09f1db31d9e548ab0fa to your computer and use it in GitHub Desktop.
Save sandren/4fc356aa22daa09f1db31d9e548ab0fa to your computer and use it in GitHub Desktop.
Example of a point based type scale using rem units.
.text-6pt {
font-size: 0.5rem;
}
.text-7pt {
font-size: 0.58333rem;
}
.text-8pt {
font-size: 0.66667rem;
}
.text-9pt {
font-size: 0.75rem;
}
.text-10pt {
font-size: 0.83333rem;
}
.text-11pt {
font-size: 0.91667rem;
}
.text-12pt {
font-size: 1rem;
}
.text-14pt {
font-size: 1.16667rem;
}
.text-16pt {
font-size: 1.33333rem;
}
.text-18pt {
font-size: 1.5rem;
}
.text-21pt {
font-size: 1.75rem;
}
.text-24pt {
font-size: 2rem;
}
.text-30pt {
font-size: 2.5rem;
}
.text-36pt {
font-size: 3rem;
}
.text-48pt {
font-size: 4rem;
}
.text-60pt {
font-size: 5rem;
}
.text-72pt {
font-size: 6rem;
}
.text-84pt {
font-size: 7rem;
}
.text-96pt {
font-size: 8rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment