Jan. 29, 2021, 11:51 a.m.

The Specimen Digest: 033 – From Presentational to Logical

Type Specimens

033 – Friday, 29th January 2021

From Presentational to Logical

Hello again! I’m Mark, and this is the Specimen Digest, a weekly typography newsletter.

I was very tempted to add the date of this newsletter as January 75th, 2021. How is it still only January? I feel like this every year but lockdown has made this so much worse. The never-ending grey; the rain; the wind. So let me try to bring you some typographic cheer today, the seventy fifth day of this eternal month.

The other thing I’d like to point your attention to is the last of my typographic links this week. RTL Styling 101 is a wonderful primer of considerations for designing interfaces for right to left languages. I’ve designed interfaces for a few over the years, and have to consider every language for my specimen builder project.

The things that always catch me out are interface element hierarchy and then micro-elements like form error notifications or little button contextual help. Stuff like that. It’s not enough to right align some text. It’s not enough to flip a whole layout. There is subtlety that is not apparent to a non-native speaker. Also, as someone who writes CSS and HTML, there is a switch of mental model with the introduction of CSS Logical Properties. It’s worth noting that browser support is mixed at the moment.

Let’s take the example of a simple button that you want to add some margin to. Normally, I’d do this with margin-top, bottom, left, and right. But this doesn’t help you when moving a component between ltr and rtf languages. Because left does not precede the content in a button anymore, but it follows it. This is where Logical Properties come in. Instead of margin-left, you would write ‘margin-inline-start’. This is the start of the button not the left.

There is a lot more to read in the article, but this particularly stuck out for me because it means applying logical meanings to the spaces in between user interface elements instead of presentational values. That’s quite a mental model shift.

Thanks for reading.

Mark


Specimens this week

Screenshot of MFred

MFred A solid looking specimen for a solid looking typeface from Buy Fonts Save Lives. Simple, designed panels in two colours precede some stacked type testers. All the basics, very well done.

Screenshot of Marionette

Marionette These single sheet specimens from Nick Sherman’s foundry, Hex, are very effective. Multiple stacked panels of justified paragraphs are reminiscent of old single sheet printer’s specimens.

Screenshot of Clarette

Clarette Striking, but a bit perplexing, use of photography in the specimen. But the design certainly paints a picture of inspiration and possible intended usage. However, I find myself wanting to see more web fonts rather than lots of stacked svgs.

Screenshot of BC Baseliner

BC Baseliner Ok, the specimen for this may be just one big svg but the design delivers on its purpose: to make you sit up and think ‘hmmm, that’s a cool typeface’. Sometimes that’s all it needs.

Screenshot of FIT

FIT FIT is a hyper-stylized series of caps designed with one thing in mind: filling up space with maximum impact. As a variable font with extremes of weights, from the super condensed, to the very, very wide, the specimen for FIT displays this perfectly. Stacked panels of text with anchor controls to stretch them. Brilliant.

There are more specimens added this last week on the Type Specimen website. You can subscribe to the RSS feed for daily updates, or follow along on Twitter, if that takes your fancy.

A few interesting typography links

A fantastic walk-through of the The Qandus multiscript typeface family from Laura Meseguer.

The Qandus multiscript font family is a modern typographic interpretation of the unique Maghribi calligraphic style as handwritten by the renowned Moroccan Sufi calligrapher of the nineteenth century‭, ‬al-Qandusi‭ (‬d‭. ‬1861‭ ‬CE‭).‬ ‬The typeface and its name‭, ‬Qandus‭, ‬are a homage to this calligrapher’s unique body of work and its graphic expressiveness‭. ‬The strong graphic language of the typeface design emphasizes and explores‭ ‬the variety and visual potential of the Maghribi Kufi styles‭, ‬from its simplest to its most expressive manifestations‭.

Some beautiful forms in the Arabic constructions in the Maghribi style. This type of work blows my mind.

What the variable font?. Great primer with some recent examples across the industry.

Designing for Right to Left languages in digital? RTL Styling 101 is such a good in-depth article on interface design considerations. Seriously good. Bookmark it.

You just read an issue of Type Specimens. You can also browse the full archives of this newsletter.