Drop #267 (2023-05-23): Typography Tuesday

Climate Empathy Typography; Font Pairing Through Deep Learning; Google Fonts Tools

The previous “Typography Tuesday” was somewhat of a “hit” with y'all, so I shall heed the immortal words of George Jessel, and re-up said theme today.

An ever-increasing number of sites are using the system font stack to attain the coveted four hundos. This blandification of the web means that the deliberate use of a single, unique font or a striking font pairing can set your creations apart and even engender a profound emotional response for readers.

So, today, we'll look at the role “empathy” plays in a font choice, how to use fancy “AI” to carve out a font-niche for yourself, and highlight Google's own font curation tool and discuss why you might want to start working with it.

Climate Empathy Typography

For folks who are not “professional” designers, the choice of using a given font generally comes down to just pure aesthetic appeal. In the pro-am space, the seasoned typologist will likely have a more nuanced understanding of the cognitive impact of a given font on the reader/viewer.

I suspect a sizable percentage of Drop subscribers/readers are more on the “pro-am” side of the designer continuum. Leaning on said posit, I wonder how many of us have considered how a particular font choice can convey empathy for a given topic/situation.

The designers at Helsingin Sanomat (HS) — the largest subscription newspaper in Finland and the Nordic countries — certainly did when they created The Climate Crisis Font.

This weighted font series was crafted to help make climate change and its effects easier to grasp, and also help convey the urgency for climate action. The font’s weight varies according to the National Snow and Ice Data Center’s (NSIDC) data from 1979 to 2019 and continues with IPCC’s projection until 2050. In other words, every headline, comment, or article published in HS with the font will exemplify the real impact of climate change to the arctic sea ice extent.

I put together an Observable Notebook with the Climate Crisis webfonts JS folks can use, and R folks can use the fonts pretty easily (after installing them) via {ggtext} with some help from {systemfonts} (this code generated the section header image):

library(systemfonts)
library(ggtext)
library(ggplot2)

sysfonts <- systemfonts::system_fonts()
crisis <- sysfonts[grepl("ClimateCrisis", sysfonts$path),]
crisis <- crisis[order(crisis$weight),]

for (idx in seq_along(crisis$style)) {
  register_font(
    name = sprintf("Climate Crisis %s", crisis$style[idx]),
    plain = crisis$path[idx]
  )
}

ggplot() +
  geom_richtext(
    aes(
      1, 1:8, 
      label = sprintf(
        r"(<span style='font-family:"Climate Crisis %s";'>CLIMATE CHANGE</span>)", 
        crisis$style
      )
    ),
    fill = "black",
    size = 15, 
    vjust = 0.5,
    label.size = 0,
    color = "white"
  ) +
  scale_y_continuous(limits = c(0, 9)) +
  theme_void() +
  theme(
    panel.background = element_rect(fill = "black"),
    plot.background = element_rect(fill = "black")
  )

This font design is super clever, and I’m now on a mission to find more “empathetic” font examples for future issues.

Font Pairing Through Deep Learning

As we've noted in previous Drops, font pairing is an important aspect of design. Good font combinations tend to share some similarities while contrasting in key ways. Jack Qiao proposes using a multidimensional map to systematically find fonts that share similarities but contrast in critical features like weight, obliqueness, serifs, and width.

Machine learning techniques such as deep neural networks can be used to automatically extract these font features and create the map. This data-driven approach discovers the most significant features on its own and provides vectors representing each font that can guide font pairing.

Overall, the map serves as a guide to find unique and sometimes surprising relationships between fonts.

You can read more about the “how”, hit up the source repo, or just dive into the tool and have some fun picking new font combos.

Google Fonts Tools

Photo by Marcus dePaula on Unsplash

Google's gftools, also known as “Google Fonts Tools”, is a collection of tools used (primarily) for working with the Google Fonts collection. These tools are mostly intended for contributors to the Google Fonts project, but anyone who works with fonts could find them useful.

Core features include the ability to:

• package fonts from the Google Fonts repository for publishing on Google Fonts

• fix hinting issues in fonts

• parse the METADATA.pb file that contains information about Google Fonts

• manage and work with fonts in the Google Fonts project.

Now, I can already hear your “I don't work for Google or contribute to the Google Fonts project.” retort forming in your collective noggins. So, before clicking away, here are some reasons you might want to use the capabilities in these tools.

If you're working with multiple versions of a font or different fonts altogether, gftools provides an easy way to compare them. This can be especially useful for type designers or developers dealing with multiple font files.

There's also a “sanity check” feature that can be extremely useful to ensure that a font family directory is correctly set up. This can be used by font developers or designers to ensure that their work is up to standard.

If you're working with Google Fonts in your projects, having the ability to check a font family against the same family hosted on Google Fonts can be quite useful. This allows you to ensure consistency and compatibility with the fonts hosted on Google's servers.

Non-hinted fonts (more on what that is in a bit) can sometimes cause issues in rendering, especially at small sizes. gftools provides a way to fix non-hinted fonts, which can be useful for font designers and developers.

Finally, the glyph set definitions provided in the repository can be useful for type designers working on creating or modifying fonts. These definitions provide a clear guideline on what glyphs a comprehensive font should contain.

Now, about that “hinting”…

Font hinting, also known as “screen-optimizing” or “instructing”, is a technique used in creating or processing digital typefaces to improve their appearance on low-res devices such as computer monitors, e-ink screens, and printers (people still use printers?).

When fonts are scaled down to small sizes or displayed on low-resolution devices, the limitations of the device can cause the characters to become blurry, distorted, or hard to read. To remedy this, hinting provides, um, “hints” or instructions to the rendering engine about how to display the font so that it remains clear and legible.

For example, hinting instructions might specify that the vertical lines of a font should always fall on a pixel boundary, or that the font should be adjusted to prevent unsightly gaps or overlaps when displayed at small sizes.

Sure, most of us have super high-DPI glowing rectangles, which somewhat eliminates the need for hinting. However, plenty of internet-connected humans across the 🌍 work with lower resolution screens every day. So, taking the time to ensure a font you've chosen will be optimized for them is a kind gesture and also shows your attention to detail.

If you've never worked with any font tool, ever, then gftools is a nice, friendly way to start your new career as a digital typygrapher.

FIN

If you know of any other “empathetic” font examples, please feel encouraged to drop them in the comments. ☮