Stop Thinking
in Pixels

pixelated gladiator

pixelated dinosaur

@keithjgrant

Developer: Intercontinental Exchange/New York Stock Exchange
Author: CSS in Depth, Manning Publications (2017)

keithjgrant.com/talks

pixelated boy

It's dangerous to go alone! Take this.

Ems for font-size

Based on inherited font-size


.parent {
  font-size: 16px;
}

.parent > .child {
  font-size: 1.2em; /* 19.2px */
}

pixelated chili pepper

Font-size vs other properties

Same declared value; different computed value


.tile {
  font-size: 1.2em;     /* 19.2px */

  margin: 1.2em;        /* 23.04px */
  padding: 1.2em;       /* 23.04px */
  border-radius: 1.2em; /* 23.04px */
}

Deeply-nested ems

font-size: 16px

font-size: 1.2em // 19.2px

font-size: .875em // ???

font-size: .9em // this is ridiculous

Shrinking text problem


ul {
  font-size: 0.8em;
}

Nested elements
- have this problem
  - when you
    - use ems
      - for font size

Solution: rem

“Root em”—relative to font size of root element (<html>)

Pixelated magic lamp

Use rems for font size


ul {
  font-size: 0.8rem;
}

Nested elements
- are all the same
  - when you
    - use rems
      - for font size

Recommendation

By default, use:

rem: font-size
px: border-width
em: padding, margin, border-radius

When in doubt, us ems

Side quest!

Use unitless numbers for line-height

Units: a fixed computed value inherits
Unitless: adapts to changes in descendant font sizes

“Use relative units
for font-size”

pixelated cactus

There’s more to ems than just accessibility

More accurate
Simpler code
Better flexibility

[desired size] / [base size]

14px / 16px = 0.875em

18px / 14px = 1.2857em

24px / 13π = STOP IT

Math :(

pxtoem.com

The Elements of Typographic Style,
Robert Bringhurst

The typographic scale: 12pt, 14pt, 16pt, and so on

Beautiful typography is about ratios

Screenshot of ratio-based typography scaling tool

type-scale.com

Common approach to web typography:

Use a scalar...

...to calculate px font sizes...

...to reverse back out to an em scalar 🤔

Just use a scalar

2.441em
1.953em
1.563em
1.25em
1em
0.8em
0.64em
0.512em
0.41em

Scalar: 1.25em
— always produces next font size up

Inverse scalar: 0.8em (1 / 1.25)
— always produces next font size down

Don’t micromanage
your CSS

Delegate responsibility to it

Pixelated blue ribbon

“Can you make this margin 3px taller?”

Two options:

Do the conversion yourself
Teach the other party ems

Pixelated pirate

Resizable
modules

Pixelated test tubes

Resizing px is tedious


.tile {
  border: 2px solid white;
  padding: 7px 15px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-size: 16px;
}

.tile__title {
  font-size: 14px;
  text-transform: uppercase;
}


.tile--small {
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
  font-size: 10px;
}

.tile--small > .tile__title {
  font-size: 8px;
}

Base font size on a known container

{ font-size: 1rem; }

{ font-size: 0.8em; }

{ font-size: 1em; }

{ font-size: 1.2em; }

One rem-value at module root—all else in ems


.tile {
  border: 2px solid white;
  padding: 0.6em 1.2em;
  border-radius: 0.3em;
  margin-bottom: 1em;
  font-size: 1rem;
}

.tile__title {
  font-size: 0.8em;
  text-transform: uppercase;
}

                  
.tile--small {
  font-size: 0.625rem;
}

                  
.tile--large {
  font-size: 1.3rem;
}

Game saved

Hold RESET while you turn POWER off!!

Game saved

Hold RESET while you turn POWER off!!

Game saved

Hold RESET while you turn POWER off!!

Use rem for global sizing

Use em for local sizing

Pixelated mushrooms

Scalable modules


.tile {
  border: 2px solid #000;
  padding: 0.6em 1.2em;
  border-radius: 0.3em;
  margin-bottom: 1em;
  font-size: 1rem;
}

.tile__title {
  font-size: 0.8em;
  text-transform: uppercase;
}

demo

Scalable shapes


.dropdown__toggle::after {
  content: "";
  position: absolute;
  right: 1em;
  top: 1em;
  border: 0.3em solid;
  border-color: black transparent transparent;
}

demo

Scalable icons/images


.twitter > img {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}

demo

SVG FTW!

Scalable shadows


a:link {
  text-decoration: none;
  box-shadow: inset 0 -0.1em 0 0 #cef;
  transition: box-shadow 0.2s ease-in-out;
  color: #346;
}

a:hover {
  box-shadow: inset 0 -1.2em 0 0 #cef;
}

demo

All your base font are belong to us

It's a secret
to everybody

Pixelated treasure chest

Scale for each breakpoint


:root {
  font-size: 0.8em;
}

@media (min-width: 35em) {
  :root {
    font-size: 1em;
  }
}

@media (min-width: 50em) {
  :root {
    font-size: 1.25em;
  }
}

demo

Viewport-relative units

vw—% of viewport width
vh—% of viewport height
vmin—smaller of vh/vw
vmax—larger of vh/vw

Scale based on viewport size


:root {
  font-size: 2vw;
}

demo

calc() to the rescue


:root {
  font-size: calc(0.5em + 1vw);
}

demo

Adaptive code

Pixelated quiver of arrows

CSS Variables


:root {
  --font-color: black;
}

.inverse {
  background-color: black;
  --font-color: white;
}


.tile {
  color: var(--font-color);
  border-color: var(--font-color);
}

demo

Color functions (future spec)


.alert {
  color: blue;
  background-color: color(currentColor lightness(+50%));
  border: 1px solid currentColor;
}

.alert--danger {
  color: red;
}

.alert--warning {
  color: orange;
}

hue, saturation, lightness, red, green, blue,
whiteness, blackness, tint, shade, blend, contrast

demo (PostCSS)

A consistent hierachy

tree structure with root node, child nodes, and leaf nodes

Jump in with
both feet

Ems are most powerful when you fully embrace them

Pixelated blue heron

CSS in Depth

manning.com/books/css-in-depth

50% off code: mlgrant2

CSS in Depth book cover

astronaut in space suit

Thanks for playing!

Pixel art: @amandaglosson
“Dragon Warrior” font: @patrick_h_lauke

Find me on:

Twitter

@keithjgrant

Web

keithjgrant.com

THE END

purple tentacle

Stop Thinkingin Pixels

@keithjgrant

It's dangerous to go alone! Take this.

Ems for font-size

Font-size vs other properties

Deeply-nested ems

Shrinking text problem

Solution: rem

Use rems for font size

Recommendation

Side quest!

“Use relative unitsfor font-size”

There’s more to ems than just accessibility

[desired size] / [base size]

Math :(

The Elements of Typographic Style,Robert Bringhurst

Beautiful typography is about ratios

Common approach to web typography:

Just use a scalar

Don’t micromanageyour CSS

“Can you make this margin 3px taller?”

Resizablemodules

Resizing px is tedious

Base font size on a known container

One rem-value at module root—all else in ems

Game saved

Game saved

Game saved

Scalable modules

Scalable shapes

Scalable icons/images

Scalable shadows

All your base font are belong to us

It's a secretto everybody

Scale for each breakpoint

Viewport-relative units

Scale based on viewport size

calc() to the rescue

Adaptive code

CSS Variables

Color functions (future spec)

A consistent hierachy

Jump in withboth feet

CSS in Depth

Thanks for playing!

Find me on:

THE END

Stop Thinking
in Pixels

“Use relative units
for font-size”

The Elements of Typographic Style,
Robert Bringhurst

Don’t micromanage
your CSS

Resizable
modules

It's a secret
to everybody

Jump in with
both feet