View profile

#68 • Miss, Drop That Cap

Coffee Table Typography
#68 • Miss, Drop That Cap
By Coffee Table Typography • Issue #68 • View online
Type friends! I’ve always had a soft spot for typefaces, and pizza. Which is probably why I also have had a soft spot for Pizza Typefaces ever since I knew about them; and now you can read a Q&A session with the founders on tdc. Including: why is it called Pizza Typefaces?
From Berlin Typography, here’s another typographical photo collection, this time, themed on the colour green.
In wildly different news, Ikea has released a font… made of couches. Aptly named Sofa Sans, I don’t know what else to write about it, really. It’s a font made of couches, and that’s really it.
A video that really got my attention this week came from Mattis Lind, using an old Lorenz Lo15 typewriter as an output for his Linux laptop. I know, dear reader, I have just as many questions as you do right now. The physicality of an otherwise abstract (and definitely paperless) electronic action is ever so enticing.
I recently stumbled upon the beautiful Sincerity/Irony Heldane specimen books that KlimType Foundry have been making and selling, and I am utterly in love. Here’s a sneak peek. The end result comes from a collaboration between Klim and NZ poet Hera Lindsay Bird. The result looks worthy of any bookshelf / word lover.
Also from KlimType Foundry, an interesting animation on how font’s ligatures / discretionary ligatures are broken on a couple of browsers. An interesting opportunity for you, reader, to visually understand how ligatures work in your browser.
GraphiteMaster published on Github a really interesting demo (with code and an article) on breaking the physical limits of fonts. Namely, how small can a font really go, and what’s the least amount of memory we can use to render text? A very technical but highly educational read, with a refresher on RGB space, too.
Enjoy the articles 🤞
—Ricardo M.

• Italics — Origins, History, Necessity
From Letters of the Temporary State, here’s an article entirely dedicated to… italics. An easily digestible historical essay, from the script to the slanted.
To start with, when should you really use italics anyway?
The Chicago Manual of Style (whose cover is set entirely in italic) prescribes the use of italic for emphasis, book and movie titles, names of music albums, paintings and ships, for foreign words or quotations of texts in foreign language, for references of a word, letter or number as itself, when introducing or defining technical terms, for algebraic symbols, physical quantities and mathematical constants.
However, for anyone outside of the Western languages spectrum, it’s easy to dismiss this idea of italics and the emphasis by slightly slanting a character. Italics have commonly been attributed to the books published by Aldus Manutius, circa 1500, and it was not meant as an alternative style to the normal character set, but as a replacement. Entire books would be set in italics — an imitation of the fancy calligraphic style. And so, the italic style became the hottest thing:
…and 500 years ago the fashion was no different — the new style gained immediate popularity and began to spread even despite the fact, that the Venetian Senate granted Aldus exclusive right to use the italics. Once the new style was introduced, counterfeited italics started to be massively produced and used all over Europe 
Different philosophies and arguments for the idea of highlighting important text began to emerge; from Marinetti’s “20 different typefaces” to Chicago’s “one italic”, stylistic ideas were aplenty.
As a curiosity, in the days of Latin as the international language of Europe often a different combination was used — Roman for Latin and blackletter for vernacular German:
Blackletter for German highlighting
Blackletter for German highlighting
So it is rather natural, that the designers of Bauhaus, coming from blackletter-dominant German typographic tradition, seem to be the first ones to start practicing italicless typesetting within modern Western typography. Their magazine, «Bauhaus» did not have any italics, but instead a variety of other techniques (rather similar to blackletter examples mentioned above) was applied:
There’s some interesting discussion in the article about the Bauhaus ‘ ideas on omitting italics, which I won’t cover in this short summary, but highly encourage you to read up.
Slanted vs true italics is a common form of type crime well known among typography lovers, so it’s worth discussing its origins.
Sans serifs have italics nowadays just as often as the serif typefaces, but for sans serifs often slanted (oblique) styles are used instead of true italics. It is hard to say who exactly was the first one to come up with the idea, that slanted (oblique) would be more befitting for the neutrality of Swiss Modernism, but it is well possible that the trend was set by the most successful modernist sans serif — Helvetica.
Fake italics looked ugly then, and they still do today.
A last note on the international styles for italic: have you thought about the number of writing systems in which italics make no sense? In fact, the vast majority. You can technically italicise Chinese text, for example, to which a computer will respond with slanting:
However, as you can imagine, this isn’t really something we should do. In the case of right-to-left writing systems (Arabic and Hebrew), this forced slant presents a curious question: in which direction should the text be slanted (considering that there is some reason to slant the text in the first place)?
And so, with Hebrew typefaces containing a form of italics, they’re typically tilted the other way around compared to Anglo-Saxon languages.
There’s so much more to unpack on italics, so if you’re curious, head over the original article.
• Drop Caps & Design Systems
Ethan Marcotte writes for Vox Media about one of the oldest and most beloved typographic detail in history: the drop caps. Loved in print, typically hated on the web, there’s a fair bit to say about drop caps. While this article is mostly technical (lots of CSS), there’s still a lot of good information about it.
What is a drop cap?
A drop cap is often used to signify that the reader’s moved into a significant new section, or that a new chapter’s begun. Drop caps are also incredibly old, appearing throughout the history of the printed page:  in illuminated monastic manuscriptsin renaissance cookbooks, and even in more contemporary texts.
Coming back quickly to those illuminated monastic manuscripts, here’s an incredibly detailed example:
In fact, they can even go more complex. Just look at this “P” letter, in the 1407 AD Latin Bible:
On the web, we use drop caps for similar reasons: both as a design accent, and as a visual cue to draw the reader’s eye toward an important piece of text. Unfortunately, the way text works on the Web has historically made this difficult to master, namely due to how different browsers treat the concept of line-height.
Ethan draws out attention to how Firefox, Chrome and Safari treat the alignment for drop caps: notice how the size of the boxes is fairly inconsistent:
Here’s the problem in a nutshell—and it’s technically two problems. First and foremost, the alignment of these drop caps isn’t consistent across these three browsers. In Firefox, we have a nice, tight box around the shape of our letter, which is the effect we’d really like to achieve. But unfortunately, Firefox is the outlier; while Chrome and Safari are sized consistently, their boxes are much, much taller than we’d like. And that’s the second bug.
Skipping some technicalities with CSS, here’s the true reason for this behaviour:
It wasn’t until I found a blog post by Vincent De Oliveira that I figured out how to adjust this issue. Vincent showed me that every glyph in a font—every letter, every number, every punctuation mark—is drawn on something called an “em square,” a box that acts as a coordinate plane upon which each character’s drawn. And this is the cause of the second issue: the em square defines the space that’s being reserved for our drop caps, and that’s what’s making them appear a little too tall.
There’s a huge concern about all this however, that even myself hadn’t considered up until now, despite having done accessibility engineering for the most part of the previous year for Shopify: VoiceOver, and how it reads drop caps to non sighted users.
“A VoiceOver read out will isolate the initial letter, and break the rest of the word.”
As it happens, that’s because of the markup we introduced to fix our drop caps: some assistive technology—like the VoiceOver screen reader on Macs—notices the markup around our initial letter, and interprets it as a separate word. That’s why “M!” is read aloud, followed by the rest of the word: “atthew.”
Ethan goes on describing how to manually fix the issue using aria attributes, something you’ll be familiar with if you’re a Web Developer. For the sake of brevity, I’ll leave this to your discretion to read within the article. For now, I’ll leave you with the conclusion of the article: they have chosen to drop the drop caps out of their styling, but mostly from a third-party styling maintenance standpoint.
For the rest of us, the main takeaway is probably a careful implementation of visual styling; one that, above all, plays nice with assistive technology. ♥️
• 5 Keys to Accessible Web Typography
Matej Latin, from BetterWebType, never disappoints every time he jolts a word down, and this article is no exception. It’s a long and thorough read, of which I’ll only summarise the main points, as per usual. For a more in-depth knowledge sourcing, check out the article in its entirety.
I love this article — as a big supporter of both type and accessibility for all, this is on point with everything any designer (or anyone who makes heavy use of text on the web for any sort of communication) should be aware of. Matej makes the case well:
I think it’s safe to claim that a large part of website accessibility falls on typography, after all, web still is 95% typography1. Viewers come to a website to read its content or just to find specific information they’re looking for. And most of that information and most of the content is communicated through text. […] This includes people with impaired vision, reading disorders, colour blindness or anything that can often prevent them from reading comfortably.
So what are his main 5 keys? Let’s begin.
Set your base font size in relative units
Why is it so important to set the base font size in relative units? I have to be honest, for a long time, I thought: what’s the point of setting the base font size to 100%? It usually just defaults to 16px anyway, so why not just set it to that? I later learned that it’s for one simple reason—the browser default font size.
This is huge, and here’s why:
Here’s the tricky part. Yes, most browsers agreed on the default size of 16 pixels, but the user can change that. Let’s say someone has an impaired vision and sets their browser’s default font size to something larger. Setting the base font size in our CSS to pixels will overwrite their browser default font size setting.
Check the colour of your type and only then its contrast
Checking the contrast of a text versus its background isn’t enough. A lot of web designers and developers just use a tool to check if the contrast of the two is high enough but it’s not that simple. We also need to make sure that the colour of our type is dark enough. This means that the font shouldn’t be too thin and that we should limit the font smoothing.
A good example is something known as type colour. While size and actual colour may look fine, the font itself may be too thin for display; and become rather illegible.
The paragraph on the left is set in a font that is much too light
The paragraph on the left is set in a font that is much too light
Something that also majorly affects type contrast is decisions on the Web concerting `-wekit-font-smoothing`, which makes text rendering switch from sub pixel to antialiased. This does, typically, make fonts display much lighter and smoother, but comes at a cost of legibility. Look at the two examples below: neither is a good option. The one on the right, with smoothing enabled, performs even worse.
Font smoothing on the right is too light
Font smoothing on the right is too light
Use highly legible fonts
Stylistic choices on the details of a typeface can directly affect its legibility, too.
Or at least don’t use the ones that have been known to have problems with legibility. But what makes the difference? What makes a font legible? First, let’s make it clear what legibility actually is. A lot of people confuse legibility with readability but the two are not the same. Legibility is about how easy it is to distinguish one letter from another and readability is about how easy a block of text is to read. 
A classic example is the “I” and “l” characters, which depending on the typeface, can be tricky to distinguish. Below we have “lil1” set in Helvetica, Ubuntu and Tisa Sans Pro:
Helvetica; not the best typeface for readibility
Helvetica; not the best typeface for readibility
There’s a couple of other really good tips, namely how to shape your paragraphs, in which Matej mentions a more thorough article of his own on the topic, overall line length, heading levels and some other Web-specific CSS tips. Keep reading.
• Designing A Font Based On Old Handwriting
Carolyn Porter wrote an incredibly thorough article for Smashing Magazine, all about the process of transforming old cursive handwriting into a fully working, modern digital typeface. Even if you’re not thinking about pulling off such a feat, the overall process is fantastic to read about. I’ll share just the main highlights, but do check out the rest of the article if you’re curious.
Designers create handwriting-based connected cursive fonts for a variety of reasons: to immortalize the loops and swirls of a loved one’s handwriting, to digitize the penmanship of a person or document of historic significance, or to transform charming handwriting into a creative asset that can be licensed.
You may want an historically accurate typeface conversion, or maybe, just a little inspiration is enough. One of the decisions you will need to make is whether you want to capture every nuance of your handwriting specimen, or if you want to design something inspired by that handwriting. It is like watching a movie “based on a true story” versus one “inspired by real events.
So you have all of your letters on paper, individually. Now what?
Create high-resolution bitmap images of all letters you plan to include in your font. I have always used a flatbed scanner to capture those images, but I have heard of people exporting sketches from Procreate or taking high-resolution photos on their phones. If you take a photo, be sure your phone is parallel to your specimen to avoid distortion.
Once you have assembled a collection of bitmap images, you will need to choose between vectorizing the letterforms using Adobe Illustrator’s Image Trace feature or importing the scans directly into font editing software then vectorizing them by hand.
What about the font files?
Popular font editing software options include FontLab Studio VI (Mac or Windows OS, $459), Glyphs (Mac OS, €249.90), Robofont (Mac OS, $490), Font Creator (Windows, $79–199), and Font Forge (free). There is also an extension for Illustrator and Photoshop CC called FontSelfwhich allows you to convert lettering into a font ($49–$98).
According to Carolyn,
No matter which glyphs you begin with, you will quickly want to establish standards for the axis, letter heights, alignment to baseline, and stroke widths. Ensure all glyphs meet those standards while simultaneously keeping in mind incorporating variability to achieve an organic look.
Original scan, original tracing, glyph outline and final M in P22
Original scan, original tracing, glyph outline and final M in P22
The end result is even better if you have the time to incorporate alternate glyphs as you go along; after all, cursive letters aren’t always the same when you make them by hand; more alternate glyphs always add up to higher variability in the way the font looks.
With guidelines, as the characters are put together
With guidelines, as the characters are put together
If this is something you can see yourself do, head over to the original article and get yourself a few more details.
Typeface Du Jour ✍️
Quinn Display, by Bold Monday
Quinn Display, by Bold Monday
Quinn Display — Bold Monday Foundry
A new release from Bold Monday, a Dutch foundry, has been making the rounds in the type community and for good measure: it’s such an elegant display serif. From the designers, Quinn Display is:
Quinn is a typeface for editorial design and publishing of all kinds. Although designer Diana Ovezea took cues from realist serif faces such as those of Johann Fleischmann, she imbued Quinn with enough personality to stand on its own in the modern age. The series consists of two optical sizes: Text in 10 styles for sizes between 6–24 points and Display in 14 styles for use above 24 points. This ample range facilitates complex typographic hierarchies and elaborate, varied layouts.
Get it at MyFonts or check their page directly.
On the Coffee Scene ☕️
Amman, Jordan: The Sprudge Coffee Guide
Patreon Supporters 🥰
As always, a massive thank you to every single one of you supporting this newsletter on Patreon. You make this newsletter going! Thank you to Rik Ward, Aceler Chua, Rachel Baker, Volmer Soares, Rafael Conde, Aleksandra Runowska, Chen Jing, Clay Gardner, David J. Ross, J.R., Gonçalo Morais, Jacqueline Jensen, Joël, Menges Design, Pedro Almeida, Qi Xi, Richard Littauer, Tzu Ching and Vitória Neves.
Did you enjoy this issue?
Coffee Table Typography

A love for words, letters, language—and coffee.
A digest of curated resources, articles and knowledge sharing about the beauty of typography; in design, on the web, or books.
You will read these over your morning cup of coffee, while the aromas of freshly ground beans are still in the air, quickly realising that words are beautiful and that you might need that second cup after all.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue
With 💙 from Montreal, Canada