Tags: font

248

sparkline

Thursday, September 8th, 2022

How To Improve Largest Contentful Paint for Faster Load Times - Calibre

A no-nonsense checklist of good performance advice from Karolina.

Sunday, June 19th, 2022

Backup

I’m standing on a huge stage in a giant hangar-like room already filled with at least a thousand people. More are arriving. I’m due to start speaking in a few minutes. But there’s a problem with my laptop. It connects to the external screen, then disconnects, then connects, then disconnects. The technicians are on the stage with me, quickly swapping out adaptors and cables as they try to figure out a fix.

This is a pretty standard stress dream for me. Except this wasn’t a dream. This was happening for real at the giant We Are Developers World Congress in Berlin last week.

In the run-up to the event, the organisers had sent out emails about providing my slide deck ahead of time so it could go on a shared machine. I understand why this makes life easier for the people running the event, but it can be a red flag for speakers. It’s never quite the same as presenting from your own laptop with its familiar layout of the presentation display in Keynote.

Fortunately the organisers also said that I could present from my own laptop if I wanted to so that’s what I opted for.

One week before the talk in Berlin I was in Amsterdam for CSS Day. During a break between talks I was catching up with Michelle. We ended up swapping conference horror stories around technical issues (prompted by some of our fellow speakers having issues with Keynote on the brand new M1 laptops).

Michelle told me about a situation where she was supposed to be presenting from her own laptop, but because of last-minute technical issues, all the talks were being transferred to a single computer via USB sticks.

“But the fonts!” I said. “Yes”, Michelle responded. Even though she had put the fonts on the USB stick, things got muddled in the rush. If you open the Keynote file before installing the fonts, Keynote will perform font substitution and then it’s too late. This is exactly what happened with Michelle’s code examples, messing them up.

“You know”, I said, “I was thinking about having a back-up version of my talks that’s made entirely out of images—export every slide as an image, then make a new deck by importing all those images.”

“I’ve done that”, said Michelle. “But there isn’t a quick way to do it.”

I was still thinking about our conversation when I was on the Eurostar train back to England. I had plenty of time to kill with spotty internet connectivity. And that huge Berlin event was less than a week away.

I opened up the Keynote file of the Berlin presentation. I selected File, Export to, Images.

Then I created a new blank deck ready for the painstaking work that Michelle had warned me about. I figured I’d have to drag in each image individually. The presentation had 89 slides.

But I thought it was worth trying a shortcut first. I selected all of the images in Finder. Then I dragged them over to the far left column in Keynote, the one that shows the thumbnails of all the slides.

It worked!

Each image was now its own slide. I selected all 89 slides and applied my standard transition: a one second dissolve.

That was pretty much it. I now had a version of my talk that had no fonts whatsoever.

If you’re going to try this, it works best if don’t have too many transitions within slides. Like, let’s say you’ve got three words that you introduce—by clicking—one by one. You could have one slide with all three words, each one with its own build effect. But the other option is to have three slides: each one like the previous slide but with one more word added. If you use that second technique, then the exporting and importing will work smoothly.

Oh, and if you have lots and lots of notes, you’ll have to manually copy them over. My notes tend to be fairly minimal—a few prompts and the occasional time check (notes that say “5 minutes” or “10 minutes” so I can guage how my pacing is going).

Back to that stage in Berlin. The clock is ticking. My laptop is misbehaving.

One of the other speakers who will be on later in the day was hoping to test his laptop too. It’s Håkon. His presentation includes in-browser demos that won’t work on a shared machine. But he doesn’t get a chance to test his laptop just yet—my little emergency has taken precedent.

“Luckily”, I tell him, “I’ve got a backup of my presentation that’s just images to avoid any font issues.” He points out the irony: we spent years battling against the practice of text-as-images on the web and now here we are using that technique once again.

My laptop continues to misbehave. It connects, it disconnects, connects, disconnects. We’re going to have to run the presentation from the house machine. I’m handed a USB stick. I put my images-only version of the talk on there. I’m handed a clicker (I can’t use my own clicker with the house machine). I’m quickly ushered backstage while the MC announces my talk, a few minutes behind schedule.

It works. It feels a little strange not being able to look at my own laptop, but the on-stage monitors have the presentation display including my notes. The unfamiliar clicker feels awkward but hopefully nobody notices. I deliver my talk and it seems to go over well.

I think I’ll be making image-only versions of all my talks from now on. Hopefully I won’t ever need them, but just knowing that the backup is there is reassuring.

Mind you, if you’re the kind of person who likes to fiddle with your slides right up until the moment of presenting, then this technique won’t be very useful for you. But for me, not being able to fiddle with my slides after a certain point is a feature, not a bug.

Tuesday, May 24th, 2022

What serif typeface would go well with Proxima Nova?

Mark Simonson goes into the details of his lovely new typeface Proxima Sera.

Saturday, May 7th, 2022

Roboto … But Make It Flex - Material Design

This version of Roboto from Font Bureau is a very variable font indeed.

Sunday, February 6th, 2022

Saturday, February 5th, 2022

Fonts or food?

At the end of every Thursday afternoon at Clearleft, we wrap up the working week with an all-hands (video) meeting. Yes, I know that the week finishes on Friday, but Fridays have been declared the no-meetings day at Clearleft: a chance to concentrate on heads-down work without interruption. Besides, some of us don’t work on Fridays. So Thursday really is the new Friday.

At this Thursday afternoon meeting we give and get updates on what’s been happening with project work, new business, events, marketing. We also highlighted any shout-outs that have posted in the #beingsplendid Slack channel during the week. Once that’s all taken care of, the Thursday afternoon meeting often finishes with a fun activity.

The hosting of the Thursday afternoon meeting is decided by fate. Two weeks ago, Rebecca and Chris hosted an excellent end-of-week meeting that finished with an activity around food—everyone had submitted their dream meal and we had to match up the meal to the person. Lorenzo, however, couldn’t help commenting on the typography in the slide deck. “Lorenzo”, I said, “What are you more judgmental about—fonts or food?”

The words were barely out of my mouth when I realised I had the perfect activity for the next Thursday afternoon meeting, which fate had decreed I was to host. I put together a quiz called …fonts or food!

It’s quite straightforward. There are 25 words. All you have to do is say whether it’s the name of a font or the name of a food.

It was good fun! So I thought I’d share it with you if you fancy a go.

Ready?

Here we go…

  1. Arrowroot
  2. Ensete
  3. Tahu
  4. Tako
  5. Lato
  6. Fira
  7. Adzuki
  8. Roselle
  9. Poke
  10. Plantin
  11. Dabberlocks
  12. Estampa
  13. Amaranth
  14. Gentium
  15. Challum
  16. Mayhaw
  17. Pawpaw
  18. Nopal
  19. Raksana
  20. Daylily
  21. Bilanthy
  22. Laver
  23. Orache
  24. Broadley
  25. Cardoon

Total: 0/25

Thursday, February 3rd, 2022

Thursday, December 30th, 2021

Manrope – free sans-serif variable font

This font is a crossover of different font types: it is semi-condensed, semi-rounded, semi-geometric, semi-din, semi-grotesque. It employs minimal stoke thickness variations and a semi-closed aperture.

Sunday, November 28th, 2021

My Custom CSS Reset

This CSS reset is pleasantly minimalist and a lot of thought has gone into each step. The bit about calculating line height is very intriguing!

Tuesday, October 19th, 2021

Seb Lester’s Favorite Fonts

Seb picks his top ten typefaces inspired by calligraphy.

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.

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.

Saturday, April 24th, 2021

CSS Font Lorem Ipsum

Professional web designer on a closed course. Do not attempt.

Wednesday, April 21st, 2021

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.

Tuesday, April 6th, 2021

Uppestcase and Lowestcase Letters: Advances in Derp Learning

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

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

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.

Friday, January 29th, 2021

How to avoid layout shifts caused by web fonts – Simon Hearne

A terrific in-depth look at improving the performance of web fonts.

Wednesday, December 2nd, 2020

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.