The Typekit Blog

One of the most popular fonts on Typekit, Adelle from TypeTogether, has been updated for better screen rendering and cross-platform consistency. Adelle Regular, Italic, Bold, and Bold Italic have been manually TrueType-hinted for crisp rendering at text sizes, and we serve the remaining weights and styles with PostScript-based outlines for smooth rendering at display sizes.

In addition, Adelle’s vertical metrics have been revised for cross-platform consistency, and to ensure that no glyphs are clipped. Because vertical metrics updates may cause slight positioning changes in some designs, we don’t roll out the changes automatically. Instead, just republish your kits to receive the new files.

Please join us in celebrating TypeTogether’s commitment to making great typefaces available quickly, and improving them as we all learn more about fonts on the web.

This week we’re happy to announce three new releases from TypeTogether: Adelle Sans, Tablet Gothic (plus Wide, Narrow, Semi Condensed, Condensed, and Compressed widths), and Soleil.

Adelle Sans is the lovely new counterpart to Adelle, one of Typekit’s most popular web fonts. While Adelle Sans easily stands on its own, it also pairs perfectly with its slab sibling. Available in seven weights, each with an accompanying italic.

Tablet Gothic is a headline superfamily. Equipped with seven weights in six widths for a total of 42 fonts, you’ll have everything you need to create designs that are both flexible and consistent.

TypeTogether also found time to release Wolfgang Homola’s Soleil. Like many popular geometric sans serifs, Soleil has open counters and friendly proportions that give it a soft exterior and counterbalance its rigid skeleton.

Soleil is available in all Typekit plans. Upgrade to a Personal plan or higher to use Adelle Sans and Tablet Gothic. If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

Roll up your sleeves! Let’s get to work with new styles of Quatro Slab from psType. Its hefty Ultra Black has been available on Typekit for a while, but the family now includes nine additional styles ranging from Regular to Ultra Black Italic. In a word, and in our demo page, Quatro Slab is strong.

h1 {
  font-family: "quatro-slab", serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  }

Quatro Slab’s massive Ultra Black is a powerful force, especially in all caps. A little letter spacing goes a long way here, and helps the big forms breathe.

Runda paragraph text, with Quatro Slab Bold above and below.

Runda, also from psType, is a no-nonsense sans that works well with Quatro Slab. While their underlying stylistic rationale differs, these two faces have many structural similarities (compare their specimens), share similar proportions (their cap and x-heights, for example), and both convey a feeling of measured practicality.

Blue and green dots identifying white spaces that resonate with one another’s volume.

Just as strokes and slabs in typefaces can inspire formal aspects of a composition, counters and crevices can inspire line-height, margins, and other white space. Quatro Slab’s weighty angles and sculpted nooks offer many opportunities for finding balance.

Upgrade to a Personal plan or higher to use Quatro Slab. If you’re already a paying Typekit customer, enjoy the new styles! If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

New FontFonts are now available to host on Typekit, including FF Eureka Sans, FF Legato, FF Max, FF Meta Headline, FF Scuba, FF Seria Sans, FF Strada, FF Tisa Sans, and more. See the latest FontFont newsletter for details.

FF Tisa Sans Black and Bold, with FF Tisa Regular (source text)

FF Tisa Sans boasts a meaty fourteen styles, from Thin to Black. Tisa Sans is a new counterpart to one of FontFont’s most popular web fonts, and a customer favorite here at Typekit: FF Tisa.

FF Legato Demibold, Italic, and Bold

Agile and active, FF Legato was designed to exercise the black-white relationships in typeset words. Legato feels like a face made for reading. Used for headlines, the tension between its letterforms and their white space seems impossibly high — as though nothing could disrupt its balance.

FF Eureka Sans Bold Italic and Regular (source text)

Even at its most bold, the tall and lean FF Eureka Sans sets a light, elegant tone. Its boughs and bends appear poised to flex gracefully at a moment’s notice, yet the face conveys strength. Available in two widths of five weights each, with italics.

License any of these fonts from FontFont, and host them on Typekit with any of our plans (including our free plan). When you purchase a one-time web license for type families or individual typefaces at FontFont, you’ll receive a link to activate your fonts on Typekit. Then, you can use them just as you would fonts from our subscription library. You can even mix Web FontFonts in the same kits as Typekit library fonts. It’s easy, and all of your fonts stay organized on Typekit in a special “Purchased Fonts” tab. Here’s how it works.

The Purchased Fonts tab organizes fonts you’ve licensed outside of Typekit

Typekit’s subscription library is a solid foundation. But, in Robert Bringhurst’s words, as you “choose your library of faces slowly and well,” remember to think outside the library, too. By bringing fonts to Typekit, as well as finding go-to typefaces we already offer, you can cultivate your own personal type library.

Please give EuropaType a warm welcome, and enjoy the first few faces from Fabian Leuenberger’s catalog: Mono45 Headline and Motor (plus Stencil), served with PostScript-based outlines for smooth rendering across platforms; as well as Europa, a geometric-humanist sans inspired by Futura and Gill Sans that has been manually TrueType hinted for great rendering at small sizes on Windows.

In today’s demo, I’ve used Mono45 Headline to anchor an entire layout. The edges of this big type, rather than borders or boxes, define the bounds of my composition. The right typeface can provide strong visual structure.

This paragraph is set in Europa, and so is the all-caps “presented by” text. Europa is perfect for bursts of short text; it has the stark simplicity of a geometric face and sets smoothly in sentences. Remember to letterspace strings of capital letters.

Mono45 also acts as a platform for more playful type. Here, I’ve paired it with Anatoletype’s Nouvelle Vague. Nouvelle’s dynamic strokes practically leap from the solid stage set by Mono45.

Optical alignment is critical for compositions structured by type, and is often the difference between an amateurish composition and a professional-looking one. Above, the swash of the F in Fake aligns optically with the outer edge of the Z in Zürich. And the F’s lower stroke aligns optically with the purchase button underneath. (Remember that button?)

<script src="../js/jquery.fittext.js"></script>
<script>
  $(".band").fitText(0.6);
  $(".show").fitText(0.265);
</script>

To achieve optical alignment, I centered the headlines and adjusted their sizes until it looked right (I’m using FitText, so it was just a matter of tweaking those numbers in the parentheses above.) Then, I centered the div that contains the purchase button and adjusted its width and padding.

Here, another example of optical alignment. On smaller screens, paragraphs are inset to match the purchase button’s rounded corners. Another small adjustment at play here is the use of Molten Leading, a kind of fluid line-height, for flexible space between lines of paragraph text.

<script src="../js/moltenleading.src.js"></script>
<script>
  $("p").moltenLeading({
    minline: 1.35,
    maxline: 1.6,
    minwidth: 320,
    maxwidth: 768
  });
</script>

EuropaType fonts are available to all Typekit users. Use them to build your next composition, and again, please join us in welcoming EuropaType to Typekit.

We’re happy to welcome two new display typefaces to the Typekit library: Trajan Sans and Lithos. Plus, Adobe’s popular Trajan typeface is now available in four additional weights, with support for Greek and Cyrillic (just enable the All Characters subset in your kit). This new version is called Trajan Pro 3.

These are all display faces, best suited for use at large sizes. Let’s talk about using display faces well, finding stand-ins suitable for smaller sizes, and choosing good text pairings. (Demo.)

Trajan Sans is a brand new design, meant to exhibit the same elegance and stonecut lineage as its serifed counterpart. Its letterforms are striking, and you may find it works best with no embellishment. Composing this type sample, I began with text-shadows and masks, but decided to remove them. I did make the text slightly transparent, to bring in some of the background image and color.

.trajan-sans {
  font-family: "trajan-sans-pro", sans-serif;
  color: #b42408;
  color: rgba(180,36,8,0.9);
  }

Trajan is often employed when a stately, elegant presence is needed; however, its subtle contours and chisel-thin serifs weren’t designed for use at small sizes. Use Trajan big. Choose a similarly tasteful Renaissance-inspired text typeface for navigation, small headlines, and short bursts of copy. Minion (used for the three lines of text, above) is just such a text face.

Here’s what those three lines of text looked like before, set in too-small Trajan:

.trajan h3 {
  font-family: "trajan-pro-3", serif;
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #403824;
  }

Here’s how I adjusted Minion’s size, color, and letter-spacing so it feels inscriptional, like Trajan:

.trajan h3.minion {
  font-family: "minion-pro", serif;
  font-size: 20.8px;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #5d5645;
  letter-spacing: 1.6px;
  letter-spacing: 0.1rem;
  }

Bonus points if anyone can tell me what rems are. (Hint, hint.)

Lithos is easily overused, but can set a lively tone if used sparingly. Choose a text face that resonates with this titling face. The hand-tooled forms and compatible geometry of Cronos and Lithos help them feel like a natural pair. Chaparral and Lithos are jaunty, low-contrast faces, and they’re siblings — both designed by Carol Twombly.

Upgrade to a Portfolio plan to use Trajan Pro 3, and a Personal plan or higher to use Trajan Sans and Lithos. If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

Rock and roll! The legendary Jim Parkinson, designer of iconic logotypes and display faces, has partnered with Typekit to bring his unique and powerful fonts to the web. Available today are Cabazon, Hotel (Solid and Open), and the Modesto family, including Condensed, Expanded, and Text (named for its lowercase letters, but still a display face — use it large).

The painterly style of these Parkinson types reminded me of this post I wrote last summer after attending a workshop led by John Downer, and I couldn’t resist putting together a few more examples (demo) of tasteful text-shadow application inspired by Jim’s photography and lettering.

Cabazon with an offset drop shadow

h1.cabazon {
  font-family: "cabazon", serif;
  font-weight: 400;
  background-color: #fcfae6;
  color: #c71b00;
  text-shadow:
    1px 1px 0 #fcfae6,
    1px -1px 0 #fcfae6,
    5px 3px 0 #000;
  }

Hotel Open (in green) atop Hotel Solid, with a subtle glow

h1.hotel {
  font-family: "hotel-solid", sans-serif;
  font-weight: 400;
  color: #086190;
  background-color: #02202f;
  text-shadow: 0 0 30px rgba(255,255,255,.25);
  }
h1.hotel span { position: relative; }
h1.hotel span:after {
  position: absolute; left: 0;
  content: attr(title); /* title = "pause" */
  font-family: "hotel-open", sans-serif;
  font-weight: 400;
  color: #bcf084;
  }

Modesto Expanded, with a subtle outline and two-tone printer’s shade

h1.modesto {
  font-family: "modesto-expanded", serif;
  font-weight: 400;
  color: #e4d457;
  background-color: #a33e19;
  letter-spacing: 0.5rem;
  text-shadow:
    1px -1px #4e1c11,
    -1px -1px #4e1c11,
    1px 1px #4e1c11,
    -1px 1px #4e1c11,
    0 1px #4e1c11,
    1px 0 #4e1c11,
    1px 2px #6d2718,
    2px 1px #e76a4f,
    2px 3px #6d2718,
    3px 2px #e76a4f,
    3px 4px #6d2718,
    4px 3px #e76a4f,
    4px 5px #6d2718,
    5px 4px #e76a4f,
    5px 6px #6d2718,
    6px 5px #e76a4f,
    6px 7px #6d2718,
    7px 6px #e76a4f,
    7px 8px #6d2718,
    8px 7px #e76a4f,
    8px 9px #6d2718,
    9px 8px #e76a4f,
    9px 10px #6d2718,
    10px 9px #e76a4f,
    10px 11px #6d2718,
    11px 10px #e76a4f,
    11px 12px #6d2718,
    12px 11px #e76a4f,
    12px 13px #6d2718,
    13px 12px #e76a4f,
    13px 14px #6d2718,
    14px 13px #e76a4f;
  }

Parkinson Type Design fonts are available to all Typekit users. Use them for your next big headline, and please join us in welcoming Jim to Typekit.

Today we’ve added four new styles of Skolar (Light and Extra Bold, with italics), and two new styles of Abril Display (Black and Black Italic), plus a new typeface — Bree Serif, the friendly upright italic and serif cousin of TypeTogether’s Bree. All of these fonts are served with PostScript-based outlines for smooth rendering at display sizes.

Top to bottom: Abril Display Black & Black Italic, Skolar Web Light Italic & Extra Bold

Upgrade to a Personal plan or higher to use the new styles of Skolar and Abril Display. If you’re already a paying Typekit customer, enjoy all of the new fonts! If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

We’ve added four new DizajnDesign display faces to the Typekit library today: Anca, Komu (available in two styles), Poleno, and Rukou. All are served with PostScript-based outlines for smooth rendering in Windows browsers. (Above, Rukou Extra Light.)

Poleno Semibold with Deva Ideal Medium (source text)

Komu A with Deva Ideal Book

Anca with Deva Ideal Medium Italic (source text)

These typefaces each have their own unique style but, perhaps not surprisingly, each also pairs beautifully with the DizajnDesign text face, Deva Ideal.

Upgrade to a Personal Plan or higher to use these new faces from DizajnDesign. If you’re already a paying Typekit customer, enjoy the new fonts! If you’ve never given Typekit a try, sign up (it’s free) and upgrade whenever you’re ready.

Today we’re pleased to welcome DSType’s Leitura News to the Typekit library. Designed for editorial use, it comes in eight styles (four weights with matching italics), four of which have been manually TrueType hinted to render well at text sizes.

Top to bottom: Acta Display Black Italic, Leitura News Roman 3 (with italic ampersand), Roman 4, and Roman 2. (source text)

At larger text sizes Leitura News feels studious and bright. Its bold (Roman 4), with a bit of letterspacing, can be successful in short bursts at these sizes.

Velino Poster with Leitura News Roman 4 (subhead, sidebar) and Roman 2 (text). (source text)

At smaller text sizes Leitura News feels crisp and active, but also quiet. Even its more outgoing letterforms buckle down and do their jobs for the sake of the text.

Upgrade to a Personal Plan or higher to use Leitura News. If you’re already a paying Typekit customer, enjoy the new fonts! If you’ve never given Typekit a try, sign up (it’s free) and upgrade whenever you’re ready.