<main class="container">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eveniet placeat modi voluptatem quam? Corporis, aliquam accusantium quibusdam repellendus, excepturi culpa. Aperiam repellendus nesciunt, vitae adipisci. Tenetur non, natus accusamus.
</p>
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta possimus doloremque esse quod itaque laudantium, voluptates unde, ducimus libero, doloribus aut autem rem soluta nihil quo eius reiciendis, voluptas dignissimos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium repellendus omnis qui recusandae enim aut maxime dignissimos, alias dolor excepturi quibusdam officiis, porro soluta quisquam, id culpa eveniet facere quasi!
</p>
<p class="small-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit cum delectus veniam praesentium voluptas mollitia accusamus exercitationem ab veritatis quod beatae, iusto, dolorum quaerat deserunt ad? Beatae nostrum ducimus dolores.
</p>
//------------------------------------//
// THEME SETTING VARIABLES //
//------------------------------------//
// Set min/max viewport widths for calculation
$font-min-width: 480; // min width needed for calculation
$font-max-width: 1200; // max width to for calculation
// Set min/max font sizes for each element
$min-font-h1: 26;
$max-font-h1: 50;
$min-font-h2: 20;
$max-font-h2: 28;
$min-font-h3: 16;
$max-font-h3: 18;
$min-font-body: 12;
$max-font-body: 16;
$min-font-small-text: 11;
$max-font-small-text: 13;
//------------------------------------//
// FONT SIZE MAP //
//------------------------------------//
$fonts: (
sizes: (
h1: (
min: $min-font-h1,
max: $max-font-h1
),
h2: (
min: $min-font-h2,
max: $max-font-h2
),
h3: (
min: $min-font-h3,
max: $max-font-h3
),
body: (
min: $min-font-body,
max: $max-font-body
),
'.small-text': (
min: $min-font-small-text,
max: $max-font-small-text
)
)
);
// FETCH NESTED KEY VALUES
@function map-fetch($map, $keys) {
$key: nth($keys, 1);
$length: length($keys);
$value: map-get($map, $key);
@if ($length > 1) {
$rest: ();
@for $i from 2 through $length {
$rest: append($rest, nth($keys, $i))
}
@return map-fetch($value, $rest)
} @else {
@return $value;
}
}
// ITERATE THROUGH SIZES AND CREATE CLASSES ACCORDINGLY
@each $size in map-keys(map-get($fonts, sizes)) {
#{$size} { font-size: #{map-fetch($fonts, sizes $size min)}px; }
@media (min-width: #{$font-min-width}px) and (max-width: #{$font-max-width}px){
#{$size} {
font-size: calc( #{map-fetch($fonts, sizes $size min)}px + (#{map-fetch($fonts, sizes $size max )} - #{map-fetch($fonts, sizes $size min)}) * ( (100vw - #{$font-min-width}px) / ( #{$font-max-width} - #{$font-min-width}) ));
}
}
@media (min-width: #{$font-max-width}px){
#{$size} {
font-size: #{map-fetch($fonts, sizes $size max)}px;
}
}
}
// DO NOT REPLICATE
// - The following styles are specifically for this pen and will do you no good beyond this.
* {
box-sizing: border-box;
}
.container, footer {
margin: auto;
padding: 1rem;
width: 100%;
@media screen and (min-width: 640px) {
width: 600px;
}
}
footer {
}
.text-right {
text-align: right;
}
.no-top-margin {
margin-top: 0;
}
.no-bottom-margin {
margin-bottom: 0;
}
.flex {
display: flex;
}
.flex--vert-center {
align-items: center;
}
View Compiled
//------------------------------------//
// NOTES //
//------------------------------------//
// By setting
//------------------------------------//
// CREDITS //
//------------------------------------//
// The responsive typography algorithm is by MadeByMike on Codepen
// https://codepen.io/MadeByMike/pen/YPJJYv
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.