Skip to content

Instantly share code, notes, and snippets.

@tscritch

tscritch/remsizes.html

Created August 12, 2021 17:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tscritch/b6c3f3bd15edade4900bac2eafda637b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tscritch/b6c3f3bd15edade4900bac2eafda637b to your computer and use it in GitHub Desktop.
Download ZIP
Rem Size Chart
Raw
remsizes.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
rel="stylesheet"
/>
<title>Rem Sizes</title>
<style>
* {
font-family: "Source Code Pro", sans-serif;
}
body {
font-size: 16px;
}
.size {
font-size: 1rem;
}
/* .s0_125 {
font-size: 0.125rem;
} */
</style>
</head>
<body>
<h1>REM SIZES</h1>
<div class="size s0_125">0.125 => 2px</div>
<div class="size s0_3875">0.3875 => 3px</div>
<div class="size s0_25">0.25 => 4px</div>
<div class="size s0_3125">0.3125 => 5px</div>
<div class="size s0_375">0.375 => 6px</div>
<div class="size s0_4375">0.4375 => 7px</div>
<div class="size s0_5">0.5 => 8px</div>
<div class="size s0_5625">0.5625 => 9px</div>
<div class="size s0_625">0.625 => 10px</div>
<div class="size s0_6875">0.6875 => 11px</div>
<div class="size s0_75">0.75 => 12px</div>
<div class="size s0_8125">0.8125 => 13px</div>
<div class="size s0_875">0.875 => 14px</div>
<div class="size s0_9375">0.9375 => 15px</div>
<div class="size s1">1 => 16px</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment