Chris Heilmann, Daniel Cranney & Jason Pamental
WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more
#1about 6 minutes
Balancing typography, accessibility, and performance on the web
Web typography should be suggested, not specified, to create robust systems that account for user settings, font loading, and accessibility needs.
#2about 7 minutes
Staying curious and creative in the age of AI
AI tools can create hollow, derivative work, so it's important to embrace the process of learning and developing personal judgment and intuition.
#3about 5 minutes
Adapting print design principles for the fluid web
Instead of mimicking print layouts, web design should use modern CSS like Grid and Flexbox to create flexible experiences that honor user control.
#4about 9 minutes
Managing the flash of unstyled text (FOUT)
The flash of unstyled text is a feature, not a bug, and can be managed by styling fallback fonts to minimize layout shifts during web font loading.
#5about 8 minutes
Using modern CSS for advanced typographic control
New CSS properties like hanging punctuation and text-wrap balance, along with features like hyphenation, offer fine-grained typographic control directly in the browser.
#6about 9 minutes
Self-hosting web fonts for performance and compliance
Hosting fonts on your own server instead of using a third-party service like Google Fonts improves performance and helps with GDPR compliance.
#7about 16 minutes
The power and potential of variable fonts
Variable fonts offer expressive potential and performance benefits by packaging multiple styles into a single file, enabling fluid typography with CSS clamp().
#8about 9 minutes
Choosing a typeface with a distinct voice
A typeface is the voice of your words, so select one that conveys the right emotion and brand identity rather than defaulting to a neutral choice like Helvetica.
Notes and resources
- Jason Pamental
- Vibe coding, creativity, craft and professionalism… are we making ourselves redundant?
- Interactive Typography Cheatsheet
- Modern CSS Layout is Awesome: Talking and Thinking About CSS Layout - 121
- Learn CSS Layout the pedantic way
- Variable fonts
- Modern Font Stacks
- Polishing your typography with line height units
- Better typography with text-wrap pretty
- Reimagining Fluid Typography
- In defence of fluid typography
- Typography Manual
- Should you self-host Google Fonts? - 120
- google-webfonts-helper A Hassle-Free Way to Self-Host Google Fonts
- “You wouldn’t steal a car” anti-piracy campaign may have used pirated fonts
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
17:51 MIN
Discussion on the evolution and future of CSS
What's new in CSS for Designers?
Unlock full access
Log in or set up an account to access this feature and more.
12:31 MIN
Discussing modern web development news and trends
WeAreDevelopers LIVE - GraalVM in action, Static Analysis insights and more
Unlock full access
Log in or set up an account to access this feature and more.
06:19 MIN
The evolution of color and typography on the web
The State Of The Web
Unlock full access
Log in or set up an account to access this feature and more.
11:50 MIN
Q&A on CSS history, design, and print standards
How to write a book with CSS
Unlock full access
Log in or set up an account to access this feature and more.
01:57 MIN
Presenting live web scraping demos at a developer conference
Tech with Tim at WeAreDevelopers World Congress 2024
Unlock full access
Log in or set up an account to access this feature and more.
03:26 MIN
Bridging the gap between designers and developers
WeAreDevelopers LIVE - Is Software Ever Truly Accessible?
Unlock full access
Log in or set up an account to access this feature and more.
05:42 MIN
How to get developers to use a design tool
Building Collaborative Open Source tools for Developers and Designers - Pablo Ruiz-Muzquiz from Penpot
Unlock full access
Log in or set up an account to access this feature and more.
08:48 MIN
The evolution of London's web developer community events
Using all the HTML, Running State of the Browser and "Modern" is Rubbish
Unlock full access
Log in or set up an account to access this feature and more.
Featured Partners
Related Videos
59:20What's new in CSS for Designers?
Onur Gumus
31:30Accessibility powered by AI
Ramona Domen
1:02:33WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more
Chris Heilmann, Daniel Cranney & Elena Torró
53:24WeAreDevelopers LIVE - Performance and AI?, Social Media decline, Developer Events and more
Chris Heilmann, Daniel Cranney & Harry Roberts
1:06:13WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more
Chris Heilmann & Daniel Cranney & Dirk Ginader
1:10:08WeAreDevelopers LIVE - Gaps in CSS, EU Accessibility Act and more!
Chris Heilmann & Daniel Cranney & Emma Dawson
1:04:50WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more
Chris Heilmann & Daniel Cranney & Christian Schaefer
47:53WeAreDevelopers LIVE: What's happening to React?, All-in-one editors, Fireships and Firebases & more
Chris Heilmann & Daniel Cranney & Tejas Kumar
Related Articles
View all articles
.webp?w=240&auto=compress,format)
From learning to earning
Jobs that call for the skills explored in this talk.
infomax websolutions GmbH
Grassau, Germany
Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
autoiXpert GmbH & Co. KG
Stuttgart, Germany
Senior
Node.js
Angular
MongoDB
TypeScript
Kresse & Discher GmbH
Offenburg, Germany
Intermediate
Senior
CSS
Figma
JavaScript
Lotum media GmbH
Bad Nauheim, Germany
Senior
Node.js
JavaScript
TypeScript
Tech Solutions Gmbh
GIT
HTML
Vue.js
Tech Solutions Gmbh
GIT
HTML
Vue.js
Tech Solutions Gmbh
GIT
HTML
Vue.js