Drop #307 (2023-08-01): Typography Tuesday

Shakespeare Serif; The Fitzpatrick Scale; The Making Of Grafista

This edition is long enough that I shall refrain from waxing poetic in the intro. I will toss out that I’m super curious if anyone does get bitten by the urge to follow in the footsteps of the author of the resource in the first section.

TL;DR

This is an AI summary of the post. Today I used Llama-2-70b-chat.

NOTE: the output from this model required lots of editing for brevity, but it provided the results in the overall format you see below.

I also forgot to note the prompt I’ve been using across all these models (I’m very open to prompt engineering suggestions):

“I need 3 bullet points summarizing the content in the markdown-formatted blog post at the end of this prompt. The summaries should include the name and link of the primary resource in the section.”

  • Shakespeare Serif

  • The Fitzpatrick Scale

    • A system — developed in 1975 by Dr. Thomas Fitzpatrick —for classifying skin types according to the amount of pigment the skin has and its reaction to sun exposure., a Harvard University dermatologist. The scale has been influential in the development of emojis, particularly in terms of skin tone representation.

    • Primary resource: https://en.wikipedia.org/wiki/Fitzpatrick_scale

  • The Making Of Grafista


Shakespeare Serif

Shakespeare Serif is an experimental font inspired by the First Folio, a collection of William Shakespeare’s plays published in 1623. The creator of this font, Terence Eden, was inspired by a blog post about using 17th-century Dutch fonts on the web and decided to build a font based on Shakespeare’s First Folio as a template.

The First Folio is a significant historical artifact, as it contains the original print of William Shakespeare’s plays, titled “Mr. William Shakespeares Comedies, Histories, & Tragedies”. Before embarking on the project, Eden discovered David Pustansky’s First Folio Font, which is based on the 1623 folio. However, Pustansky’s font is missing brackets, some punctuation marks, ligatures, and has the long “s” in the wrong place.

To create Shakespeare Serif, Terence used high-resolution scans of the First Folio from The Bodleian Library. He selected a few pages at random to analyze the characters and typography. It is important to note that a modern font cannot fully replicate the intricacies of hot metal printing, which was used in the original First Folio.

The author walks you through the entire process with helpful commentary, oddly useful Python code, and pointers of how to work in Font Forge. It’s an easy read that will likely inspire more than a few Drop readers to try their hand at a similar reproduction.

The Fitzpatrick Scale

Back in my day we had emoticons, e.g., :-), and we liked them. Now you crazy kids have these fancy emojis you can use whilst eating your avocado toast (only after posting a well-lighted influencer pick of it on IG).

Fun fact! Emojis originated in Japan in the late 1990s and gained widespread popularity with the introduction of smartphones and mobile messaging apps. The first set of emojis was created by Shigetaka Kurita, who was working for the Japanese telecommunications company NTT DoCoMo. These early emojis were simple 12×12 pixel images and featured a range of basic symbols and icons representing emotions, weather, food, and other common concepts. The word “emoji” itself comes from the Japanese words “e” (絵), meaning “picture,” and “moji” (文字), meaning “character.”

In 2010, the Unicode Consortium, the organization responsible for standardizing and encoding characters across different platforms and devices, officially recognized emojis and included them in the Unicode Standard. This made it possible for different operating systems and devices to display emojis consistently.

“Um…hrbrmstr? You titled this section ‘The Fitzpatrick Scale’ but have just ranted for three paragraphs on emojis, and this is supposed to be ‘Typography Tuesday’. Are you feeling OK?”

Patience! We’re getting to the good stuff.

Emojis are not traditionally considered typographical elements in the strictest sense. Typographical elements primarily refer to the design and arrangement of text, such as fonts, typefaces, sizes, spacing, and formatting. Emojis, on the other hand, are pictorial symbols used in digital communication to represent various objects, emotions, or concepts.

To re-use a phrase from that previous ❡: In the strictest sense, typographical elements specifically refer to characters that are used for formatting and organizing text, such as letters, numbers, punctuation marks, diacritical marks, and typographic symbols like quotation marks, dashes, or ellipses. These characters are designed to convey meaning, structure, and visual presentation within written text.

While typographical elements are an important subset of Unicode characters, the Unicode Standard goes beyond typography to include a vast array of symbols and characters that serve different purposes. This includes emojis 🙃, musical notation ♮, currency symbols €, arrows ⤵, mathematical operators ∫, technical symbols 🌡, and many more. They’re even diverse and handy enough to be stolen by billionaires 𝕏.

In some cases, emojis have been designed with the same level of consideration as typefaces, and they can be assigned Unicode values, similar to characters in a font. And, we all have likely seen how emojis differ across platforms and, even, apps (a sampling of that is in the section header).

All of this, IMO, lends further credence to a controversial assertion of mine that emoji are, indeed, proper elements of typography, and why I’ve dedicated a section to this explanation and the forthcoming sub-topic.

“*COUGH* Did, um, you forget about this ‘scale’ thing?”

Never! We needed some foundational history to work from.

The Fitzpatrick Skin Phototype Classification (FSPC) was developed in 1975 by Dr. Thomas Fitzpatrick, a Harvard University dermatologist. This system classifies skin types according to the amount of pigment the skin has and its reaction to sun exposure. The scale was initially developed to measure the correct dose of UVA for PUVA therapy, and was later extended to a wider range of skin types. Today, the Fitzpatrick scale is used by dermatologists, skincare professionals, and researchers to assess skin phototypes, determine the risk of developing skin cancer, and evaluate the effectiveness of skincare products and treatments.

The FSPC has been influential in the development of emojis, particularly in terms of skin tone representation. Unicode introduced skin tone modifiers in 2015, and the Unicode standards for emojis generally follow the Fitzpatrick Scale when it comes to representing people and their skin tones.

Emoji characters can be modified to use one of five different skin tone modifiers, each based on the Fitzpatrick Scale. An Emoji Modifier Sequence is created automatically when a modifier character is inserted after a supported base emoji character, resulting in a single emoji with a specific skin tone.

You’ve all seen the popup in any modern emoji picker, which lets you choose from FSPC tones. For example:

  • 👋🏻 (Type I-II: Light skin tone)

  • 👋🏼 (Type III: Medium-light skin tone)

  • 👋🏽 (Type IV: Medium skin tone)

  • 👋🏾 (Type V: Medium-dark skin tone)

  • 👋🏿 (Type VI: Dark skin tone)

The introduction of skin tone modifiers in emojis aimed to improve diversity and inclusivity in digital comms. However, this move has also opened up a complex conversation around identity and digital self-expression. Some folks may feel uncertain about which skin tone emoji to use, as it can be influenced by personal identity, cultural context, and platform-specific graphics.

Like most things developed in isolated, vanilla, homogeneous environments, the original version of the FSPC scale did not contain classifications for darker skin tones and was considered “Anglo-Irish centric”. Types V and VI were added later, but the scale still may not accurately account for the skin color ranges of people with darker skin tones.

So, the next time you’re prompted to pick a tone, you’re now armed with the reason that came about; and, also, with the surety that you’re making as deliberate of a design choice as you are in the typeface or kerning adjustments you’re using in any given context.

The Making Of Grafista

This is a pretty long Drop, so I’m going to provide a brief introduction to this last resource and leave you in the most capable hands of its author, Fábio Duarte Martins.

Making Grafista” provides an insightful look into the creation of a unique typeface that challenges traditional notions of what a typeface is for. By combining a text typeface with a texture library, Grafista offers designers a versatile tool for creating visually engaging compositions.

Grafista’s unique feature is its combination of a text typeface and a texture library (see section header image), enabling us to create visually interesting compositions by mixing text and textures in the same text box. This innovative approach to typeface design challenges the conventional understanding of typefaces and encourages us to explore new ways of using type in our designs.

Fábio’s invites readers to grab a copy of Grafista and share their creations with the author, fostering a sense of community and collaboration among designers.

(FWIW: Grafista’s working pretty well as a terminal font.)

FIN

While making this edition, I kept thinking of how much more difficult it would have been to make “Shakespeare Serif” even just a few years ago. For all the harms it has caused, modern tech is pretty remarkable. ☮

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.