The Typekit Blog

Vote for a winner this Election Day — HWT American Chromatic, a set of digital wood type layer fonts made for mixing and matching. And, please welcome the Hamilton Wood Type Foundry to Typekit. Read more about this joint venture between P22 Type Foundry and the Hamilton Wood Type & Printing Museum.

All seven styles of HWT American Chromatic – Solid, Inset, Outline, Stars, Stars Top, Stars Bottom, and the composite Chromatic – were meant for display use, so we serve them with PostScript-based outlines for smooth Windows rendering. Use these fonts big.

HWT American Chromatic in use on our demo page

In his SxSW talk last year, Typekit engineer Sean McBride demonstrated an easy, semantic technique for layering web fonts — jQuery and a few lines of JavaScript keep the markup clean and the CSS simple. Here’s how it works.

<h1 class="chroma vote2">Vote</h1>

First, we’ll mark up some text and give it a class name of “chroma.”

$('.chroma').each(function() {
  $(this).attr('data-content', $(this).text());
});

Then we’ll apply the JavaScript from Sean, that dynamically adds a data-content attribute to any element with the chroma class. For the attribute value, it uses each element’s text content.

.chroma:before,
.chroma:after {
  content: attr(data-content);
  display: block;
  width: 100%;
  }

And in our CSS, we’ll use the element’s JS-generated data-content attribute value as content for :before and :after pseudo elements.

Next, we’ll add some basic styles, using HWT American Outline as a base, and the Solid and Stars Bottom styles for our pseudo elements:

Our h1 element, with :before (above) and :after (below) pseudo elements.

.vote2 {
  font-family: "hwt-american-outline", Georgia, serif;
  color: @gray;
  }
.vote2:before {
  font-family: "hwt-american-solid", Georgia, serif;
  color: @red;
  }
.vote2:after {
  font-family: "hwt-american-stars-bottom", Georgia, serif;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
  color: @red+#555;
  }

Here, I’m using LESS variables for color and I have applied a subtle text shadow to the stars, so they’ll appear to be pressed into the solid style when we stack the layers.

.chroma { position: relative; }
.chroma:before,
.chroma:after {
  content: attr(data-content);
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  }

Finally, we’ll position the pseudo elements absolutely, aligned atop the original (relatively positioned) element. That way, all three styles of HWT American Chromatic overlap.

Study our demo page to see the finished result in action, and to explore a few other ways we’ve mixed and matched styles of HWT American Chromatic. Then try it for yourself. This week, our demo is on CodePen too — you can explore, edit, and fork it.

Upgrade to a Personal plan or higher to use these fonts. If you’re already a paying Typekit customer, well, enjoy 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.

Today, we are delighted to welcome Fonts.info to Typekit. For starters, we have four display families including the sensational Wayfinding Sans, profiled at I Love Typography earlier this year. In addition, Iwan Reschniev, Logotypia Pro, and Tierra Nueva (Norte and Sur), are all equally well made, but each has a distinctive look. Use all of these typefaces at large sizes — they were drawn for such use, and we serve them with PostScript-based outlines for smooth rendering in Windows.

Wayfinding Sans Bold Condensed, Italic, and Bold Extended

On the web, Wayfinding Sans is best suited for use in display situations, like headings. This is a surprisingly complex and well-balanced family with ten variations overall; its italics, as well as its Condensed and Extended widths, provide subtly different textures and forms.

Iwan Reschniev, Logotypia, Tierra Nueva Norte and Sur

Iwan Reschniev is a modular geometric sans serif in seven weights, and a throwback to Jan Tschichold’s early thinking. Logotypia was “designed for modern logotypes, brands, and headlines,” and has great breadth despite its mere two styles. Tierra Nueva Norte and Sur represent an expressive, deceptively small family worth spelunking.

Upgrade to a Personal plan or higher to use these Fonts.info fonts. 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 to a paid plan whenever you’re ready.

Today, Wood Type Revival brings us another digitally remastered rare and historic style of wood type: French Octagon. Use it big! It was designed for signage, and we serve it with PostScript-based outlines for smooth rendering at large sizes on Windows. Read more about French Octagon at Wood Type Revival’s site.

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

Today, even more Web FontFonts are available to host on Typekit, including FF Atma Serif, FF Cube, FF Eureka Mono, FF Marselis, and FF Meta Correspondence. See the latest FontFont newsletter for details.

FF Atma Serif Medium, Book, and Book Italic

FF Atma Serif is a distinguished, traditional typeface with enough personality for use in headlines and a charming level of detail that brings warmth to text on high-resolution screens. Available in sixteen styles (Book to Black, with italics, plus small caps).

FF Eureka Mono Regular and Condensed Light, FF Fago Monospaced Bold

Each a part of its own extended family, FF Eureka Mono and FF Fago Monospaced have different backgrounds and personalities — Fago is official and blunt, whereas Eureka (available in five weights, plus italics, and matching condensed styles) is nimble and sharp.

FF Cube Condensed Bold Italic, Extra Expanded Bold, and Bold

FF Cube is an industrial sans serif face with a large x-height and geometric forms. It’s great for powerful headlines, and versatile, too; FF Cube is available in three weights and four widths, for a total of 18 styles.

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.

Museo Sans, a perennial Typekit favorite, now comes in a Condensed width. Like its wider predecessor, Museo Sans Condensed is a neutral, steady geometric sans with few frills. Five weights, each with an italic, make this slender style very versatile — and a great addition to projects already using fonts in the Museo superfamily.

Left: Museo Sans Condensed with Museo Slab; Right: Museo Sans Rounded with Museo Sans Condensed and Museo Sans

The 100 and 900 weights of Museo Sans Condensed are served with PostScript-based outlines for smooth rendering at display sizes, while the 300, 500, and 700 weights (plus italics) have been manually TrueType hinted for crisp rendering at small sizes.

Condensed typefaces take up less horizontal space, so they can be set larger.

h2 {
	font: 400 italic 2.5em/1 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}
.wf-active h2 {
	font-family: "museo-sans-condensed", sans-serif;
	font-size: 3.375em;
	font-weight: 300;
	}

Finding a fallback for condensed web fonts is a tall order. Be sure to revisit our series of blog posts about font events, which provide conditional hooks (like the .wf-active class, above) for styling elements differently based on the presence of web fonts.

Museo Sans Condensed, like many exljbris fonts, is available to all Typekit users — so, enjoy the new fonts! If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan as you need to.

Another week, another TypeTogether font upgrade. LFT Etica has been updated for better screen rendering and cross-platform consistency: its Regular, Italic, Bold, and Bold Italic styles have been manually TrueType hinted for sharp rendering at small sizes on Windows.

On top of that, LFT Etica’s vertical metrics have been improved for consistency across browsers and operating systems. Because vertical metrics updates may cause slight positioning changes in some designs, we don’t roll out these kinds of changes automatically. Instead, just republish your kits to receive the new files.

Upgrade to a Personal plan or higher to use LFT Etica. If you’re already a Typekit customer, enjoy the improved fonts! If you’ve never tried Typekit, sign up (it’s free). You can upgrade at any time.

Three of our most popular fonts – Adelle Sans, Adelle, and Calluna – have been updated for better screen rendering and cross-platform consistency: Adelle Light and Semibold (plus their italics); Adelle Sans Regular and Bold (plus their italics); and Calluna Regular and Bold (plus their italics). Each of these fonts has now been manually TrueType hinted for crisp rendering at text sizes.

In addition, the vertical metrics of each font in these families have been revised for cross-platform consistency. Because vertical metrics updates may cause slight positioning changes in some designs, we don’t roll out these kinds of changes automatically. Instead, just republish your kits to receive the new files.

If you’re already a Typekit customer, enjoy the improved fonts! Or, if you’ve never given Typekit a try, sign up (it’s free) and upgrade as you need to.

From Just Another Foundry comes JAF Bernini Sans, a brand new type family that has already garnered rave reviews. We’re pleased to announce that all fifty styles are now available in the Typekit library: five weights ranging from Light to Extra Bold; four widths including Narrow, Condensed, and Compressed; plus two versions of every variation (hard-lined Bernino and the softer Bernina).

Top to bottom: Bernina Compressed, Condensed, Narrow, Normal; left to right: Light, Regular, Semibold, Bold Extra Bold. Hover for Bernino.

Bernini Sans’ versatility stems from its many weights, widths, and alternate characters, as well as its unpretentious and straightforward design. Most of the shapes and spaces in these fonts do their jobs quietly and efficiently; and in cases where a different style of character is called for, a little hop from Bernino to Bernina (or vice versa) makes a big difference.

Left to right: Bernino Sans Condensed with Bernino, Bernina Sans Compressed with Adelle, and JAF Peacock with Bernina. See the full examples on our demo page.

Used for both text and headings, Bernini Sans feels efficient and precise, but also comfortable; paired with Adelle, it produces a squared, rhythmic energy. And, it can give a more expressive titling face like JAF Peacock a sturdy foundation. Bernini Sans makes pairing typefaces easy.

Left to right: 12, 11, and 10 pixel Bernino Regular on Windows (GDI/ClearType)

The normal width styles of Bernino and Bernina render exceptionally well across browsers and operating systems, thanks to extensive manual TrueType hinting by designer Tim Ahrens. In his words:

One nice thing about Bernini is that you can use it for body text but also for headlines. It is definitely a font you have to work with — and one you can work with — as opposed to “dipping” your website in it. A bit in the vein of what Jason [Santa Maria] says: “Don’t use readymades.”

Upgrade to a Personal plan or higher to use JAF Bernini Sans. 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 to a paid plan whenever you’re ready.

Today, we’re delighted to announce that FontFont is offering many more typefaces in the Typekit subscription library — including FF Ernestine, FF Spinoza, FF More, FF Amman, FF Utility, FF Kava, and additional styles of popular fonts like FF Meta and FF Dax. Overall, we have added 22 new and updated FontFonts (totaling 121 new variations) to the library. Quite a few, but this is just a portion of the FontFont catalog — a diverse and carefully curated selection of web-ready typefaces capable of serving many needs.

See a few of the new library FontFonts in action on our demo page.

The new families, in alphabetical order, are FF Amman Sans and Serif; FF Angie; FF Avance; FF Chambers Sans; FF Ernestine; FF Ginger; FF Karbid, Text, and Slab; FF Kava; FF More (also in Wide and Condensed); FF Spinoza; FF Utility; and FF Zwo Correspondence. In addition, FF Dax Condensed now has Italic, Bold, and Bold Italic styles; FF Meta Condensed now has Book Italic, Normal, Normal Italic, Bold, and Bold Italic styles; FF Prater Sans and Serif now have Bold styles; and FF Speak now has Italic, Heavy, and Heavy Italic styles.

See a web font specimen of any Typekit font by choosing “Open expanded Web Font Specimen” on its font detail page. Above: FF Spinoza, FF Ernestine, and FF Amman Serif specimens.

One way to get to know these FontFonts better is by studying their web font specimens. For instance, typefaces are sized and positioned differently within their em boxes. Designers should be aware of these subtle size and spacing differences so that we can compensate accordingly when we set CSS font-size.

Left to right: FF Spinoza, FF Ernestine, FF Amman Serif

Even when size and position are relatively consistent, as with these three FontFonts, character width and built-in spacing have a big effect on how big the type looks. FF Spinoza has nearly the same cap-height and x-height as FF Ernestine and FF Amman Serif, yet it sets much smaller.

Another way to get to know the FontFont catalog is to look for your favorites at FontFont.com, where you can read about their individual histories and the type designers who drew them. FontShop also offers some fantastic educational resources.

Upgrade to a Portfolio plan or higher to use all of the new-to-library FontFonts. If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready. And of course, even more of FontFont’s catalog is available directly from FontFont — license these, and you can host them on Typekit with the push of a button.

Today we welcome two newly-released fonts from Adobe Type into the Typekit library: Viktor Solt-Bittner’s Leander Script Pro (Regular and Bold) and Paul Hunt’s Source Sans Pro (Extra Light, Light, Regular, Semibold, Bold, and Black, plus italics). Source Sans Pro is Adobe’s first open source font release; Hunt shares why Adobe created an open source typeface over on Typblography.

We’ve also added five fonts from the Adobe Wood Type series to the library: Cottonwood Std, Ironwood Std, Juniper Std, Mesquite Std, and Ponderosa Std. These decorative typefaces look great set in bright colors, and fit right in with Typekit’s other Wild West fonts.

Source Sans Pro is available in all Typekit plans. Upgrade to a Personal plan or higher to use Leander Script Pro and the Wood Type series.

Adobe’s Typblography blog has more details on the new additions. Enjoy!