7 Practical CSS Typography Tips & Tricks
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: https://www.youtube.com/watch?v=veEqYQlfNx8&t=448s
⚠
? Links
Codepen Demo: https://codepen.io/ZoranJambor/pen/MWPpydK/f9797d73feb48f505306a2b826634d0c
In-Depth Guide to CSS Logical Properties: https://youtu.be/cV9JhEV4Ll0
Hands-On Guide to Color Fonts: https://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: https://masteringlinting.com/
Subscribe to CSS Weekly Newsletter:
? https://css-weekly.com/
Keep up-to-date with CSS Weekly:
? Twitter: https://twitter.com/CSSWeekly
? Instagram: https://instagram.com/cssweekly
? Facebook: https://www.facebook.com/CSSWeekly/
Keep up to date with what I'm up to:
? Blog: https://zoranjambor.com
? Twitter: https://twitter.com/zoranjambor
? LinkedIn: https://www.linkedin.com/in/zoranjambor/
- Zoran Jambor
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «7 Practical CSS Typography Tips & Tricks», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.