There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps. But if you use it, you're going to need to make sure you're also correctly identifying the language. And to understand why that matters, we need to talk about words and syllables.
(I did a Twitter thread on this a while back, against my better judgment, and now moving to a proper blog.) The hanging-punctuation property in CSS is almost a no-brainer. The classic example is a …
Container Query Units and Fluid Typography | Modern CSS Solutions
To learn more about the behaviors of container query units, we'll explore three fluid typography techniques applied via a "mixin" using custom properties. These upgraded methods will produce truly responsive typography, regardless of context.
min(), max(), and clamp(): three logical CSS functions to use today
Min, max, and clamp provide some powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.
Linearly Scale font-size with CSS clamp() Based on the Viewport | CSS-Tricks
Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we’re going to explore a different way
Automatic hyphenation on the web has been possible since 2011 and is now broadly supported. There is however far more control available to designers than just turning on hyphens.
Responsive Knockout Text With Looping Video | CSS-Tricks
Here’s an idea! Let’s make an an HTML play inside the shape of some letters. Like "Knockout Text" except instead of an image behind, it’s video. A live demo will explain more clearly: See the Pen basic pen by Giulio Mainardi (@mgiulio) on CodePen. A key objective here is to develop this responsively. The idea is to
Collection of HTML and CSS text effects with little JavaScript: 3D, animated, glitch, hover, shadow, rotating and typing. Demo and download code (*zip). 3D CSS Typography (demo image) 3D CSS Typograph...
18 Incredible CSS3 Effects You Have Never Seen Before | Queness
I did some search around the web and there are heaps of CSS3 examples that are really make my eyes wide opened! It's incredible! I could never imagine to make animation using CSS few years ago. So, in...