Skip to content

Instantly share code, notes, and snippets.

@ryanve

ryanve/size.css

Last active May 30, 2017 05:44
Show Gist options
  • Save ryanve/a037d33339dd5f36fee0085c9bf865ce to your computer and use it in GitHub Desktop.
Save ryanve/a037d33339dd5f36fee0085c9bf865ce to your computer and use it in GitHub Desktop.
Download ZIP
responsive type-scale based on fibonacci but rounded for better pixel values
Raw
size.css
:root {
--size-h0: 2.25rem;
--size-h1: 2rem;
--size-h2: 1.625rem;
--size-h3: 1.375rem;
--size-h4: 1.25rem;
--size-lede: 1.125rem;
--size-text: 1rem;
--size-fine: .875rem;
}
@media (min-width: 30em) and (min-height: 30em) {
:root {
--size-h0: 3rem;
--size-h1: 2.625rem;
--size-h2: 2rem;
--size-h3: 1.625rem;
}
}
@media (min-width: 80em) and (min-height: 50em) {
:root {
--size-h0: 3.625rem;
--size-h2: 2.25rem;
--size-lede: 1.25rem;
}
}
.size-h0 { font-size: var(--size-h0) }
.size-h1 { font-size: var(--size-h1) }
.size-h2 { font-size: var(--size-h2) }
.size-h3 { font-size: var(--size-h3) }
.size-h4 { font-size: var(--size-h4) }
.size-lede { font-size: var(--size-lede) }
.size-text { font-size: var(--size-text) }
.size-fine { font-size: var(--size-fine) }
Raw
size.html
<!DOCTYPE html>
<html lang="en-US" class="sans-serif line-flow">
<meta charset="utf-8">
<title>type-scale sample</title>
<meta name="viewport" content="width=device-width, initial-size=1">
<style>
html { background: whitesmoke }
.bullet-none { list-style: none }
.bold { font-weight: bold }
.sans-serif { font-family: sans-serif }
.system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif }
.break-word { overflow-wrap: break-word }
.line-single { line-height: 1 }
.line-compact { line-height: 1.25 }
.line-flow { line-height: 1.5 }
.line-optimal { line-height: 1.75 }
.line-double { line-height: 2 }
.line-inherit { line-height: inherit }
:root {
--size-h0: 2.25rem;
--size-h1: 2rem;
--size-h2: 1.625rem;
--size-h3: 1.375rem;
--size-h4: 1.25rem;
--size-lede: 1.125rem;
--size-text: 1rem;
--size-fine: .875rem;
}
@media (min-width: 30em) and (min-height: 30em) {
:root {
--size-h0: 3rem;
--size-h1: 2.625rem;
--size-h2: 2rem;
--size-h3: 1.625rem;
}
}
@media (min-width: 80em) and (min-height: 50em) {
:root {
--size-h0: 3.625rem;
--size-h2: 2.25rem;
--size-lede: 1.25rem;
}
}
.size-h0 { font-size: var(--size-h0) }
.size-h1 { font-size: var(--size-h1) }
.size-h2 { font-size: var(--size-h2) }
.size-h3 { font-size: var(--size-h3) }
.size-h4 { font-size: var(--size-h4) }
.size-lede { font-size: var(--size-lede) }
.size-text { font-size: var(--size-text) }
.size-fine { font-size: var(--size-fine) }
</style>
<h2 class="line-compact size-h2">Sizes</h2>
<ul class="bullet-none bold line-optimal">
<li class="line-compact size-h0">size-h0</li>
<li class="line-compact size-h1">size-h1</li>
<li class="line-compact size-h2">size-h2</li>
<li class="line-compact size-h3">size-h3</li>
<li class="line-flow size-h4">size-h4</li>
<li class="line-flow size-lede">size-lede</li>
<li class="line-optimal size-text">size-text</li>
<li class="line-optimal size-fine">size-fine</li>
</ul>
<h2 class="line-compact size-h2">Prose</h2>
<figure class="size-text line-optimal">
<h1 class="size-h1 line-compact">Headline Example</h1>
<p class="size-lede">Dinosaurs are extinct today because they lacked opposable thumbs and the brainpower to build a space program.
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.
<p>Curious that we spend more time congratulating people who have succeeded than encouraging people who have not. Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.
<h2 class="size-h2 line-compact">Hello subhead time people and dinosaurs</h2>
<p class="size-lede">Dinosaurs are extinct today because they lacked opposable thumbs and the brainpower to build a space program.
<p>To go places and do things that have never been done before – that’s what living is all about.
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.
<p>We have an infinite amount to learn both from nature and from each other
<h2 class="size-h2 line-compact">How bout a list?</h2>
<ul>
<li>The sky is the limit only for those who aren't afraid to fly!
<li>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.
<li>If you could see the earth illuminated when you were in a place as dark as night, it would look to you more splendid than the moon.
<li>That's one small step for [a] man, one giant leap for mankind.
</ul>
<h2 class="size-h2 line-compact">How bout deep headings?</h2>
<p>To go places and do things that have never been done before – that’s what living is all about.
<h3 class="size-h3 line-compact">Three is a powerful number?</h3>
<p>We have an infinite amount to learn both from nature and from each other
<h4 class="size-h3 line-compact">Three is a powerful number?</h4>
<ul>
<li>The sky is the limit only for those who aren't afraid to fly!
<li>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.
<li>If you could see the earth illuminated when you were in a place as dark as night, it would look to you more splendid than the moon.
<li>That's one small step for [a] man, one giant leap for mankind.
</ul>
</figure>
@ryanve
Copy link
Author

ryanve commented May 30, 2017

See related line-height classes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment