Data-attributes are a simple and easy way to create layers for text effects on the web, but they are problematic for accessibility.

The problem with data-attributes for text effects

The View Transition API enables animated transitions between two page states. Available in Chrome 111+ I had a play with it to see if I could make some fun text based transitions.

Text Transition with View Transitions

font-variant-ligatures gives us access to the ligature open type features directly in our websites and web applications.

Making use of the font-variant-ligatures CSS property gives access to alternate glyphs within fonts that combine one or more glyphs to improve readability.

Making the most of ligatures

Where variable fonts added new axis to combine multiple font styles into the one file color fonts do a similar thing but with color

With the release of Chrome 121 we can now animate a smooth transition between font-palettes in Color Fonts using only CSS.

Animating Font Palette

font-variant-numeric deals specifically with numeric characters like digits.

The font-variant-numeric CSS property allows us to control alternate glyphs for numbers, fractions, and ordinal markers.

Using Font Variant Numeric

Where variable fonts added new axis to combine multiple font styles into the one file color fonts do a similar thing but with color.

Variable fonts were a game changer for fonts on the web, but you can take it a step further with the addition of the color font spec. Control both the font and the colours of the font truly enabling PhotoShop like text effects with real text on the web.

Text Lab

A collection of fun experiments, effects, examples and stuff I have learned as a developer about working with text on the web.

Featured Article

Animating Font Palette

Articles

13th Mar 2024The problem with data-attributes for text effects

1st Mar 2024Text Transition with View Transitions

15th Feb 2024Making the most of ligatures

9th Jan 2024Using Font Variant Numeric