BACK TO TOP

Modern Blackletter-inspired Fonts and Their Use in Web Design

Modern Blackletter-inspired Fonts and Their Use in Web Design

Typography is an essential component of design. In fact, it’s often the key element that gives a specific project its unique character. So it makes sense that, throughout history, certain typefaces have become more popular and beloved than others. Among these is the Gothic script, a.k.a. blackletter.

Blackletter is a term that applies to a collection of fonts first used in The Gutenberg Bible in the 15th century. These typefaces are strongly rooted in calligraphy scripts and are known for combining thick and thin strokes and swirly serifs. They became widely used by the scholars of the time who wrote religious texts and various types of academic books.

Blackletter typefaces are imbued with history and carry a strong emotional value, so their evergreen status and widespread use in all mediums come as no surprise. In this article, we will walk you through a selection of free and premium modern blackletter-inspired fonts and share some compelling examples of their use in contemporary web design. The typefaces we will introduce you to include:

Blackletter Families

From the 15th century onwards, numerous blackletter typefaces have appeared. And while it would be downright impossible to name them all individually, we can differentiate four large blackletter font families – Textura, Rotunda, Schwabacher, and Fraktur. So before we start talking about modern-day examples of blackletter-inspired fonts, let’s learn more about each of these families.

Textura

Textura

Textura, or textualis, is the most calligraphic family of the four, and also the most recognizable one. When we think of the gothic typographic style, this is usually what most of us have in mind.

Textura was predominantly used in Western Europe, in particular for books and texts of great importance. Some of its most obvious characteristics are narrow and tall letters, sharp type lines that ensure there’s no connection between the letters (this is especially prominent in cursive lettering), as well as the use of minims (short, vertical strokes) which made the “i”, “u”, “n”, and “m” letters look alike. The lowercase letter “s” was often written with a line connecting the opposite ends of the letter so it resembled the number 8.

Textura

Rotunda

Rotunda

Rotunda is a medieval blackletter script heavily influenced by the Carolingian minuscule, a popular font created around the year 800 to replace the hardly-readable letters of the Roman alphabet. However, Carolingian minuscule evolved, went from simple to intricate, and ended up becoming a blackletter.

Rotunda is considered by many a type in its own right. It was heavily popular in the southern parts of Europe, especially in Italy. The Italian rotunda is known for having less rigid letters than other blackletter families and for its unique scribal abbreviations. For instance, if the letter “q” had a line beneath the bow it signified the sound “qui”. Moreover, the letter “s” was spelled as “x”. One of the main separating points between rotunda and other scripts from this family is that in some letters, such as “d”, the bows are broken.

Rotunda

Schwabacher

Schwabacher

Schwabacher evolved from Textura and was influenced by the Italian Humanist type designs from the 15th century. This was the most popular blackletter-type in Germany at the time. In other parts of Europe, Shwabacher was known as Bastarda. This family is more cursive than any other, but some of its letters look very rigid. For instance, there is a horizontal stroke at the top of the letter “g” that forms a cross with the two downward strokes. Moreover, the capital “H” is written in such a peculiar way that it looks almost unrecognizable. The Schwabacher type first appeared in the “Apocalypse” series from Albercht Durer and the Luther Bibles from 1522.

Schwabacher

Fraktur

Fraktur

Fraktur is probably the most widespread and popular of all blackletter styles. It was developed at the very start of the 16th century and used throughout the following centuries. Its name comes from the broken (i.e. fractured), angular-looking letter strokes. For example, if you take a look at Fraktur’s letter “o”, you can see how the left part of the bow is broken while the right one is not. This characteristic helps set Fraktur apart from other blackletter families.

Fraktur

From the moment it was created, Fraktur became the most popular blackletter script, quickly overshadowing Schwabacher and Textualis. It was used in the German-speaking world and all areas under German influence. In the 19th century, its popularity faltered and Fraktur was largely replaced by the Antiqua typeface. But German newspapers and belletristic literature publishers continued to use it. During World War II, the font was presented as the true German script and it was used by the Nazis on all official documents and letterheads. Later on, Germans banned Fruktur from being used and began favoring more modern scripts.

Now that we’ve covered the most important facts about the most significant blackletter families, it’s time we introduced you to some modern-day fonts inspired by these timeless scripts.

Top Themes for Creatives
Manon WordPress Theme
Manon

Portfolio & Agency Theme

Zermatt banner
Zermatt

Multi-concept Agency Theme

Cinerama WordPress Theme
Cinerama

A Theme for Movie Studios and Filmmakers

HK Kontrast

HK Kontrast is a serif typeface suitable for large-sized texts, such as headlines and titles. Most other blackletter-inspired typefaces are known for their contrasting thick and thin strokes, but this font doesn’t use thin strokes at all. Even without the prominent blackletter features, HK Kontrast’s gothic roots are undisputable. You can download it from Hanken’s website for $10, but before you purchase it, make sure to read the license carefully.

HK Kontrast

Our design team has used HK Kontrast on the Galatia theme, which exemplifies the symbiosis of contemporary design trends and gothic influences. The font added an attractive edge to the theme’s overall design and enhanced its visual appeal.

HK Kontrast

Roslindale

Roslindale is a serif typeface rooted in 19th-century blackletter foundries. It represents a mixture of gothic elements with a victorian-esque vibe and old-style typography with contemporary design tendencies. The font comes in many different styles and you can find them all on David Jonathan Ross’ (Roslindale’s designer) website.

Roslindale

To see this font in action, take a look at Chiara Luzzana’s typography-based website. Roslindale takes the center stage and grabs your attention from the get-go. Luzzana is a sound designer, and the minimalist design of her site, the accompanying background sounds, and prominent textual content put her expertise in the foreground.

Roslindale

Woodland

Woodland is a serif, versatile font that comes in 6 different weights. It is a highly-detailed typeface that reflects the evolution of blackletters. The details that set it apart from other blackletter-inspired fonts are strong, squared serifs, the rounded crossbar on the lowercase “e”, and the high-contrasting double-story lowercase “g”. Woodland looks fluid no matter the weight. It is also characterized by elegant ligatures and curvy alternates, resembling Italian blackletters. This typeface was designed by the Pangram Pangram foundry and can be bought on their products page.

Woodland

Amanda Braga has used this font to share her story and experience with her audience. Her “About” page is filled with large chunks of text that are easy to read because of the attractive pairing of the Woodland font and interesting slide-in effects.

Woodland

Sainte Colombe

Sainte Colombe is one of the most expressive typefaces on this list because of its contrasting, dramatic looks. This font was inspired by music, which shows in the details. The most obvious one is the italic lowercase letter “g” that resembles a flat note sign. While Sainte Colombe may be inspired by antique fonts, its contrasting thick and thin strokes and numerous font weights make it a true blackletter typeface. If you wish to purchase this font, head over to the Production Type’s website, and choose the package that best suits your requirements.

In case you wish to see how Sainte Colombe looks in use, Sophie Doukhopelnikoff’s website is a great place to start. The font is elegant, sleek, and it wonderfully complements the minimal vibe of her portfolio website.

Sainte Colombe

FS Kim

FS Kim is a contemporary font deeply rooted in calligraphy. It has short-wedge serifs, with lots of bold details. At first glance, this font may appear soft because of its round elements, but once you take a closer look, you’ll notice that it looks quite sharp and rugged. Because of its proportions and narrow spacing, the desktop version of FS Kim works great as a display font. The letters in the text version look much wider and have longer serifs, but the bold appeal typical of this typeface is still apparent. The font is available in several weights and font families, but for a true blackletter vibe, go with the “Black” style. And if you’d like to use FS Kim for your projects, visit the Font Smith’s site to buy it.

FS Kim

Studio Gusto’s headlines and title look pleasing on the eye and are fun to read thanks to the FS Kim typeface (they’ve used the trial version of the typeface on this site). This font perfectly matches the purpose of their website, which showcases some of the most memorable movies selected by this studio.

FS Kim

Cirka

Cirka is an elegant, eye-pleasing typeface that playfully combines sharp and round strokes with pointed serifs. The sharpness of the elements makes this font look like a true blackletter. Its gothic roots are particularly prominent when you select the bold font-weight. And even though Cirka has only 4 weights, you can create a variety of different-looking texts simply by modifying the letter spacing. It looks best in headlines and titles, but it works just as well in smaller body texts. You can purchase Cirka from Pangram Pangram’s website.

Cirka

The makers of the At Home website have used Cirka in all the prominent sections of their website (e.g. for menu item titles and to introduce the members of their team). They’ve opted for all caps, which undoubtedly helps capture users’ attention.

Cirka

Meno

Meno is an elegant serif typeface family designed in 1994. It initially had seven styles which eventually turned into a whopping 78 varieties. The roman letters are inspired by the French baroque scripts, while italics mirror the impact of the Dutch 17th-century foundries. The Meno font family comes in three prominent sizes including Text, Display, and Banner. Each size includes the italic version of the font. No matter which of the three you choose, the blackletter influence is evident in the letterforms, their bold appearance, and pointed serifs. The Meno fonts can look both elegant and stern, depending on the project you use them for. If you purchase the Adobe Creative Cloud license, you’ll be able to download all three Meno font families for free.

Meno

Admita store has incorporated the Meno typeface in their hidden menu and in their headlines. This striking font gives their site an interesting edge that contrasts other, more demure sans-serif typography, and helps introduce their brand in an eye-catching way.

Meno

GT Sectra Display Bold

GT Sectra Display is one of the three subfamilies of the GT Sectra typeface, and its bold version simply emanates the gothic vibe. GT Sectra is a contemporary-looking font with a clear calligraphic influence. The letters are composed of broad strokes and contrasting paper-thin lines that connect them. This type includes both lining and old-style figures. GT Sectra Display and other subfamilies all come in 5 different weights and include the italic version, which gives you a lot of room for experimentation. No matter which style you opt for, you will undoubtedly achieve a striking, blackletter-inspired look, but the Display Bold version will probably leave the strongest impression on users. If GT Sectra sounds like your cup of tea, go ahead and buy the font on the Grilli Type’s page.

GT Spectra Display Bold

Virages’ website illustrates all the attractiveness of the GT Sectra Display Bold font. The typeface is used in headlines and the menu to immediately draw users in. It also beautifully contrasts the sans-serif font used in the body text.

GT Spectra Display Bold

Le Murmure

Le Murmure is a head-turning sans-serif font with an editorial feel. The lack of serifs makes it well-readable and therefore suitable for headings. This is an open-source kind of typeface, meaning you can find countless versions of it online. The influence of the Textura blackletter family shows in the way the letter “s” curves, resembling the number “8”, while the Fraktur-esque vibe shines through all the broken strokes of the letter “a”. The font is available on Velvetyn’s website where you can download it for free (for personal and commercial use).

Le Murmure

The 100 Days of Poetry website doesn’t include a lot of text. In fact, there’s only the name of the project written multiple times across the entire screen. The designers have used the Le Murmure font for the occasion, ensuring the text looks prominent without overpowering the featured imagery.

Le Murmure

Athene

Athene is a font that comes in a single weight, but that doesn’t mean you can’t use it for a variety of different projects. It unites bold, thick strokes with fine, thin lines. The serifs are predominantly sharp except for the letters “c”, “g”, “r”, “s”, and “y” where they look swirly. Athene is the perfect gothic-like choice for big blocks of text, but it should be used in moderation. To download this font for free (for personal use), visit Befont’s website.

Athene

Victor is a designer and developer, and his portfolio website is filled with large typography. The titles are written using the Athene typeface, catching your eye the moment the content loads. The font looks even more striking because it is paired with sans-serif letters.

Athene

Orpheus Pro

Orpheus is a serif typeface designed in the late 1900s. A few years after its release, the italic version of the font was introduced to the world under the name Euphorion. Flash forward to the present day (2011 to be exact), the digital versions of both styles were released under the name Orpheus Pro. This typeface combines gothic style with an Art Deco vibe. That is particularly evident in the italic version of the font (where you can notice the use of both swirly and sharp strokes with wavy serifs), while regular, medium, and bold styles look more sturdy. The lowercase letter “f” is especially interesting because it reflects the influence of Fraktur blackletters. To download Orpheus Pro for free, you need to purchase the Adobe Create Cloud license first.

Check out Monokai’s website to see how the beautiful Orpheus Pro perfectly matches the minimal vibe of this project. It looks great both in titles and in the body text, making the content pleasing to the eye.

Orpheus Pro

Final Thoughts

The influence of old, mystical gothic scripts on contemporary blackletters is indisputable. It shines through every stroke and shape. It’s evident in the lines that connect those strokes and in the motions of the serifs.

Type designers continuously tweak and re-invent the look of these letters to make them appropriate for all types projects. And as the examples featured in our list illustrate, there are no boundaries when it comes to blackletters and their usage.

Post your comment

Comments0