Drop #280 (2023-06-20): Typography Tuesday

Times New Bastard; Andada Pro; Modern Fluid Typography

The Drop decided to take Monday off for a few reasons. First, it was Juneteenth here in the former Colonies. Late last week I learned of an open access (i.e., free and unlimited digital access) Drop from Springer: The Palgrave Handbook of Global Slavery throughout History and decided a bit of personal [re-]education was in order.

This nigh 700-page tome provides a comparative and global analysis of the practice of slavery throughout history. The collection “aims to illuminate slavery that existed not only in the Americas but also in ancient, medieval, North and sub-Saharan African, Near Eastern, and Asian societies”.

The authors highlight the slave-trading routes that crisscrossed Africa, helped integrate the Mediterranean world, connected Indian Ocean societies, and fused the Atlantic world.

It's split into five parts and portrays the evolution of slavery from antiquity to the contemporary era; it also encourages readers to realize similarities and differences between various manifestations of slavery throughout history.

(The sections on 🇺🇸 slavery and modern slavery should be mandatory reading in all 🇺🇸 classrooms, but this book is likely on the banned TODO lists in many regions for being factual and honest.)

The second reason is that I kind of “froze” on Sunday

¹

at the thought of the fam taking me out for the 🇺🇸 version of Feðradaginn (we also had to celebrate #3's new job!). So, they opted to take the both of us to an open air eatery, which involved a bit of a driving trek.

So, we begin this four-day-week-proper with the regularly scheduled fan fav fontastic topic.

Also: I’m almost done editing the “double-wide Bonus Drop”…it’s taking me way longer than expected.

Times New Bastard

This cursed font (example use) (GH) was a demon spawn idea from Tumblr (a.k.a. one of the “what's old is new” places for those fleeing Reddit). It’s Times New Roman — well, a modified combo of Nimbus Roman No. 9 L and Nimbus Sans — but every seventh letter is jarringly sans serif.

You'll need ligatures enabled in any app/context that uses the font, and also some special CSS on the web:

font-feature-settings: "kern" on, "liga" on;
text-rendering: optimizeLegibility;

As explained on the demo site:

Technically, it's not actually Times New Roman, as you can't just switch the font in the middle of a Tweet or something. Instead, the original post and this script (ab)use the serif-styled letters from the Unicode Mathematical Alphanumeric Symbols block. This script just converts 6 out of 7 letters from being "normal" to their Mathematical Symbol version (which looks like Times New Roman).

Please note that text written like this is less accessible - not only does it require Unicode fonts (which are now very common, but still not universal), but it emits what are technically symbols, not letters. This means that screen readers can't read the text correctly. Please take this into account when using generated text. this means there is more than one reason you really shouldnt set an entire paragraph in [it].

It's GNU AGPL3, so take that into account if you further curse these already tortured glyphs. Oh, and as Cap’ would say… “Language!”.

Andada Pro

Andada Pro was designed by Carolina Giovagnoli for Huerta Tipográfica, a collaborative type foundry from Argentina founded in 2009 with a deep respect for design and typography. It was “was born from the relationship between language and typography. It is an organic-slab serif, hybrid style and medium contrast type for text. Initially it was designed to be used in a specific bilingual context, Spanish and Guaraní (pre-hispanic) languages therefore the language is its design criteria.”

Guaraní is one out of two official languages in Paraguay and is spoken in Bolivia as “mother tongue” by a part of the population. The Guaraní language (native name: Avañe'ẽ) has its roots in the Tupian language family.

While this super-cool font works in all Latin contexts, and is also tailor-made for Spanish text, the core purpose of the font was really made for the ~2.8 million people worldwide that use Guaraní as their primary language.

I was incredibly intrigued by Carolina's exposit:

The Guaraní language uses the latin system, it has a character named puso, which is an identifying sign for Guaraní, like the ñ in Spanish, the č in Czech or the ß in German. The correct sign to represent the puso is the saltillo (Saltillo uniA78B, saltillo uniA78C), but usually it’s replaced by an apostrophe because the saltillo does not appear in the spanish, english or portuguese keyboards layouts.

During these 10 years of work, I have looked for alternative solutions to improve the composition of text in guaraní, from the typographical and technical points of view.

There's even a corresponding Guaraní keyboard layout.

Ten years of thought, labor, and 💙 to ensure text accessibility and use for a tiny portion of our 🌎. Just incredible!

Modern Fluid Typography

Before you hit the resource's 'about' page: It has a geometric animation that forced me to put it into “reader mode” and also step away from the glowing rectangle for a few minutes. If certain types of geometric “illusions” or animations have similar effects on you, please steer clear of the 'about' page.

A bit of expository is in order before dropping the site link.

Fluid typography refers to typography that scales smoothly with the viewport size (i.e., text size scales smoothly between a set of minimum and maximum values as the viewport size changes). This responsive design technique can greatly enhance the user experience across almost all glowing rectangles.

However, when implementing fluid typography, it's super important to ensure the text remains legible and accessible to all users, including those with vision impairments. Here are a few things to consider if you choose to embark on this adventure:

• use a minimum text size: always ensure that the minimum text size is large enough to be read by users with visual impairments. The WCAG (Web Content Accessibility Guidelines) recommend a minimum text size of 16 pixels for body text.

• maintain contrast: even if the text size is large enough, it's essential that the text contrasts well with the background to ensure readability. The WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 point or 14 point bold).

• always also resize line length and spacing: as text size increases, you also need to consider line length and spacing. Lines of text that are too long can be difficult to read, and inadequate spacing can cause lines of text to blur together.

• maintain human control: Give readers the ability to adjust the text size themselves. This can be a critical feature for users with visual impairments.

• test; test; test: always test your design with real humans, including those with visual impairments. This will help ensure that your design is accessible to everyone.

With that said, it’s time to introduce Adrian Bece's Modern fluid typography editor (GH), a resource which helps you design fluid typography systems

²

for your web content. It relies heavily on the CSS clamp function. To “clamp” a value means to restrict a number between two other numbers. When a value is clamped, it will either:

• keep its original value if it falls within the specified range,

• take the lower value if it is initially lower than the range, or

• take the higher value if it is initially higher than the range.

The editor enables you to:

• adjust size constraints, rate, and relative size

• create a configuration that adapts to any root font size

• see a graphical overview of the final fluid values

• dig into a tabular view which keeps track of values on fixed screen width sizes

Ultimately, this is a “clamp()” explorer, since what you get back is a clamp CSS code snippet. Still, it's quite useful if you're willing to put the time to both experiment with values and keep the above bullets in mind.

FIN

While it may officially be Typography Tuesday on the Drop, there is nothing stopping you from also making it 🌮 Tuesday. ☮

1. I'm still “not great” when it comes to crowds of any kind — even outdoors — as a result of the lingering after effects of my spike protein invasion.

2. While I may not be Captain America, I am most certainly Captain Obvious.