Tags: fonts

122

sparkline

Monday, January 9th, 2017

The Futures of Typography

A wonderfully thoughtful piece from Robin, ranging from the printing technologies of the 15th century right up to the latest web technologies. It’s got all my favourite things in there: typography, digital preservation, and service workers. Marvellous!

Wednesday, December 28th, 2016

Google Noto Fonts

Google’s Noto (short for no-tofu; tofu being the rectangle of unicode sadness) is certainly ambitious. It has glyphs from pretty much every known alphabet …including Ogham and Linear B!

Wednesday, December 14th, 2016

The typography of a web book

I’m a sucker for classic old-style serif typefaces: Caslon, Baskerville, Bembo, Garamond …I love ‘em. That’s probably why I’ve always found the typesetting in Edward Tufte’s books so appealing—he always uses a combination of Bembo for body copy and Gill Sans for headings.

Earlier this year I stumbled on a screen version of Bembo used for Tufte’s digital releases called ET Book. Best of all, it’s open source:

ET Book is a Bembo-like font for the computer designed by Dmitry Krasny, Bonnie Scranton, and Edward Tufte. It is free and open-source.

When I was styling Resilient Web Design, I knew that the choice of typeface would be one of the most important decisions I would make. Remembering that open source ET Book font, I plugged it in to see how it looked. I liked what I saw. I found it particularly appealing when it’s full black on full white at a nice big size (with lower contrast or sizes, it starts to get a bit fuzzy).

I love, love, love the old-style numerals of ET Book. But I was disappointed to see that ligatures didn’t seem to be coming through (even when I had enabled them in CSS). I mentioned this to Rich and of course he couldn’t resist doing a bit of typographic sleuthing. It turns out that the ligature glyphs are there in the source files but the files needed a little tweaking to enable them. Because the files are open source, Rich was able to tweak away to his heart’s content. I then took the tweaked open type files and ran them through Font Squirrel to generate WOFF and WOFF2 files. I’ve put them on Github.

For this book, I decided that the measure would be the priority. I settled on a measure of around 55 to 60 characters—about 10 or 11 words per line. I used a max-width of 27em combined with Mike’s brilliant fluid type technique to maintain a consistent measure.

It looks great on small-screen devices and tablets. On large screens, the font size starts to get really, really big. Personally, I like that. Lots of other people like it too. But some people really don’t like it. I should probably add a font-resizing widget for those who find the font size too shocking on luxuriously large screens. In the meantime, their only recourse is to fork the CSS to make their own version of the book with more familiar font sizes.

The visceral reaction a few people have expressed to the font size reminds me of the flak Jeffrey received when he redesigned his personal site a few years back:

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind.

I wonder how the people who complained then are feeling now, a few years on, in a world with Medium in it? Jeffrey’s redesign doesn’t look so extreme any more.

Resilient Web Design will be on the web for a very, very, very long time. I’m curious to see if its type size will still look shockingly large in years to come.

Saturday, December 10th, 2016

Accessibility Whack-A-Mole · An A List Apart Article

A fascinating piece by Eleanor on the typographic tweaking that the Wellcome team did to balance the competing needs of different users.

Monday, November 21st, 2016

Tentacular: Douglas Coupland on Helvetica, clip art and the gangly beast that is the internet

Douglas Coupland on web typography.

When I discuss the internet’s feel and its random rodeo of fonts, I think of the freedom, naivety, laziness, greed, cluelessness and skill I see there — it’s a cyberplace as wondrous as the bubbling cradle of pea-soup goo from which life emerged. The internet has a rawness, a Darwinian evolutionary texture. It’s a place where metrics totally unrelated to print typography dictate the look and feel.

Tuesday, November 1st, 2016

Web fonts, boy, I don’t know – Monica Dinculescu

Monica takes a look at the options out there for loading web fonts and settles on a smart asynchronous lazy-loading approach.

Wednesday, September 21st, 2016

The scorpion express | Butterick’s Practical Typography

This is easily the most wrong-headed piece of writing I’ve read in a long time.

“But cus­tomers ben­e­fit from smaller file sizes too, be­cause that makes web pages faster.” Cer­tainly, that was true in 1996. And some web de­vel­op­ers per­sist with po­lit­i­cal ob­jec­tions. But with to­day’s faster con­nec­tions—even on mo­bile—op­ti­miz­ing for file size is less use­ful than ever.

I’ll leave it to you to see the logical flaws in every one of the arguments presented here by Matthew Buterick. Meanwhile I’m going to get off his lawn.

Monday, September 19th, 2016

The Typekit Blog | Variable fonts, a new kind of font for flexible design

This is what Nick Sherman has been banging on about for years, and now the time has come for variable fonts …as long as typographers, browser makers, and standards bodies get behind it.

More details on Ev’s blog.

Monday, September 12th, 2016

Webfonts on the Prairie · An A List Apart Article

A good ol’ polemic in favour of using web fonts. It’s a good read although I strongly disagree with this line of reasoning:

The average internet speed in the United States today is three times as fast as it was in 2011.

But that americentric view is redeemed later on:

The World Wide Web may be a creation of the West, but now, at long last, it needs to get ready for the rest.

I may not agree with all the points in this article, but I think we can all agree that if we’re going to use web fonts, we must use them responsibly …otherwise users are going to treat them as damage and route around them.

Tuesday, September 6th, 2016

`font-display` for the Masses | CSS-Tricks

The font-display property is landing in browsers, and this is a great introduction to using it:

If you don’t know which option to use, then go with swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going with fallback or optional when using font-display.

Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:

if ("fontDisplay" in document.body.style === false) {
  /* JavaScript font loading logic goes here. */
}

Wednesday, July 27th, 2016

FontShop | The Fonts of Star Trek

Yves Peters examines the typography of Star Trek. Unlike Typeset In The Future, which looks at on-screen typography, this article dives into titles and promotional posters.

Tuesday, July 19th, 2016

A Comprehensive Guide to Font Loading Strategies—zachleat.com

A terrific rundown of all your options when it comes to web font loading.

Thursday, July 14th, 2016

Legibility App

A handy tool for testing the legibility of different typefaces under all sorts of conditions.

Tuesday, July 12th, 2016

ET Book · Edward Tufte on GitHub

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.

Thursday, July 7th, 2016

Typography Handbook

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.

Sunday, May 8th, 2016

Webfonts Last by Frederic Marx

Some smart thoughts on web fonts.

Friday, March 18th, 2016

Webfonts

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.

Monday, February 29th, 2016

The New Web Typography › Robin Rendle

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”:

  1. We must prioritise the text over the font, or semantics over style.
  2. We ought to use and/or make tools that reveal the consequences of typographic decisions.
  3. 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.

Sunday, January 10th, 2016

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

Friday, December 18th, 2015

Building the UX London website by Charlotte Jackson

Charlotte talks through some of the techniques she used when she was building the site for this year’s UX London, with a particular emphasis on improving perceived performance.