A terrific rundown of all your options when it comes to web font loading.
A handy tool for testing the legibility of different typefaces under all sorts of conditions.
I’ve always loved the way that Edward Tufte consistently uses Bembo to typeset his books. Here’s a version made for screen and freely licensed.
You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:
A concise, referential guide on best web typographic practices.
Mind you, I take issue with this assertion:
Establishing a vertical rhythm is simple.
I’ve seen letterforms you people wouldn’t believe…
A thoroughly lovely look at the octothorpe that skewers a myth or two along the way.
Some smart thoughts on web fonts.
Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.
The numero sign, the reversed question mark, the interrobang, the l b bar symbol, the Tironian et, the capitulum, and the ironieteken.
I love good typography but I have to agree with the sentiment expressed here.
System fonts can be beautiful. Webfonts are not a requirement for great typography.
In this extract from his forthcoming book, Richard looks at when to use
ems, when to use
rems …and when to use
ch (no, me neither).
An attempt to convey the experience of (one kind of) dyslexia through code.
A wonderfully thoughtful piece on typography, Jan Tschichold and the web. This really resonated with me:
It’s only been over the past year or so in which I’ve recognised myself as a ‘Web designer’ with a capital W, as I now believe that something happens to information and technology, and even typography itself, when people pass through these interconnected networks and interact with hypertext.
It’s for these reasons that I don’t believe in “digital design” or “designing for screens” and it’s why I’m often attracted to one particular side of this spectrum.
Robin proposes three “principles, suggestions, outlines, or rather things-that-I-ought-to-be nervous-about when setting text on the web”:
- We must prioritise the text over the font, or semantics over style.
- We ought to use and/or make tools that reveal the consequences of typographic decisions.
- We should acknowledge that web typography is only as strong as its weakest point.
There’s an in-depth look at applying progressive enhancement to web type, and every single link in the resources section at the end is worth investigating.
Oh, and of course it’s beautifully typeset.
We have some new
font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.
A single page showing all the weights available from Google fonts at a glance.
The audio is now up from all the talks at this year’s excellent Ampersand conference.
This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.
Read all the way through for a free gift.
Websites should not come with minimum software requirements.
The video of Richard’s great talk on responsive typography at the Up Front conference.
A long zoom and then a deep dive into web typography.
This was a fun way to spend the day—getting my hands dirty with ink and type.
Google Fonts aren’t renowned for their quality but this is a beautiful demonstration of what you can accomplish with them.
You’ll want to back this—you’ll want to back the hell out of this!
By far the creepiest type experiment I have ever seen.
(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)
Smart thinking here on the eternal dilemma with loading web fonts. Filament Group have thought about how the initial experience of the first page load could be quite different to subsequent page loads.
Like caniuse.com, but for typography features. Find out what’s supported in browsers today.
Typeset In The Future is back with another cracking analysis. This time—following on from 2001 and Moon—we’ve got Alien.
In her final recorded message before hypersleep, Ripley notes that she is the sole survivor of the Nostromo. What she forgets to mention is that she has not once in the past two hours encountered any Eurostile Bold Extended.
Many of the free fonts available from Google are pretty bad, but this site showcases how some of them can be used to great effect.
Richard never rants.
Here’s Richard ranting.
Some sleuthing uncovers an interesting twist in New York’s psychogeography:
All of the buildings have been demolished, and in some cases the entire street has since been erased. But a startling picture still emerged: New York once had a neighborhood for typography.
Here’s the font that Brian created at the line-mode browser hack day at CERN.
A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.
A cute approach to pairing typefaces: treat it like a dating game.
Okay, this might just be my new favourite blog:
This site is dedicated to all aspects of movie and TV typography and iconography as it appears in Sci-Fi and fantasy movies.
The first post is all about 2001, and the writing is just the right shade of fun.
I’m already looking forward to future posts. (See what I did there?)
A nice little cheat sheet for simple simple typography wins.
There’s a lot of very opinionated advice here, and I don’t agree with all of it, but this is still a very handy resource that’s been lovingly crafted.
Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.
The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.
A wonderful essay about type on the web by Jessica.
Who knew? The reissue of the classic thirteen-part Star Wars radio series was the first appearance of a proto-Proxima Nova.
Jessica’s handy guide to writing the right quotes and accents on a Mac keyboard.
Vasilis examines the multitude of factors that could influence an ideal measure.
Some handy tips for starting off your responsive designs from the type out.
This is a pretty wacky experiment in altering font size based on the user’s distance from the screen (allow the page to access your camera and enable the “realtime” option for some real fun). I don’t know how much real-world application this has, but it’s a cute’n’fun exercise.
An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.
Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.
All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.
Jan V. White is a mensch.
A lovely new service from Mike Stenhouse: install the bookmarklet and then when you come across a website with a nice combination of fonts, you can save a snapshot of the page (and its fonts) for later perusal. You can then browse those fonts on Typekit, Fontdeck, MyFonts or Google Fonts.
A really nice piece on scale, ratio and rhythms in web design.
A fascinating look at what happens when you mash up beauty and ugliness in one typeface.
Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.
Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).
I don’t agree with everything in this presentation—there’s a nostalgic bias to the non-existent “good ol’ days”—but this is still very engaging and thought-provoking.
Trent shares his ideas on handling line lengths in fluid, responsive layouts.
An informative post on ligatures in web type from Elliot. And, oh yeah, he redesigned his site again (it’s unsurprisingly lovely).
An algorithmically-generated font sounds like a terrible idea but I actually quite like the end result.
Cute. I gave Dan some advice. He made it look all pretty.
Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.
Using em-based media queries to incrementally bump up the font size for larger viewports.
Some of these pay-what-you-want fonts are actually rather nice.
Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.
Emigre’s font library is now available as web fonts that you can self-host (providing you take some protective measures with .htaccess). That means Mrs. Eaves is available for the screen. W00t!
A good round-up of what web development means today …and what web developers need to do to keep pace.
Most of these are pretty over the top but they’re good proofs of concept.
Heaven Devoid of Stars – a tale of cross-browser kerning | Clagnut § Browsers · Typography · CSS techniques
Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.
A great article by guest author Ethan on the various approaches to sizing text in CSS.
A lovely new typeface from Nicole Dotin that’s available to purchase as a web font under the very reasonable terms of the Process license agreement.
An insight into Elliot’s current design process which highlights the advantages of designing in the browser when you take a content-first approach.
A set of default styles to get started on a mobile-first responsive design.
This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).
Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.
Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.
It’s also very, very informative. Watch this.
Samantha gives the rundown of a hands-on use of Style Tiles.
A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.
Finally. Hyphenation on the web.
Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now.
Jessica Hische has redesigned her site in a lovely and responsive manner.
A cute idea: see how signs (mostly in Brazil) would look if they were set in Helvetica.
A lovely little ode to the manicule.
What a great way to sell a book with “explorations” in the title—play around with the font size, leading, alignment (and browser window size).
A cute website that’s a call-to-arms against low-contrast text on the web.
A fascinating look at the intersection of typography and internationalisation on the BBC’s World Service site.
A swear word a day, typeset.
An incredibly detailed write-up of Ampersand.
Jon’s glowing write-up of Ampersand. Feel the love!
Excellent notes from Ampersand by Laura. Rather than describing each talk individually, she has documented the emergent themes.
Mark, Richard and Jon are writing a book together (on web typography, of course). It will undoubtedly be excellent.
A celebration of horrendous kerning all over the internet.
Getting the background on Ampersand from Richard is getting me very excited for the conference.
More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.
Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.
A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.
A beautiful glossary of typographic terms.
A handy bookmarklet that allows you to examine any piece of text on a website to determine what font it is set in.
This could be a handy: a client-side spellchecker. The dictionary files are a bit big of course—maybe local storage could help.