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
01:32 MIN
Organizing a developer conference for 15,000 attendees
Cat Herding with Lions and Tigers - Christian Heilmann
03:17 MIN
Selecting strategic partners and essential event tools
Cat Herding with Lions and Tigers - Christian Heilmann
04:49 MIN
Using content channels to build an event community
Cat Herding with Lions and Tigers - Christian Heilmann
04:57 MIN
Increasing the value of talk recordings post-event
Cat Herding with Lions and Tigers - Christian Heilmann
02:39 MIN
Establishing a single source of truth for all data
Cat Herding with Lions and Tigers - Christian Heilmann
02:44 MIN
Rapid-fire thoughts on the future of work
What 2025 Taught Us: A Year-End Special with Hung Lee
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
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.
Tech Solutions Gmbh
Berlin, Germany
API
CSS
GIT
HTML
Scrum
+5
Tech Solutions Gmbh
Brandenburg an der Havel, Germany
API
CSS
GIT
HTML
Scrum
+5
Tech Solutions Gmbh
Illingen, Germany
API
CSS
GIT
HTML
Scrum
+5