CSS Font Lorem Ipsum
Professional web designer on a closed course. Do not attempt.
Link tags: font
221
PlymouthPress – A Letterpress Image Font
An experimental image font made using the University of Plymouth’s unique letterpress workshop.
Grungy!
The font is intended for display purposes only, and not is suitable for body text.
Uppestcase and Lowestcase Letters: Advances in Derp Learning
A genuinely interesting (and droll) deep dive into derp learning …for typography!
[css-fonts-5] @font-face supports incremental · Issue #6063 · w3c/csswg-drafts
This could give a big boost to web performance!
System fonts don’t have to be ugly /// Iain Bean
You don’t have to use web fonts—there are some pretty nice options if you stick to system fonts (like Georgia, Charter, and Palatino).
Proxima Vara by Mark Simonson
Oh, nice! A version of the classic Proxima Nova that’s a variable font that allows you to vary weight, width, and slant.
How to avoid layout shifts caused by web fonts – Simon Hearne
A terrific in-depth look at improving the performance of web fonts.
Creating websites with prefers-reduced-data | Polypane Browser for Developers
There’s no browser support yet but that doesn’t mean we can’t start adding prefers-reduced-data to our media queries today. I like the idea of switching between web fonts and system fonts.
Google font to SVG path
Cassie pointed me to this very nifty tool (that she plans to use in your SVG animation workshop): choose font from Google Fonts, type some text, and get the glyphs immediately translated into an SVG!
Type Specimens
This is a lovely new project from Mark that gets very meta, cataloging specimens of type specimens:
This project will dig into specimens from these three perspectives: as artefacts made by and for font designers to evolve type culture; as tools for font users to make decisions about choosing and using type; and as effective marketing tools.
Scunthorpe Sans 🗯🚫 profanity-blocking font
Using ligatures to create a s*** font that f***ing censors bad language automatically.
The Fonts in Popular Things Identified Vol. 1 · Typewolf
I’d watch this game show:
Welcome to the first installment of a new series on Typewolf, where I’ll be identifying the fonts used in popular things. The focus here is on anything you might encounter in contemporary visual culture—movie posters, TV shows, book covers, etc.
Times New Arial
Ever wanted to set some text in 70% Times New Roman and 30% Arial? Me neither. But now, thanks to variable fonts, you can!
FEMME TYPE – Celebrating Women in the Type Industry
A treasure trove of case studies and interviews.
Dark mode and variable fonts | CSS-Tricks
This is such a clever use of variable fonts!
We can use a lighter font weight to make the text easier to read whenever dark mode is active.
Rise of the Digital Fonts
A history of typesetting from movable type to variable fonts.
FontGoggles — Interactive Previewing and Comparing
A really nice open-source font-previewing tool for the Mac.
A Variable Fonts Primer
Everything you ever wanted to know about variable fonts, gathered together into one excellent website.
Variable fonts’ past, present and future, according to Dalton Maag
In this interview, Biance Berning says:
Cassie Evans from Clearleft is an interesting person to follow as she combines web animation with variable font technology, essentially exploring the technology’s practicality and expression.
Hells yeah!
We’re only just scratching the surface of what variable fonts can do within more interactive and immersive spaces. I think we’ll see a lot more progress and experimentation with that as time goes on.
A short history of body copy sizes on the Web
A look at the trend towards larger and larger font sizes for body copy on the web, culminating with Resilient Web Design.
There are some good arguments here for the upper limit on the font size there being too high, so I’ve adjusted it slightly. Now on large screens, the body copy on Resilient Web Design is 32px (2 times 1em), down from 40px (2.5 times 1em).