Uploaded May 2023 | Updated September 2026, 2 hours ago
Handy hands-on tips to improve your CSS Typography, explaining in detail how to implement fluid typography using clamp(), adjust letter spacing, set optimal and balanced line lengths, style link underlines, improve unordered list styling with emoji bullets, and use color fonts.
⚠
I made a mistake in the fluid typography part. Using clamp() with viewport units is not enough, as this implementation can disable browser zoom for certain screen sizes, which is an accessibility problem. To work around the problem, you should use "font-size: clamp(1rem, 4vw + 1rem, 5rem);".
@KevinPowell addressed this beautifully in his video on viewport units: youtube.com/watch?v=veEqYQlfNx8&t=448s
⚠
🔗 Links
Codepen Demo: codepen.io/ZoranJambor/pen/MWPpydK/f9797d73feb48f505306a2b826634d0c
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Hands-On Guide to Color Fonts: youtu.be/VpZSMq2ajDE
📖 Timestamps
00:00 Intro & Demo Setup
00:23 Use fluid typography with clamp() function
03:55 Tweak letter spacing for uppercase text and large font sizes
05:52 Set optimal line lenght between 50-70 characters using ch units
07:20 Balance line lenghts and get rid of text orphans using text-wrap:balance
08:41 Tweak link underline styling (color, thickness, offset)
10:22 Improve list (ul, ol) styling using \:\:marker pseudo-element — use emojis for bullet type/style
16:54 Consider using color fonts to add additional flare to your headlines
20:02 Recap & Conclusion
Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
Handy hands-on tips to improve your CSS Typography, explaining in detail how to implement fluid typography using clamp(), adjust letter spacing, set optimal and balanced line lengths, style link underlines, improve unordered list styling with emoji bullets, and use color fonts.
⚠
I made a mistake in the fluid typography part. Using clamp() with viewport units is not enough, as this implementation can disable browser zoom for certain screen sizes, which is an accessibility problem. To work around the problem, you should use "font-size: clamp(1rem, 4vw + 1rem, 5rem);".
@KevinPowell addressed this beautifully in his video on viewport units: youtube.com/watch?v=veEqYQlfNx8&t=448s
⚠
🔗 Links
Codepen Demo: codepen.io/ZoranJambor/pen/MWPpydK/f9797d73feb48f505306a2b826634d0c
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Hands-On Guide to Color Fonts: youtu.be/VpZSMq2ajDE
📖 Timestamps
00:00 Intro & Demo Setup
00:23 Use fluid typography with clamp() function
03:55 Tweak letter spacing for uppercase text and large font sizes
05:52 Set optimal line lenght between 50-70 characters using ch units
07:20 Balance line lenghts and get rid of text orphans using text-wrap:balance
08:41 Tweak link underline styling (color, thickness, offset)
10:22 Improve list (ul, ol) styling using \:\:marker pseudo-element — use emojis for bullet type/style
16:54 Consider using color fonts to add additional flare to your headlines
20:02 Recap & Conclusion
Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
