Em Enforcer
Ems, rems, and pixels—oh, my!
Ems, rems, and pixels—oh, my!
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
/* Browser’s default font-size: 16px */
p {
font-size 1em;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<main>
<p>Lorem ipsum.</p>
</main>
</body>
</html>
/* Browser’s default font-size: 16px */
main {
font-size: 1.25em;
}
p {
font-size: 1em;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<main>
<p>Lorem ipsum.</p>
</main>
</body>
</html>
/* Browser’s default font-size: 16px */
main {
font-size: 1.25em;
}
p {
font-size: 1rem;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<main>
<p>Lorem ipsum.</p>
</main>
</body>
</html>
/* Browser’s default font-size: 16px */
html {
font-size: 110%;
}
main {
font-size: 1.5em;
}
p {
font-size: 1.25em;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
/* Browser’s default font-size: 18px */
p {
font-size: 1.25em;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
/* Browser’s default font-size: 16px */
p {
font-size: 1.5em;
padding: 1.25em;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
/* Browser’s default font-size: 16px */
p {
font-size: 1.5rem;
padding: 1.25rem;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<main>
<div class="item-1">
<ul class="item-2">
<li class="item-3">Lorem ipsum.</li>
</ul>
</div>
</main>
</body>
</html>
/* Browser’s default font-size: 18px */
main {
font-size: 1.5em;
}
.item-1 {
font-size: 1.3em;
}
.item-2 {
font-size: 0.8em;
}
.item-3 {
font-size: 0.75rem;
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
/* Browser’s default font-size: 16px */
html {
font-size: 100%;
}
p {
font-size: 1.1rem;
}
@media only screen and (min-width: 38em) {
html {
font-size: 110%;
}
}
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
/* Browser’s default font-size: 16px */
html {
font-size: 100%;
}
p {
font-size: 1rem;
line-height: 1.3;
}
@media only screen and (min-width: 38em) {
html {
font-size: 110%;
}
p {
font-size: 1rem;
line-height: 1.4;
}
}