Håkon Wium Lie
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
07:46 MIN
The challenge of keeping up with modern CSS
WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More
08:07 MIN
Exploring modern JavaScript performance and new CSS features
WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More
05:41 MIN
Choosing the right fonts for web legibility and performance
Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2
11:10 MIN
The only frontend stack that truly matters
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
11:32 MIN
The industry's focus on frameworks over web fundamentals
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
03:05 MIN
Building collaborative design tools and the neo-brutalism trend
Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2
04:02 MIN
How a broken frontend culture impacts the web
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
08:29 MIN
How AI threatens the open source documentation business model
WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More
Featured Partners
Related Videos
40:25How to write a book with CSS
Håkon Wium Lie
37:55Future-Proof CSS
Ire Aderinokun
22:46What’s New and What’s Next in Web UI
Cleyra Uzcategui
59:20What's new in CSS for Designers?
Onur Gumus
29:40Is CSS Houdini finally usable in 2023?
Tanja Ulianova
1:10:55WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more
Chris Heilmann, Daniel Cranney & Jason Pamental
43:11The State Of The Web
Jeremy Keith
29:11Design Principles For The Web
Jeremy Keith
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
OptiVision Studios
München, Germany
CSS
HTML
WordPress
JavaScript
Hochschule Kaiserslautern
Zweibrücken, Germany
PHP
CSS
HTML
Java
JavaScript
+1