CodePen Templates CodePen Examples
Links and Resources
Inspiration for good web typography
- Fonts in Use: Web – typographically interesting websites
- Typewolf – Verschiedene Listen und Schriftanalysen von Website
- Beautiful Web Type – Schöner typografischer Umgang mit Google Fonts, wenn auch schon älter und nicht responsive
1. The right typeface
- Browser examples for choosing typefaces
- Schritwahl im Webdesign German blog article
- How We Read – article from alistapart describing reading and why typography has such a great impact
- Schriftmischung ist keine Hexerei – Deutsch übersetzter Artikel von John Boardley auf Typografie.info
- CSS Font Stack – Alternative Schriften im Webdesign klug einsetzen
- Websichere Schriften in Zeiten von Responsive Webdesign
- Typecast – Testing Fonts in the browser
2. Web typography basics
- Size Matters: Balancing Line Length And Font Size In Responsive Web Design
- Browser Examples of line-height and line-length
- Browser Examples for justified text
- REM vs EM – The Great Debate about relative units
3. Advances web typography
- list-style CSS-Tricks – how to show different list-styles
- Browser-Examples showing Faux-Fonts
- Responsive And Fluid Typography With vh And vw Units
4. Variable Fonts
- How to start with variable fonts on the web by me
- Implementing a variable font with fallback web fonts by me
- v-fonts.com New releases of variable fonts
- Font Playground at Type Detail – Test and try out variable fonts and export the code to CodePen
- Video: Talk about Variable Web Typography by me
- Getting started with variable fonts by Richard Rutter
- Use variable fonts in the real world by Richard Rutter