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
11:16 MIN
Applying CSS to book design and typography
How to write a book with CSS
28:35 MIN
Q&A on CSS history, design, and print standards
How to write a book with CSS
21:06 MIN
The long journey to modern CSS layout and responsive design
The State Of The Web
10:06 MIN
The evolution of color and typography on the web
The State Of The Web
10:26 MIN
Core techniques for writing robust and resilient CSS
Future-Proof CSS
15:17 MIN
Adapting print design principles for the fluid web
WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more
00:02 MIN
The origins of CSS at CERN
How to write a book with CSS
32:17 MIN
Analyzing the new Web Readiness Report and modern CSS
WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community 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
29:11Design Principles For The Web
Jeremy Keith
43:11The State Of The Web
Jeremy Keith
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Web Developer - JavaScript | React | Angular | Vue.js | Bootstrap | Tailwind | HTML | CSS
Tech Solutions Gmbh
Berlin, Germany
API
CSS
GIT
HTML
Scrum
+5
Frontend Web Developer - JavaScript | React | Angular | Vue.js | Bootstrap | Tailwind | HTML | CSS
Tech Solutions Gmbh
Brandenburg an der Havel, Germany
API
CSS
GIT
HTML
Scrum
+5
Frontend Web Developer - JavaScript | React | Angular | Vue.js | Bootstrap | Tailwind | HTML | CSS
Tech Solutions Gmbh
Bremen, Germany
API
CSS
GIT
HTML
Scrum
+5
Frontend Web Developer - JavaScript | React | Angular | Vue.js | Bootstrap | Tailwind | HTML | CSS
Tech Solutions Gmbh
Illingen, Germany
API
CSS
GIT
HTML
Scrum
+5