Håkon Wium Lie

Can CSS recreate Tufte's designs?

CSS was inspired by Edward Tufte's book designs in 1994. But can it faithfully recreate them today?

Can CSS recreate Tufte's designs?
#1about 5 minutes

The origins of CSS and typographic inspiration

The web's early visual limitations led to the creation of CSS, which borrowed concepts from the rich history of typography exemplified by Edward Tufte's books.

#2about 4 minutes

Recreating basic book layouts with paged media

CSS for paged media allows for defining page size, margins, page numbers, and running headers to establish a book's fundamental structure.

#3about 7 minutes

Proposing new CSS for advanced page floats

New CSS float properties like `top`, `bottom`, and `right-note` are proposed to handle complex layouts with figures and sidenotes in paged media.

#4about 4 minutes

Creating full-spread layouts across two pages

A technique involving duplicate elements with oversized widths allows a single image or heading to seamlessly span across a two-page spread.

#5about 2 minutes

The role of human craft in optical alignment

While CSS can automate much of the layout, achieving perfect optical alignment often requires human judgment to adjust elements so they look correct.

#6about 3 minutes

Adapting print designs for responsive screens

JavaScript can enhance the user experience on small screens by transforming sidenotes into interactive, collapsible elements and ensuring baseline alignment for images.

#7about 2 minutes

Enhancing typography with CSS text replacement

The `text-replace` property allows for automatically substituting character sequences with proper typographic symbols like em-dashes and correct spacing.

#8about 1 minute

Tools and a call to create your own books

A list of tools for generating PDFs from web technologies is provided, along with encouragement for everyone to write and design their own books.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Applying CSS to book design and typography
03:32 MIN

Applying CSS to book design and typography

How to write a book with CSS

Q&A on CSS history, design, and print standards
11:50 MIN

Q&A on CSS history, design, and print standards

How to write a book with CSS

Adapting print design principles for the fluid web
05:24 MIN

Adapting print design principles for the fluid web

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

The origins of CSS at CERN
03:10 MIN

The origins of CSS at CERN

How to write a book with CSS

Discussion on the evolution and future of CSS
17:51 MIN

Discussion on the evolution and future of CSS

What's new in CSS for Designers?

The long journey to modern CSS layout and responsive design
04:39 MIN

The long journey to modern CSS layout and responsive design

The State Of The Web

The evolution of web layout from tables to grid
01:14 MIN

The evolution of web layout from tables to grid

Kirsty's Excellent Adventure in CSS Grid

Mastering pagination and page layout for print
01:59 MIN

Mastering pagination and page layout for print

How to write a book with CSS

Featured Partners

Related Videos

See all videos
How to write a book with CSS40:25

How to write a book with CSS

Håkon Wium Lie

Future-Proof CSS37:55

Future-Proof CSS

Ire Aderinokun

The State Of The Web43:11

The State Of The Web

Jeremy Keith

Design Principles For The Web29:11

Design Principles For The Web

Jeremy Keith

Playing Games with CSS44:29

Playing Games with CSS

Elad Shechter

What's new in CSS for Designers?59:20

What's new in CSS for Designers?

Onur Gumus

Web development: where are we, and where are we going?32:56

Web development: where are we, and where are we going?

Laurie Voss

Is CSS Houdini finally usable in 2023?29:40

Is CSS Houdini finally usable in 2023?

Tanja Ulianova

Related Articles

View all articles
DC
Daniel Cranney
Creating a Spotlight Text Effect with CSS and JavaScript
Every now and then it’s fun to build something small just to get a better grip on a concept, and this one’s a great example. We’ll explore how to make a simple spotlight text effect that helps you understand how to follow the cursor, use CSS variable...
Creating a Spotlight Text Effect with CSS and JavaScript
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
BR
Benjamin Ruschin
Creating a 3D Card Fan with CSS Transforms
So many of us developers use CSS every day, but the chances are we only use a very small portion of its features, and overlook many of its most fun ones. You only need cruise Codepen to find some mind-bendingly impressive CSS-based projects using 3D ...
Creating a 3D Card Fan with CSS Transforms

From learning to earning

Jobs that call for the skills explored in this talk.