Hands-on CSS & CSS3 typography.

A workshop.

Marcin Wichary, Google Chrome
mwichary@google.com
@mwichary
www.aresluna.org/css-typography

Numbers. photos

San Francisco sidewalk signage. photos

My actual experience in type design.

Agenda.

Let’s start with basic CSS typography.

Choosing fonts.

The quick brown fox jumps over the lazy dog. 
font-family: ?;
The quick brown fox jumps over the lazy dog. 
font-family: ?, ?, ?;

Sizing fonts.

  • font-size
The quick brown fox jumps over the lazy dog. 
font-size: ?px;
The quick brown fox jumps over the lazy dog. 
font-size: ??;

Styling fonts.

The quick brown fox jumps over the lazy dog. 
font-weight: ?;
        
font-style: ?;

All together now…

The quick brown fox jumps over the lazy dog. 
font: ? ? ?px ?;

But today, we can do a bit better.

Choosing fonts in modern days.

Safe Web fonts.

  • Arial
  • Courier New
  • Georgia
  • Tahoma
  • Trebuchet MS
  • Times New Roman
  • Verdana

Edward Johnston. info

London Underground map. info

Johnston typeface. info

sIFR: Scalable Inman Flash Replacement. info

html5+css3 TypographY 

font-size: ?px;

TypeKit. site

Google Web Fonts. site

Sizing fonts.

The quick brown fox jumps over the lazy dog. 
font-size: ??;

Styling fonts.

The quick brown fox jumps over the lazy dog. 
font-family: ?;
        
font-weight: ?;

Exercise!

Grid and layout.

Leading.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 


line-height: ?px;
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 


font-size: ?px;
        
line-height: ?em;
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 


font-size: ?px;
        
line-height: ?;
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 


font-size: ?px;
        
line-height: ?%;
The quick brown fox says:
I jumped over the lazy dog. I jumped over the lazy dog. I jumped over the lazy dog. I jumped over the lazy dog.
It might be a lie. 


line-height: ?;
        
blockquote { font-size: ?%; }
The quick brown fox says:
I jumped over the lazy dog. I jumped over the lazy dog. I jumped over the lazy dog. I jumped over the lazy dog.
It might be a lie. 


line-height: ?%;
        
blockquote { font-size: ?%; }

Keeping the vertical rhythm.

  • -webkit-line-box-contain info

Justification.

Lorem ipsum. 
text-align: ?;
        
direction: ?;

Indentation and outdentation.

Lorem ipsum. 
text-indent: ?em;
        
margin-left: ?em;

Word breaking.

The quick brown fox jumps over antidisestablishmentarianism. 
word-break: ?;
        
font-size: ?px;

Columns.

  • column-count info
  • column-gap
  • column-rule
  • column-width
Lorem ipsum small. 
-webkit-column-count: ?;
        
-webkit-column-gap: ?px;
        
-webkit-column-rule: ?px solid rgba(0, 0, 0, 0.2);
        
text-align: ?;

Text rotation.

  • transform: rotateZ info
  • transform-origin
The quick brown fox jumps over the lazy dog. 
-webkit-transform: rotateZ(?deg);
        
-webkit-transform-origin: ?% ?%;

Exercise!

Nuance.

Entities and Unicode.

Entities (examples).

  • × × Multiplication sign
  • © © Copyright sign
  • · · Middle dot (interpunct)
  • &endash; – En dash
  • ∞ ∞ Infinity
  • ö ö Small letter o with umlaut
  • ± ± Plus-minus sign
  • € € Euro currency sign
  • » » Right double angle quotation mark
  • π π Greek letter pi
  • ½ ½ Vulgar fraction one half

Unicode entities.

  • × × Multiplication sign
  • · · Middle dot (interpunct)
  • ❤ ❤ Heavy black heart
  • ☃ ☃ Snowman

Keyboard viewer.

Unicode table for you. site

My personal Unicode collection.

Bullet points.

  • Lorem
  • Ipsum
  • Quick brown fox
  • Lazy dog 
li { list-style-type: ?; }
        
li { list-style-position: ?; }

Capitalization.

The quick brown fox jumps over the lazy dog. 
text-transform: ?;
        
font-variant: ?;

Tracking.

The quick brown fox jumps over the lazy dog. 
letter-spacing: ?px;
        
word-spacing: ?px;
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. 
.example-1 { letter-spacing: ?px; }
        
.example-2 { letter-spacing: ?px; }

Tracking emphasis.

The quick brown fox — yes, that particular brown fox — jumps over the lazy dog. 
letter-spacing: ?px;
        
em { letter-spacing: ?px; }
        
em { word-spacing: ?px; }
        
em { margin: 0 ?px 0 ?px; }

Tracking acronyms.

The quick brown fox working undercover for FBI jumps over the lazy dog from CIA. 
abbr { text-transform: ?; }
        
abbr { font-variant: ?; }
The quick brown fox working undercover for FBI jumps over the lazy dog from CIA. 
abbr { font-size: ?% };
        
abbr { letter-spacing: ?px; }
        
abbr { margin: 0 ?px 0 ?px; }
        
abbr { text-shadow: 0 0 ?px rgba(0, 0, 0, ?); }

Tracking highlighting.

Lorizzle ipsizzle dolor sit amizzle, phat adipiscing shiznit. Nullam tellivizzle velizzle, gangster volutpizzle, suscipit quis, gangsta vizzle, phat. Pellentesque cool tortizzle. Pimpin’ eros. You son of a bizzle izzle bow wow wow shut the shizzle up doggy tempizzle get down get down. Mauris pellentesque nibh izzle yo. Vestibulum fizzle tortizzle. Pellentesque eleifend get down get down rizzle. Daahng dawg get down get down ma nizzle platea dictumst. Shiznit dapibus. Curabitizzle tellus urna, pretizzle gizzle, mattizzle ac, my shizz vitae, nunc. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle for sure. Integer sempizzle shiznit get down get down phat. In sagittizzle fo shizzle nizzle nisi. Sheezy rhoncizzle, arcu gizzle rizzle facilisizzle, sizzle crunk ass sem, nizzle auctizzle nulla felizzle a est. Dope volutpizzle i’m in the shizzle augue. Mofo funky fresh dizzle izzle boofron. Prizzle pizzle blandit sapizzle. Etiam for sure, diam pimpin’ away accumsan daahng dawg, fo shizzle sizzle ultrices sem, izzle pot dawg phat sizzle amet purizzle. Maecenizzle gizzle tortor vizzle enizzle. Phasellizzle lobortis. Nulla sure bling bling, convallizzle nec, aliquet bling bling amizzle, dizzle egestas, augue. Vivamizzle crunk. Vestibulizzle ante ipsum primizzle izzle fizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle luctus et cool posuere doggy. Break it down; In break yo neck, yall elizzle eu dizzle bibendizzle condimentizzle. 
em { padding: 0 ?em; }
        
em { margin: 0 ?em; }
        
em { border-radius: ?em; }

Kerning.

Kerning with (Unicode) spaces.

  • brown fox em space
  • brown fox en space (=½ em)
  • brown fox three-per-em space
  • brown fox four-per-em space (=¼ em)
  • brown fox regular space
  • brown fox no-break space
  • brown fox six-per-em space
  • brown fox thin space
  • brown fox hair space
  • brown​fox zero-width space

Em dashes without spaces:

The quick brown fox—yes, that particular brown fox—jumps over the lazy dog.

Em dashes with hair spaces:

The quick brown fox — yes, that particular brown fox — jumps over the lazy dog.

Fixing kerning pairs.

WAREHOUSE 
.l { outline: ?px solid red; }
        
.l { margin-right: ?em; }

Number separators.

5000000 
.thousand { outline: ?px solid red; }
        
.thousand { margin-right: ?em; }

Lettering.js library. site

Special effects.

Stroke.

  • -webkit-text-stroke info
The quick brown fox jumps over the lazy dog. 
font-weight: ?;
        
-webkit-text-fill-color: hsl(?, ?%, ?%);
        
-webkit-text-stroke: ?px hsl(?, ?%, ?%);

Shadows.

The quick brown fox jumps over the lazy dog. 
text-shadow: ?px ?px ?px rgba(0, 0, 0, ?);

Background clipping.

  • -webkit-background-clip info
The quick brown fox jumps over the lazy dog. 
-webkit-background-clip: ?;
        
-webkit-text-fill-color: hsla(28, 50%, 50%, ?);
        
background: ?;

Using JavaScript to enhance typography.

Exercise!

The future.

Adobe’s CSS regions.

And more…

  • hyphenation
  • text-decoration-color
  • text-underline-position
  • text-align-last
  • font-variant-ligatures
  • font-stretch
  • font-kerning
  • …

More info

Extra! Extra!

Using gradients to build a grid.

Gradients, introduced in CSS are a very versatile new graphic element that can be used in a variety of ways. On the following page, we will use very simple gradients to simulate rules that will be put together to form a vertical grid. (Note: This is a new CSS syntax for gradients; it requires Safari Nightly or Chrome to run properly.)

Using comma, we can add more rules. On the following page, we’re introducing a vertical one.

Using gradients to build underlines.

Gradients are flexible enough to also help us with crafting nice underlines.

Selection style.

Using a little-known CSS property you can control the style of the text selected by your users.

Smoothing style.

  • -webkit-font-smoothing info

WebKit-based browsers enable you to pick your style of antialiasing: none at all, regular full-pixel antialiasing, and subpixel antialiasing. This might be useful if you want more control, or during transitions and animations on transparent backgrounds on Macs, where subpixel antialiasing tends to struggle.

The quick brown fox jumps over the lazy dog. 
-webkit-font-smoothing: ?;