Archive for the ‘typography’ Category

Letter Effects and Interaction Ideas (Part 2)

Today we’d like to share some more letter effects with you. Just like in the first set, we play around with hover and click interactions to create some fun typography animations. For some animations we use anime.js. Charming.js helps us with the ...

An Introduction to the `fr` CSS unit

Posted on: No Comments
With all the excitement around CSS Grid, I haven't seen as much talk about the new fr CSS length unit (here's the spec). And now that browser support is rapidly improving for this feature, I think this is the time to explore how it can be used in conju...

The Equilateral Triangle of a Perfect Paragraph

Still, too many web designers neglect the importance of typography on the web. So far, I've only met a few that really understand typography and know how to apply that knowledge to their work. And the lack of knowledge about typography doesn't come fro...

Letter Effects and Interaction Ideas

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animat...

Tracing the History of CSS Fonts

Chen Hui Jing has written an excellent post on the history of CSS fonts and the way that the W3C writes the specification and strange CSS properties like font-effect, font-emphasize and font-presentation. As part of my perpetual obsession with typog...

Combining Fonts

Another one from Jake Archibald! This one is using two @font-face sets for the same font-family name. The second overrides the first, but only select characters of it, thanks to unicode-range. You know how designers love ampersands? It's a thing. Dan ...

Deep dive CSS: font metrics, line-height and vertical-align

Posted on: No Comments
Vincent De Oliveira has written an epic post that details pretty much everything you might ever want to know about the line-height and vertical-align properties. If you’ve ever had trouble aligning things next to text or wondered why two fonts look s...