A deep dive into Pixar’s sci-fi masterpiece, featuring entertaining detours to communist propaganda and Disney theme parks.
Thursday, December 6th, 2018
Saturday, November 10th, 2018
Some advice from Andy on creating a dark theme for your website. It’s not just about the colours—there are typography implications too.
Saturday, October 6th, 2018
An nth-letter selector in CSS
Variable fonts are a very exciting and powerful new addition to the toolbox of web design. They was very much at the centre of discussion at this year’s Ampersand conference.
A lot of the demonstrations of the power of variable fonts are showing how it can be used to make letter-by-letter adjustments. The Ampersand website itself does this with the logo. See also: the brilliant demos by Mandy. It’s getting to the point where logotypes can be sculpted and adjusted just-so using CSS and raw text—no images required.
I find this to be thrilling, but there’s a fly in the ointment. In order to style something in CSS, you need a selector to target it. If you’re going to style individual letters, you need to wrap each one in an HTML element so that you can then select it in CSS.
For the Ampersand logo, we had to wrap each letter in a
But if the whole point of using HTML is that the content is accessible, copyable, and pastable, isn’t a bit of a shame that we then compromise the markup—and the accessibility—by wrapping individual letters in presentational tags?
What if there were an
::nth-letter selector in CSS?
There’s some prior art here. We’ve already got
::first-letter (and now the
initial-letter property or whatever it ends up being called). If we can target the first letter in a piece of text, why not the second, or third, or nth?
It raises some questions. What constitutes a letter? Would it be better if we talked about
::nth-character, and so on?
Even then, there are some tricksy things to figure out. What’s the third character in this piece of markup?
Is it “C”, becuase that’s the third character regardless of nesting? Or is it “E”, becuase techically that’s the third character token that’s a direct child of the parent element?
I imagine that implementing
::nth-character) would be quite complex so there would probably be very little appetite for it from browser makers. But it doesn’t seem as problematic as some selectors we’ve already got.
Think about it. The browser has to first calculate how many characters are in the first line of an element (like, say, a paragraph). Having figured that out, the browser can then apply the styles declared in the
::first-line selector. But those styles may involve font sizing updates that changes the number of characters in the first line. Paradox!
(Technically, only a subset of CSS of properties can be applied to
::first-line, but that subset includes
font-size so the paradox remains.)
I checked to see if
::first-line was included in one of my favourite documents: Incomplete List of Mistakes in the Design of CSS. It isn’t.
So compared to the logic-bending paradoxes of
::nth-letter selector would be relatively straightforward. But that in itself isn’t a good enough reason for it to exist. As the CSS Working Group FAQs say:
The fact that we’ve made one mistake isn’t an argument for repeating the mistake.
Now, I know that browser makers would like us to figure out how proposed CSS features should work by polyfilling a solution with Houdini. But would that work for a selector? I don’t know much about Houdini so I asked Una. She pointed me to a proposal by Greg and Tab for a full-on parser in Houdini. But that’s a loooong way off. Until then, we must petition our case to the browser gods.
This is not a new suggestion.
While I’m talking about CSS, I would also like to have
::nth-word(n), any thoughts?
Of all of these “new” selectors,
::nth-letteris likely the most useful.
In 2012, Bram linked to a blog post (now unavailable) from Adobe indicating that they were working on
::nth-letter for Webkit. That was the last anyone’s seen of this elusive pseudo-element.
In 2013, Chris (again) included
::nth-letter in his wishlist for CSS. So say we all.
Friday, September 28th, 2018
Tuesday, September 11th, 2018
A font made of corporate logos.
Thursday, August 30th, 2018
font-feature-settings value demonstrated in one single page.
Tuesday, August 21st, 2018
The history and restoratin of a neglected typeface, complete with this great explanation of optical sizing:
Nix illustrated the point with an analogy: “Imagine if we all decided that 10-year-old boys would be the optimal human form,” he says. “Rather than having babies, we just shrunk 10-year-old boys to baby size, and enlarge them to the size of a full grown man. That’s kind of what we’re combatting.”
Friday, August 10th, 2018
Over on A List Apart, you can read the first chapter from Tim’s new book, Flexible Typesetting.
I was lucky enough to get an advance preview copy and this book is ticking all my boxes. I mean, I knew I would love all the type nerdery in the book, but there’s a bigger picture too. In chapter two, Tim makes this provacative statement:
Typography is now optional. That means it’s okay for people to opt out.
That’s an uncomfortable truth for designers and developers, but it gets to the heart of what makes the web so great:
Of course typography is valuable. Typography may now be optional, but that doesn’t mean it’s worthless. Typographic choices contribute to a text’s meaning. But on the web, text itself (including its structural markup) matters most, and presentational instructions like typography take a back seat. Text loads first; typography comes later. Readers are free to ignore typographic suggestions, and often prefer to. Services like Instapaper, Pocket, and Safari’s Reader View are popular partly because readers like their text the way they like it.
What Tim describes there isn’t a cause for frustration or despair—it’s a cause for celebration. When we try to treat the web as a fixed medium where we can dictate the terms that people must abide by, we’re doing them (and the web) a disservice. Instead of treating web design as a pre-made contract drawn up by the designer and presented to the user as a fait accompli, it is more materially honest to treat web design as a conversation between designer and user. Both parties should have a say.
Or as Tim so perfectly puts it in Flexible Typesetting:
Readers are typographers, too.
Monday, July 23rd, 2018
Typography meets astronomy in 16th century books like the Astronomicum Caesareum.
It is arguably the most typographically impressive scientific manual of the sixteenth century. Owen Gingerich claimed it, “the most spectacular contribution of the book-maker’s art to sixteenth-century science.”
Friday, July 20th, 2018
This is a great interview with Rich on all things related to web typography—including, of course, variable fonts.
I’m so lucky that I literally get to work side by side with Rich; I get to geek out with him about font stuff all the time.
Tuesday, July 17th, 2018
A fun way to play around with the options in variable fonts.
Friday, July 6th, 2018
This is very neat! Test out how Google Fonts will look on your website: type in your URL and away you go. Works well on mobile too.
Monday, July 2nd, 2018
Sunday, July 1st, 2018
Tuesday, June 26th, 2018
I have to admit, I didn’t realise that text reszing behaved differently for user preferences compared to page zoom. For that reason alone, I’m going to avoid setting font sizes in pixels.
If 2 to 3% (or more!) of your users are relying on a custom font size, you should know that so you can either support that user preference or make a conscious decision to not support it. Doing anything less is frankly irresponsible, especially considering that users with larger font sizes may be using those sizes to compensate for visual disabilities.
Monday, June 11th, 2018
Friday, June 8th, 2018
A nice intro to variable fonts.
Saturday, May 12th, 2018
Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.
Thursday, May 3rd, 2018