<div class="wrapper">
	<header class="header">
		<h1>CSS Static vs. Relative Units</h1>
	</header>
	<main class="main">
		<section class="pxFont pxLineHeight">
			<h2>Kittens heading px</h2>
			<p>Cat ipsum, good morning sunshine. Wake up human for food at 4am intently stare, this human feeds me.</p>
			<p>These paragraphs are using <strong>font-size: 16px, line-height: 24px</strong></p>
		</section>

		<section class="remFont pxLineHeight">
			<h2>Kittens heading rem</h2>
			<p>Cat ipsum, good morning sunshine. Wake up human for food at 4am intently stare, this human feeds me.</p>
			<p>These paragraphs are using <strong>font-size: 1rem, line-height: 24px</strong></p>
		</section>

		<section class="remFont unitlessLineHeight">
			<h2>Kittens heading rem</h2>
			<p>Cat ipsum, good morning sunshine. Wake up human for food at 4am intently stare, this human feeds me.</p>
			<p>These paragraphs are using <strong>font-size: 1rem, line-height:  1.5</strong></p>
		</section>
	</main>
	<footer class="footer">
		CSS demo for 24 Accessibility 2019: "Pixels vs. Relative Units in CSS Typography: why it’s still a big deal." by Kathleen McMahon.
	</footer>
</div>
// General layout styles

* {
	box-sizing:  border-box;
}

body {
	font-family: Raleway, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	background-color: white;
	color: black;
}

.wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wrapper > * {
	margin: 1rem;
}

.header {
	margin-bottom: 1rem;
}

.main {
  display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.footer {
	margin-top: auto;
}

// using em here to take on border size in relation to 
// section font-size, and work around Chrome rem bug
section {
	font-size: 1rem;
	padding: 1rem;
	border: 0.0625em solid darkmagenta;  
}

h1 {
	font-weight: 700;
	font-size: 3rem;
	line-height: 1.1;
}

h2 {
	font-weight: 700;
}

p {
	margin-top: 1rem;
}

strong {
	font-weight: 700;
	background-color: #ffbcff;
	padding: 0 0.125rem;
}


// Demo-specific layout styles diplaying the
// differences between px vs relative CSS units

.pxFont {
	
	h2 {
		font-size: 32px;
	}
	
	p {
		font-size: 16px;
	}	
	
}

.remFont {
	
	h2 {
		font-size: 2rem;
	}
	
	p {
		font-size: 1rem;
	}
	
}

.pxLineHeight {
	
	h2 {
		line-height: 40px;
	}
	
	p {
		line-height: 24px;
	}
	
}

.remLineHeight {
	
	h2{
		line-height: 1.25rem;
	}
	
	p {
		line-height: 1.5rem;
	}
	
}

.unitlessLineHeight {
	
	h2{
		line-height: 1.25;
	}
	
	p {
		line-height: 1.5;
	}
	
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.