Tags: type



Tuesday, October 19th, 2021

Seb Lester’s Favorite Fonts

Seb picks his top ten typefaces inspired by calligraphy.

Tuesday, October 5th, 2021

Build a Better Mobile Input

This is such a handy tool for building forms! Choose different combinations of type, inputmode, and autocomplete attributes on input elements and see how that will be conveyed to users on iOS and Android devices.

Saturday, October 2nd, 2021

Tuesday, September 14th, 2021

Benjamin Parry~ Writing ~ Engineering a better design test ~ @benjaminparry

It sometimes feels like we end up testing the limitations of our tools rather than the content and design itself.

What Benjamin found—and I heartily agree—is that HTML prototypes give you the most bang for your buck:

At the point of preparing for usability testing, it seemed ludicrous to move to any prototyping material other than the one we were already building in. The bedrock of the web: HTML, CSS and Javascript.

Wednesday, August 18th, 2021

MD Nichrome by Mass-Driver

Marvin has some competition! Here’s another beautiful sci-fi variable font:

MD Nichrome is a display typeface based on the typography of paperback science fiction from the 70s and early 80s.

Tuesday, August 3rd, 2021

Hacks Are Fine / Matt Hogg FYI

If you employ a hack, don’t be so ashamed. Don’t be too proud, either. Above all, don’t be lazy—be certain and deliberate about why you’re using a hack.

I agree that hacks for prototyping are a-okay:

When it comes to prototypes, A/B tests, and confirming hypotheses about your product the best way to effectively deliver is actually by writing the fastest, shittiest code you can.

I’m not so sure about production code though.

Wednesday, June 23rd, 2021

Sans Bullshit Sans — Leveraging the synergy of ligatures

As part of my content buddying process, I am henceforth going to typeset all drafts in this font. I just tested it with this sentence:

We can leverage the synergy of a rich immersive user paradigm shift.

Sunday, June 6th, 2021

Wednesday, April 21st, 2021

PlymouthPress – A Letterpress Image Font

An experimental image font made using the University of Plymouth’s unique letterpress workshop.


The font is intended for display purposes only, and not is suitable for body text.

Tuesday, April 6th, 2021

Uppestcase and Lowestcase Letters: Advances in Derp Learning

A genuinely interesting (and droll) deep dive into derp learning …for typography!

Thursday, April 1st, 2021

Meet Utopia: Designing And Building With Fluid Type And Space Scales — Smashing Magazine

An excellent explainer from Trys and James of their supersmart Utopia approach:

Utopia encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.

Monday, March 8th, 2021

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).

Wednesday, March 3rd, 2021

Prototyping on the Clearleft podcast

The latest episode of the Clearleft podcast is live and it’s all about prototyping.

There’s a bit of a narrative thread in there about airplanes, kicked off by a great story Benjamin tells about testing a physical prototype …of the inside of a transatlantic airliner. Lorenzo recounts his story of mocking up a fake CMS with readily-available tools. And Trys tells of a progressive web app he whipped up for our friends at Suffolk Libraries. There’s even a bit about Hack Farm in there too.

But just to make sure it isn’t too much of a Clearleft love-in, I also interviewed an outside expert: Adekunle Oduye. It was very kind of him to give up his time, especially considering he had just moved house …in a pandemic!

There are some great words of wisdom, immortalised in the transcript:

Prototypical code isn’t production code. It’s quick and it’s often a little bit dirty and it’s not really fit for purpose in that final deliverable. But it’s also there to be inspiring and to gather a team and show that something is possible.


If you’re building something and you’re not really sure if it’s a right solution, use the word prototype versus design, because I feel like when people say design, that’s like the end result.


I always think of a prototype as a prop. It’s something to look at, something to prod. And ideally you’re trying to work out what works and what doesn’t.

— Benjamin

The whole episode is just over 21 minutes long. Have a listen and enjoy the stories.

If you like what you hear, please spread the word. Tell your Slack colleagues, your Twitter friends, your LinkedIn acquaintances. And if you’re not already subscribed, you can remedy that on Apple Podcasts, Google Podcasts, Spotify, Overcast and anywhere that accepts RSS.

Monday, March 1st, 2021

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.

Thursday, February 4th, 2021

Continuous Typography / MK

Sounds like some convergent thinking with the ideas behind Utopia.

I think that the idea that that any typographic attribute (including variable font parameters) can be a function (linear, exponential, stepped, Bezier, random, or otherwise) of any given input variable (user preference, screen dimensions, connection speed, time of day, display language, or whatever else) is an incredibly powerful one, and worth exploring as an aesthetic as well as a technical proposition.

Here’s a demo you can play with.

Tuesday, February 2nd, 2021


All of these graphic design books, magazines, and type specimens are available for perusal on the Internet Archive.

Monday, November 16th, 2020

CSS Stats

A handy tool for getting an overview of your site’s CSS:

CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control.

Tuesday, October 20th, 2020

Standards processing

I’ve been like a dog with a bone the way I’ve been pushing for a declarative option for the Web Share API in the shape of button type=“share”. It’s been an interesting window into the world of web standards.

The story so far…

That’s the situation currently. The general consensus seems to be that it’s probably too soon to be talking about implementation at this stage—the Web Share API itself is still pretty new—but gathering data to inform future work is good.

In planning for the next TPAC meeting (the big web standards gathering), Marcos summarised the situation like this:

Not blocking: but a proposal was made by @adactio to come up with a declarative solution, but at least two implementers have said that now is not the appropriate time to add such a thing to the spec (we need more implementation experience + and also to see how devs use the API) - but it would be great to see a proposal incubated at the WICG.

Now this where things can get a little confusing because it used to be that if you wanted to incubate a proposal, you’d have to do on Discourse, which is a steaming pile of crap that requires JavaScript in order to put text on a screen. But Šime pointed out that proposals can now be submitted on Github.

So that’s where I’ve submitted my proposal, linking through to the explainer document.

Like I said, I’m not expecting anything to happen anytime soon, but it would be really good to gather as much data as possible around existing usage of the Web Share API. If you’re using it, or you know anyone who’s using it, please, please, please take a moment to provide a quick description. And if you could help spread the word to get that issue in front of as many devs as possible, I’d be very grateful.

(Many thanks to everyone who’s already contributed to that issue—much appreciated!)

Thursday, October 15th, 2020

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!

Monday, October 5th, 2020

The reason for a share button type

If you’re at all interested in what I wrote about a declarative Web Share API—and its sequel, a polyfill for button type=”share”—then you might be interested in an explainer document I’ve put together.

It’s a useful exercise for me to enumerate the reasoning for button type=“share” in one place. If you have any feedback, feel free to fork it or create an issue.

The document is based on my initial blog posts and the discussion that followed in this issue on the repo for the Web Share API. In that thread I got some pushback from Marcos. There are three points he makes. I think that two of them lack merit, but the third one is actually spot on.

Here’s the first bit of pushback:

Apart from placing a button in the content, I’m not sure what the proposal offers over what (at least one) browser already provides? For instance, Safari UI already provides a share button by default on every page

But that is addressed in the explainer document for the Web Share API itself:

The browser UI may not always be available, e.g., when a web app has been installed as a standalone/fullscreen app.

That’s exactly what I wanted to address. Browser UI is not always available and as progressive web apps become more popular, authors will need to provide a way for users to share the current URL—something that previously was handled by browsers.

That use-case of sharing the current page leads nicely into the second bit of pushback:

The API is specialized… using it to share the same page is kinda pointless.

But again, the explainer document for the Web Share API directly contradicts this:

Sharing the page’s own URL (a very common case)…

Rather than being a difference of opinion, this is something that could be resolved with data. I’d really like to find out how people are currently using the Web Share API. How much of the current usage falls into the category of “share the current page”? I don’t know the best way to gather this data though. If you have any ideas, let me know. I’ve started an issue where you can share how you’re using the Web Share API. Or if you’re not using the Web Share API, but you know someone who is, please let them know.

Okay, so those first two bits of pushback directly contradict what’s in the explainer document for the Web Share API. The third bit of pushback is more philosophical and, I think, more interesting.

The Web Share API explainer document does a good job of explaining why a declarative solution is desirable:

The link can be placed declaratively on the page, with no need for a JavaScript click event handler.

That’s also my justification for having a declarative alternative: it would be easier for more people to use. I said:

At a fundamental level, declarative technologies have a lower barrier to entry than imperative technologies.

But Marcos wrote:

That’s demonstrably false and a common misconception: See OWL, XForms, SVG, or any XML+namespace spec. Even HTML is poorly understood, but it just happens to have extremely robust error recovery (giving the illusion of it being easy). However, that’s not a function of it being “declarative”.

He’s absolutely right.

It’s not so much that I want a declarative option—I want an option that has robust error recovery. After all, XML is a declarative language but its error handling is as strict as an imperative language like JavaScript: make one syntactical error and nothing works. XML has a brittle error-handling model by design. HTML and CSS have extremely robust error recovery by design. It’s that error-handling model that gives HTML and CSS their robustness.

I’ve been using the word “declarative” when I actually meant “robust in handling errors”.

I guess that when I’ve been talking about “a declarative solution”, I’ve been thinking in terms of the three languages parsed by browsers: HTML, CSS, and JavaScript. Two of those languages are declarative, and those two also happen to have much more forgiving error-handling than the third language. That’s the important part—the error handling—not the fact that they’re declarative.

I’ve been using “declarative” as a shorthand for “either HTML or CSS”, but really I should try to be more precise in my language. The word “declarative” covers a wide range of possible languages, and not all of them lower the barrier to entry. A declarative language with a brittle error-handling model is as daunting as an imperative language.

I should try to use a more descriptive word than “declarative” when I’m describing HTML or CSS. Resilient? Robust?

With that in mind, button type=“share” is worth pursuing. Yes, it’s a declarative option for using the Web Share API, but more important, it’s a robust option for using the Web Share API.

I invite you to read the explainer document for a share button type and I welcome your feedback …especially if you’re currently using the Web Share API!