Nice Web Type

Syndicate content The Typekit Blog
News about Typekit
Updated: 2 hours 26 min ago

New on Typekit: Load web fonts with CSS

Thu, 11/16/2017 - 8:00am

In August, we launched an Early Access preview for serving web fonts without JavaScript. Today we’re excited to announce that we’ve rolled these capabilities out to all our customers.

With the CSS embed code, you can use web fonts from Typekit in HTML email, Google AMP, and custom stylesheets, and more — places that our previous reliance on JavaScript prevented us from supporting. Starting today you’ll see the new CSS embed code in our kit editor, where it’s available as an HTML link tag or CSS @import statement.

Any existing websites with the default JavaScript embed code will continue to work with no change on your end, but you can change to the CSS embed code if you wish by grabbing it from the kit. When you create a new kit, the CSS embed code is the new default — and you still have the option to choose the advanced JavaScript embed code if you need it, whether for dynamic subsetting or fine-tuned control over font loading behavior.

We’ve gotten a lot of feedback that people are excited to finally use fonts from the Typekit library in their email campaigns, and we’re pleased to support it! It was also great to see LitmusApp added us to their “Ultimate Guide to Web Fonts in Email” on the tail of our Early Access announcement.

Since the Early Access release, we’ve added support for our partners using the Typekit Platform API – which means you can now serve Typekit fonts using the CSS embed code for your customers. See our documentation for more info about using our APIs.

Some folks have asked if we have a preference for the font-display CSS property. The font-display descriptor has been introduced in drafts of the CSS 4 specification to provide tighter control over when to display a font. Since the property is not yet widely supported in browsers, we won’t be applying our own preferences to the CSS output that we serve at this time. In the future, we’d like to expose this functionality so you can set your own preferences.

We’re looking forward to see what you build using CSS web font serving from Typekit! Here are some resources for getting started:


Myriad Devanagari and Myriad Bengali: New Brahmic type from Adobe Type

Wed, 10/25/2017 - 9:07am

It is with great satisfaction that I present the two newest additions from Adobe Type to the Typekit library, Myriad Devanagari and Myriad Bengali. Designed by Vaibhav Singh and Neelakash Kshetrimayum, respectively, these typefaces translate the design of our popular Myriad family to the most-used writing systems of India.

From the beginning, the concept for these families was to make them harmonize in spirit with Myriad, Adobe’s best-loved sans serif design, and to continue building out the general usability for the Myriad superfamily. Existing Myriad families already included script coverage for Latin, Cyrillic, Greek, Hebrew, and Arabic writing systems. Designing Devanagari and Bengali extensions of Myriad provides a powerful typographic system for designers who may need to set text in various languages using a consistent style.

Writing systems supported by Myriad families (from left-to-right, top-to-bottom): Devanagari, Greek, Latin, Bengali, Arabic, Cyrillic, Hebrew.

In addition to usability, an equally important concern was the appropriateness of the design for digital display. The design principles that govern Myriad—letterforms informed by writing, generous counters, bright joins, simplified detailing—are all hallmarks of type design that works well for screen-based media. In adapting the typographic features for Devanagari and Bengali, we took great care to balance the traditional calligraphic conventions of these scripts with the spirit and simplicity of Myriad.

Some calligraphic details of the Brahmic writing systems (highlighted in orange) have been retained, other features (in green) have been rationalized to be more neutral, similar to the original Myriad design.

Vaibhav and Neel, both extremely talented designers, have previously worked with us on the Adobe Gurmukhi and Adobe Bengali types. It was very important to me to involve Robert Slimbach to find the right balance of “Myriadness” for these family extensions as he was one of Myriad’s principal designers, along with Carol Twombly, and had also designed the Arabic and Hebrew extensions of the family. Fiona Ross also consulted on these projects, providing guidance and ensuring that our design decisions were appropriate for the Indian scripts.

The resulting designs for Myriad Devanagari and Bengali are sturdy and dynamic, combining moderately low contrast with traditional proportions, and detailing informed by calligraphy. On screen, the resulting text leaves a strong impression and avoids a dull, heavy texture that can be a pitfall for many sans serifs.

The contrast of Adobe Bengali Bold (left) is is much higher than Myriad Bengali Bold (right). This is shown by the relative weight of the heaviest strokes, highlighted in green, and the thinnest, in orange.

Although the stroke contrast of Myriad Devanagari (right) is considerably reduced in comparison to Adobe Devanagari (left), stroke joins are kept open to provide a pleasing texture in running text.

Each of these new families includes 10 styles, featuring five weights from light to black with accompanying obliques. This suite of variations provides a wide range of typographic options typically unavailable for these writing systems. Myriad Devanagari supports the languages Hindi, Marathi, Nepali, and Sanskrit. Myriad Bengali supports Bangla and Assamese languages. These fonts can be used on the web or synced for desktop use from Typekit, and you’ll find perpetual licenses for them on Fontspring.

Brahmic type design at Adobe

These two new families have been designed and produced as part of an Adobe Originals initiative to provide our customers with premium quality fonts for the top 10 languages of India. This project began in 2005 with the development of Adobe Devanagari by Tiro Typeworks for our library. In 2012, Adobe moved Brahmic type development efforts in-house, collaborating with external designers to produce well-crafted fonts for additional Indian writing systems.

Until now, all of these released Brahmic type designs have been specifically tuned for use in print media in order to meet the needs of our print publishing customers on the Indian subcontinent. The release of Myriad Devanagari and Myriad Bengali, both developed with screen display as a primary use case, is a notable shift in our Brahmic type design philosophy.

Personally, I’m excited that these typefaces are breaking new ground, and it’s always very humbling to work with such talented designers in the process. I feel that it took all of our combined efforts to make these new type families a reality, and I’m looking forward to what’s next.


New variable fonts from Adobe Originals

Thu, 10/19/2017 - 7:18am

Photoshop and Illustrator announced plenty of new features at Adobe MAX this week, include some exciting typographic features we’ve been anticipating: support for OpenType variable fonts.

This new font format allows users to customize the styles within a typeface design, effectively giving them an entire family of fonts in a single file. We’ve included a few Adobe Originals families with this release of Illustrator and Photoshop to make it easier for you to explore what variable fonts can do.

Here’s a quick walkthrough of this week’s typographic updates from the Photoshop team.

Don’t miss the Illustrator announcement, either, which introduces its own nifty typographic controls.

We chose six families to best show what the new format will allow, and how the possibilities may differ from one typeface to another. Five of these are from our Variable Concept font collection, allowing you to play with the full variable design space on some of our most popular Adobe Originals families (although you’ll only have a limited character set for now).

  • Myriad Variable Concept allows you to see how the weight and width styles of Myriad Pro can interact as you adjust each property.
  • Acumin Variable Pro allows you to adjust weight, width, and even the slant angle, combining all of Acumin Pro’s 90 variants in a single dynamic font file.
  • Minion Variable Concept is a special treat — a preview of a major update to the Minion family that will be released in the near future. Although you won’t yet get to see all the features of the new Minion, you’ll be able to adjust its revamped weight and optical size settings with this version.

From the Source superfamily, Source Sans Variable, Source Serif Variable, and Source Code Variable all allow you to play with the weight range in each design, and they also contain the complete character set of the Pro versions.

In addition to using the Source Variable families in Photoshop and Illustrator, you can download them from our GitHub page so you can try them out in other applications and environments as the support for variable fonts becomes more widespread. We’ll keep you posted as that support develops! Check out our roundup of variable fonts news and follow the discussions on TypeDrawers.


Introducing visual search on Typekit

Wed, 10/18/2017 - 3:00am

Whether your inspiration comes from signage, posters, flat artwork, or that weird billboard you drive by all the time, our visual search feature brings a new dimension to the way you find type with Typekit. We launched an Early Access preview for visual search back in September, and today we’re very proud to announce that we’ve rolled these capabilities out to everyone.

Start with a photo of type you’ve seen, and send it through visual search to find the fonts in our inventory that are visually similar to it. From your desktop or your mobile device, you can highlight a specific line of type from your photo to control the search, and then sync the fonts you like best right away.

Want visual search from Typekit in your app?

We’ve made the APIs available, too. Learn more.

Start a visual search from any page on Typekit — drag & drop, or upload directly on mobile.

Adobe Capture CC also got a makeover for MAX and now includes Type Capture, a new feature powered by the same Adobe Sensei technology as the new visual search on Typekit. Now as you snap pictures of type on the go, you can save similar fonts as character styles and use them in your favorite desktop apps like Illustrator, Photoshop, and InDesign.

Adobe Capture uses the same Sensei technology as Typekit to find similar fonts on the go.

Get started now — on Typekit, either look for the camera icon in the search box to find or capture your photo, or check out the Discover page for tips and even more inspiration.

You might start noticing type in more interesting places!

Need a walkthrough? If our Early Access blog post doesn’t clear things up, reach out to us directly at support@typekit.com and we’ll help you out.


Adobe Sensei as a service: Visual search APIs released for developers

Wed, 10/18/2017 - 3:00am

If you’re a developer who loves type, and you want to share that love with the people using your apps — we’ve got great news. Starting today, we’ve made the API for our visual search feature available on adobe.io.

Visual search from Typekit pairs our team’s typographic savvy with Adobe Sensei’s machine-learning technology, and in fact is the first Adobe Sensei capability to be released to the public as a service. With these APIs, your users can upload any photo of lettering or type and visual search will return a list of similar typefaces on Typekit.

When you enable visual search from Typekit in your own apps, you’ll be engaging with your users from the very beginning of their creative process — regardless of typographic skill level. Consider the initial design research phase of a creative professional. It’s impossible to know where and when inspiration will strike, but it’s pretty likely that user has a camera-enabled smartphone. An integration with our visual search means they can tap into a vast network of typographic knowledge early on.

In addition to the updated APIs, we’ve continued with our policy of providing fully thought-out documentation to accompany this new feature. You’ll find well-organized design patterns, API reference materials, and full endpoint documentation at your disposal on Adobe.io. Have a look, and eliminate the guesswork in your development cycle.

Our visual search documentation includes well-organized design patterns.

We believe there is immense value in enabling customers to find, get, organize, and use fonts from Typekit without ever leaving the application they’re working in. That’s why we’ve been hard at work on reimagining how we support integrating the Typekit service into apps. Got questions? Get in touch with us about what you’re working on, and how you’d like to integrate type. We’d love to hear your ideas.


Type sessions at Adobe MAX

Mon, 10/16/2017 - 7:40am

Last week we told you all about what we have going on in our Typekit City booth at Adobe MAX. Today we want to highlight the awesome type-centric talks and workshops going on at the conference, as well as a some special events. There’s even a couple of livestreams hosted by our own Ariadne Remoundakis for those tuning in from home.

Tuesday, October 17

8:30 am to 5 pm
Pre-Conference Workshop: Hand-drawn Type & Lettering: From Line to Sign
Dr. Shelley Gruendler

Good design needs good typography and great design needs great typography. Individual letters are the base for nearly all forms of communication and by understanding how today’s letterforms emerged, we can better design letterforms for the future. In this pre-conference workshop, stretch your creativity by designing a unique and totally distinctive letterform. You’ll begin with an abstract form derived from everyday objects and then grow and refine your form in accordance with how alphabets of the world have evolved. The abstract beginning of the letterform will become real as it is adapted and modified. Your creativity will expand as your glyph evolves.

Wednesday, October 18

3 to 6 pm
Workshop: Best Tips and Tricks for Beautiful Brush Lettering
Laura Worthington and Debi Sementelli

Learn the basics and beyond in this brush lettering workshop. We’ll start with the essentials — from tools and materials to brush manipulation and handling, creating core letterforms and structures, adding flourishes, and refining your lettering — and finally put it all together in one or more completed works for your portfolio. Previous experience in hand lettering isn’t necessary. All supplies will be provided.

6 pm
Book signing:The Golden Secrets of Lettering
Community Pavilion
Martina Flor

Thursday, October 19

8:15 to 9:30 am
Talk: Typography Tips Everyone Should Know
Lara McCormick

Studies show that good typography improves mood, comprehension, and cognitive skills. In the race for people’s attention, details matter. As a result, an increasing number of non-designers are realizing that typography matters to their brand, their customers, and their success. So your type game better be on point!

2:45 to 4 pm
Talk: Lettering Design from Sketch to Final Artwork
Martina Flor

Dig deep into the art of lettering. Lettering artist Martina Flor will unveil the secrets behind the craft of lettering and walk you through the steps from hand sketch to final digital artwork. Learn the essentials of sketching and how to get the best out of your drawing. Gain techniques to go from analog to digital by drawing letter shapes in Illustrator and adding color and texture. Finally, get insight into how to get better at your craft while building a portfolio of work.

5 to 6 pm
Livestream: Live Lettering
Martina Flor & Neil Summerour hosted by Typekit’s Ariadne Remoundakis

Friday, October 20

8 to 11 am
Workshop: Best Tips and Tricks for Beautiful Brush Lettering
Laura Worthington and Debi Sementelli

10:15 to 11:30 am
Talk: Typography Tips Everyone Should Know
Lara McCormick

10:30 am to 12 pm
Workshop: Behance Portfolio Reviews
Including Dr. Shelley Gruendler, Type Camp Founder

1:30 to 4:30 pm
Workshop: Expressive Lettering
Gemma O’Brien

Join Australian artist Gemma O’Brien for a hands-on workshop that will teach you how to create expressive and dynamic lettering pieces. Gemma will begin with live demos of brush script and experimental ink techniques before moving into methods of combining illustration and text into a single design. This class is perfect for beginners or those who wish to build on their existing lettering skills. All supplies will be provided.

2:30 to 3:45 pm
Talk: Lettering Design from Sketch to Final Artwork
Martina Flor

3 to 4 pm
Livestream: Live Photoshop Compositing
Brooke Didonato hosted by Ariadne Remoundakis


Advanced web font loading with Typekit’s CSS embed code

Wed, 10/11/2017 - 8:49am

When we introduced our CSS-only embed code, we wanted to provide users with the feature they’ve been asking us for over the last several years – a simple, JavaScript-less, single line embed code that they could use anywhere.

But some of you may have noticed that something is missing. In our JavaScript embed code, we give you the opportunity to control things such as loading the fonts asynchronously, and adding custom timeout for when the embed code should stop trying to load fonts on your page for users. But you don’t have to give up on all of those optimizations that JavaScript can help you with in order to use our CSS embed code! There are ways to mitigate the problem.

We can’t propose a native CSS-only solution to this problem yet; at the time of this writing, we don’t have access to the new font-display CSS property in all browsers. In the meantime, we can look to other JavaScript libraries to control the code on your page.

Font Face Observer — a small, simple, and easy-to-use JavaScript library developed by our very own Bram Stein — allows browsers to load system fallback fonts first, while tracking when web fonts are loaded. It can then add a custom CSS class to your elements, which will apply your specified web fonts once they have been downloaded. You might be wondering why you would forgo using Typekit’s JavaScript embed code in order to maintain your own copy of a JavaScript font loading library, and the answer is this: speed, and advanced usage.

From a speed perspective, hosting your own JavaScript gives you only a slight advantage. Typekit has a vast number of nodes through our Content Delivery Network (CDN) to ensure that your fonts are cached around the world, so that they can be delivered to your content viewers as quickly as possible. However, you might notice a slight speed boost on initial loads by hosting a copy of the Font Face Observer library, and referencing Typekit’s new CSS embed code within.

Another perk of going through the exercise of controlling how fonts load on your page is that you can choose a lightweight library — one that is smaller than Typekit’s kit JavaScript — while still getting the advantage of loading Typekit fonts asynchronously, which prevents calls referencing the external font files from blocking the initial rendering of a page.

Now that we’ve explored the reasons you might be interested in trying a lightweight library such as Font Face Observer, let’s try it out!

First, download the source for the Font Face Observer. You can also install it using npm, as referenced in the documentation. For this example, we’ll use a locally copied version of fontfaceobserver.js from the github repository.

Next, make sure you have Early Access turned on at Typekit.com and create a kit for your website. (You can also use this technique on an existing kit on Typekit.) Once you’ve created your kit, visit the “Embed Code” section of the kit editor.

Once there, copy your CSS embed code to use in your project—you’ll see where to use it in the example below.

Since Font Face Observer detects and notifies you when fonts are loaded, you need to create a special class that the JavaScript will add to your DOM when the fonts are loaded and ready for use. In our example below, we are using the class fonts-loaded, but you can use anything.

Make sure to add the font-family name that Typekit provides you in the Kit Editor to ensure you’ve added the proper font families that are in your kit.

For our example, we modified our body and h1 CSS elements to first be loaded with the default system fonts, and then, once Font Face Observer detects that the fonts have finished downloading, it will apply our fonts-loaded class with the Typekit fonts we’ve selected from our kit.


body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: 'brandon-grotesque', sans-serif;
}
h1 {
font-family:serif;
}
.fonts-loaded h1 {
font-family: 'chaparral-pro', sans-serif;
}

Then, you can use the Font Face Observer library to apply your font-family style once the fonts are done downloading. Below is the full example of what you would insert at the bottom of your document, before the closing <body> tag.


<script>
(function () {
var script = document.createElement('script');
script.src = 'fontfaceobserver.js';
script.async = true;
script.onload = function () {
var chaparral = new FontFaceObserver('chaparral-pro', {weight: 400});
var chaparral_heavy = new FontFaceObserver('chaparral-pro', {weight: 700});
var brandon = new FontFaceObserver('brandon-grotesque');
Promise.all([chaparral.load(), chaparral_heavy.load(), brandon.load()]).then(function () {
document.documentElement.classList.add('fonts-loaded');
});
};
document.head.appendChild(script);
}());
</script>

Now that you have a basic idea of how to use Font Face Observer with Typekit’s CSS embed code, try it out and let us know what you think! We’re excited to see how people can expand their usage of Typekit using advanced techniques like this one.


Visit Typekit City at Adobe MAX

Tue, 10/10/2017 - 10:28am

Typographic souvenirs, live lettering, and feature demos. All await you in Typekit City at Booth 103 in the Adobe MAX Community Pavilion this year.

Build a city of type with #TypekitCity

If you’re reading this blog, we have a hunch you’ll be photographing great type while you’re exploring Las Vegas. When you post on Instagram or Twitter make sure to use #TypekitCity. Your photos will automatically print to the Typekit City booth. Stop by the booth and leave one on our walls and take the other home!

Find your new favorite font with visual search

Our team is looking forward to showing off the new visual search feature on Typekit. We can’t wait to demo it for you in the booth. Stop by at any time, or come for formal demos each day from 2 to 3 p.m. We suggest trying it out on your #TypekitCity stickers. You can put them in a souvenir Scout Book and write down all the favorite new fonts you find!

Meet the muralist

We’re pleased to host Adobe Creative Resident, Rosa Kammermeier, each day as she live letters a wall in our city. Meet Rosa and see her work evolve over the three days in the pavilion. Stop by Wednesday from 6 to 8:30 p.m. or Thursday and Friday from 11:30 a.m. to 1:30 p.m.

Shape the future of Typekit

Feedback from type lovers and type users like you is what continues to help Typekit evolve. Fill out a short survey card in the booth and receive some extra Tk goodies. You can also sign up for future research opportunities.

Check out the Type Village

Meet our foundry partners at the kiosks next to Typekit City! This year we’ll be joined by:


New fonts on Typekit from XYZ Type

Thu, 09/28/2017 - 10:22am

Meet our newest foundry partner, XYZ Type! Founded by Ben Kiel and Jesse Ragan, XYZ just launched this year and we are thrilled to offer their fonts here on Typekit.

Kiel and Ragan both have extensive experience as type designers, having worked at the likes of House Industries and Hoefler & Frere-Jones before going into independent work. Both have taught classes in type design as well — Kiel at Washington University, Ragan at Pratt, and both at Type@Cooper. We’re adding all three of their published families to Typekit Marketplace, and three styles will also be available in our subscription library for web and sync.

Aglet Slab, by Jesse Ragan, is a sturdy slab whose angular framework of 45- and 90-degree angles is matched by decidedly rounded corners and edges for an overall feeling of variety and an outgoing personality. With seven different weights and matching italics for each, Aglet is versatile and will suit a huge range of different projects. Aglet Slab Regular and Bold are both available in our library, and all other weights and styles are available for purchase through Typekit Marketplace.

Export, both Regular and Stencil

Also by Ragan, Export is another of XYZ Type’s founding typefaces, and its rather unconventional structures give this sans serif an unusually rugged appearance. The inspiration for this typeface came from printed letters on a cardboard box, spotted by Ragan in NYC Chinatown and reimagined for this all-caps design that he describes as having an “industrial rhythm.” The Stencil style is a lot of fun too — and don’t miss the extra shipping symbols. Both styles of Export are available on Typekit Marketplace.

Cortado

Ben Kiel and Jesse Ragan both worked on the design for Cortado and released it at the end of 2014, and we’re delighted to offer the single style in our subscription library. Modeled after a hand-painted script from illustrator Cecilia Carlstedt, Cortado is filled with fresh energy, but comes off as relaxed — it’s a great choice for anything that needs a bit of a midcentury feel.

See the whole collection from XYZ Type on their foundry page, and let us know what you think! We’d love to hear where you use these. Keep an eye on our Twitter and Instagram feeds for news about new type in our library.


Four Japanese foundries add their fonts to Typekit

Tue, 09/26/2017 - 6:06pm

We are delighted to announce that four Japanese foundries have added several of their typefaces to the Typekit library.

Visual Design Laboratory, Jiyu Kobo, Dai Nippon Printing, and Fontworks are our newest foundry partners, representing a substantial expansion to our collection of Japanese type with a total of 74 new fonts.

Visual Design Laboratory

The ethos of Visual Design Laboratory (VDL) is to balance the natural beauty of letterforms with rigorous standards for readability and legibility. VDL offers a comprehensive collection known as “VDL Designers Fonts” (VDL??????????), which is sure to resonate with designers seeking a typeface that’s highly individual while maintaining a broad appeal.

By eliminating the decorative elements as much as possible in VDL Logo G, the characters appear much more balanced and consistent. Alignment between horizontal and vertical elements, with kana characters designed to appear slightly larger, keeps a sense of stability and makes this a great choice for logotypes.

VDL Logo G Regular is just one of the 36 fonts now available from VDL in the Typekit library. See the foundry page for the full list.

Jiyu Kobo

Jiyu Kobo was established in 1989, and is perhaps best known for the Hiragino font family that is built into Mac and iOS software. We’re delighted to welcome four fonts from their Yu-Minchotai family to the Typekit library.


Yu-Minchotai R was developed with novels in mind, particularly those seeking a more traditional style that would suit historical settings. The typeface features a combination of contemporary bright Chinese characters with traditional kana characters for its distinctive style.

Yu-Minchotai 5 Kana R and Yu-Minchotai 36 Kana R are designed to be used in conjunction with Yu-Minchotai R. Yu-Minchotai 5 features a classical and soft shape, marked with soft lines; meanwhile Yu-Minchotai 36 features the expressive quality of the writing brush, lending a distinctive style to the overall shape of the characters.

Dai Nippon Printing

DNP has been developing and maintaining the Shueitai type family since the company started (as Shueisha) more than a century ago. Shueitai has been a consistently popular family among publishers and readers alike, thanks to its readability and graceful line drawing. The wide variety of styles packed into the Shueitai collection, including Mincho, Gothic, and Maru Gothic, makes it a fantastic selection for designers working across a wide range of projects with varied needs.

DNP Shuei Mincho Pr 6 L is beautifully used in body text for books and magazines — which traditionally uses Mincho style. The brush styling is especially outstanding in the “?” and “?” characters, with line thickness carefully calibrated to achieve good legibility for readers. Horizontal lines are set slightly thicker than is typical for many Mincho fonts, aiding overall readability with minimal flickering of the thin lines.

DNP is adding a total of 20 fonts to the Typekit library. See the full list on their foundry page.

Fontworks

Fontworks developed alongside the digital revolution in print publishing, providing innovative typefaces to support the move to digital production in Japan. Fontworks is the home of the Tsukushi type family, used in countless publications today. The foundry is a member of the Softbank Technology Group, which puts them right at the source for many important developments in font technology.

The round gothic body of Tsukushi A and B Maru Gothic has proven popular, receiving the 2010 Tokyo Type Directors Club award. Unlike most other round gothic typefaces, tight and small counter spaces in Tsukushi Maru Gothic make this typeface feel less casual and more mature. Fontworks has added a total of 14 fonts to the Typekit library, four of which are from the Tsukushi type family.


TypeThursday: Four new city chapters & San Francisco turns 1!

Mon, 09/18/2017 - 8:12am

Time certainly flies! Our friends at TypeThursday San Francisco celebrate their first birthday on September 21 and we are looking forward to raising a glass to them — quite literally as they’ll have champagne on Thursday night.

Additionally, there will be cake (of course) and a custom letterpress poster to commemorate the occasion. Reserve your spot on the Eventbrite page if you’d like to join the celebration!

“After our first full year, I am delighted by the continued enthusiasm, support, and participation TypeThursdaySF receives from the community here,” says Delve Withrington, SF Chapter Lead. “Attendees have related to me that now they cannot imagine what it would be like without TTSF, and I wholeheartedly agree with that sentiment — the event has become a fixture for those of us in the Bay Area. One we all eagerly look forward to each month.”

In addition to this anniversary, TypeThursday is launching four new chapters in October, including its first international one. Type enthusiasts in ChicagoPhiladelphia, Seattle, and London will now have a monthly gathering spot for type crits and socializing.

“TypeThursday’s international expansion to London is exciting proof of the value we contribute to the communities we serve in six US cities, and now, London,” explains founder Thomas Jockin. “TypeThursday creates space to help the individual practitioner improve their abilities, educates the audience in the thinking behind design, and creates a sense of community among participants with their contributions. Under the fanatic leadership of Julie Strawson and the rest of the TTLondon team, I believe the values of TypeThursday will touch the hearts of Europe.”

Mark your calendars for these remaining 2017 dates (more to be added), and hopefully the Typekit team will be able to join you at one of the many chapters around the globe — we’re proud to be a National Sponsor for the organization!

October November
  • 2nd: New York, Los Angeles
  • 16th: San Francisco
December:
  • 7th: New York, San Francisco

Sites We Like: Mixd & MVMT

Fri, 09/15/2017 - 8:12am

Maybe vowels are a little ovrrtd. But even minimalist language requires type.

In fact, it might be even more crucial, especially for sites like these two where words are fairly sparse. And while both went in a similar typographic direction, subtle differences have a huge impact on what, in both cases, ends up being a successful design.

Mixd

Web design studio Mixd uses classic geometric sans Brandon Grotesque beautifully, with generous spacing that makes each letter shine. Chaparral is a lovely choice for a companion typeface, and also works well with plenty of breathing room — appearing deliberate without any sense of heaviness.

MVMT Watches

Another geometric sans is in play here on the MVMT website — Futura PT, which has a slightly sharper, more precise feel to it. Seems fitting for a website dedicated to timepieces, and thoughtful adjustments to size and weight make this a functional typeface throughout all the site navigation and body copy as well.

Seen some type in use lately that caught your eye? Let us know in the comments, or send us a heads-up on Twitter.


Join us for the Type@Cooper West Fall Lecture Series

Wed, 09/13/2017 - 10:03am

The final section of Type@Cooper West’s 2017 lecture series begins Tuesday, September 19 with Aaron Marcus’s talk “The Past 100 Years of the Future.”

After Aaron’s talk, three more speakers will take the stage this fall. These lectures are all free and open to the public, but it’s never too soon to grab a seat — they do fill up!

We’re pleased to sponsor this series, which takes place at the Koret Auditorium at the San Francisco Public Library Main Branch, 100 Larkin Street. All talks begin at 6 p.m. You can watch videos of the past lectures here.

Type@Cooper West Workshops

Looking for to immerse yourself further in typographic learning? Consider one of the many workshops Type@Cooper West are presenting this autumn:


Say Bonjour to the Typekit Team at ATypI Montréal

Tue, 09/12/2017 - 7:30am

Going to Quebec this week for the 61st annual ATypI Conference? Hopefully we will see you there!

On Wednesday night, Dan Rhatigan, Senior Manager of Adobe Type, presents “Marginalized Typography” at 6 p.m.

Hear a Progress report from the Adobe Typography Customer Advisory Board on Thursday at 9:40 a.m. from member Yves Peters.

Find us Saturday afternoon as Taro Yamamoto, Senior Manager of Japanese Typography, answers the question “Is harmony possible between East Asian and Western glyphs?” at 12:30 p.m.

All three talks take place at the UQAM, Cœur des sciences.

Finally, join us at Atypique After Dark to raise a glass to another successful conference. This Typekit sponsored event takes place at 8 Queen.


Now in Early Access: Visual search on Typekit

Wed, 09/06/2017 - 5:00am

Today we’re rolling out a whole new way to search for fonts visually on Typekit. The first step is one many of you have already mastered: Look for neat type in the world around you.

Our new visual search feature allows you to upload a picture of type—photos of signage or posters, flat artwork, any image file that contains a line of text—and see a list of all the fonts in our inventory that are visually similar to it. We’re launching this as an Early Access feature for now, and we’d love for you to try it out and let us know what you think.

Once you flip on Early Access in your account settings, you’ll see a camera icon in the search field, which toggles open a file selection prompt. You can also drag and drop image files from your desktop onto any Typekit page to start a visual search.

You’ll also see a new Discover section on Typekit.com, which is a quick stop for all kinds of typographic inspiration: visual search, foundries, curated lists, and more.

Getting started with a visual search on Typekit

So let’s say you’ve found some nifty type or lettering on a sign out in the world, and now you’d like to find fonts that are similar to it.

Photo credit: Maria Freyenbacher on Unsplash.com.

Snap a photo of the sign. To start a visual search, turn on Early Access, then use the camera icon in the search bar to select a photo from your hard drive, or (if you’re on your desktop) drag the photo into your browser window.

First, we’ll ask you to select the region of the photo you want to scan for type. We’ll try to select one for you automatically, but you can also move or resize the box to tell us precisely which text to search on.

Next, we’ll try to recognize the text in the sample you uploaded. If we got it right, you can move on to the next step, or else you can update the text to correct it.

Then, finally, we’ll show you a list of similar fonts from Typekit’s inventory.

We don’t hang on to the photos you upload, so be sure to add any fonts you like to your Favorites or take a screenshot of the results page. Some styles will definitely have more relevant results than others, but we’re improving the engine all the time.

So what can’t it do?

At the moment, visual search has some limitations. Toggle on the Tips while working with photos to see a brief guide. Generally, you’ll get best results if you use these guidelines.

  • Type samples that are clear, crisp, and straight on flat backgrounds will yield better, more consistent results. Pictures of text that are skewed, blurry, or low in contrast will sometimes work, but also might confuse the engine and return poorer-quality results.
  • Visual search works with a single line of text. If your image contains multiple lines, use the crop tool to select just one line. We recommend picking a line that has the most distinctive characters, such as Q, R, or lowercase ‘a’.
  • Some letter shapes/styles work better than others. Sans-serif and serif type tend to return better, more consistent results than connected scripts or blackletter, and mixed-case text tends to work better than all-caps or small-caps.
  • Right now we’re only able to recognize and match Latin characters. We are hoping to add support for other scripts in the future.

Above all, this feature should be a lot of fun to try out, and we hope it connects even more people with the type they see around them every day.

Let us know what you think! Spend two minutes on our brief survey, and if you have a whole lot to say feel free to drop an email to support@typekit.com — we’ll be grateful for your feedback.


Improving your web font performance

Tue, 09/05/2017 - 9:14am

We work hard to deliver the best performance by continuously updating and improving our web font service. In the last few years, we’ve added support for asynchronous font loading, language based subsets, HTTP/2, and just last week CSS kits.

But there’s even more you can do on your end to improve performance, which is just one of the topics I get into in the Webfont Handbook — released earlier today with A Book Apart. If you aren’t sure where to begin with your own site, these three optimization tips are a great place to start. I’ll walk through these in a little detail today, but do check out the book for a whole lot more.

1. Review your font usage

The default JavaScript embed code will load all fonts and variations in a kit, even if you don’t use them. You can significantly reduce your kit size if you remove fonts and variations you don’t use.

While you’re in the kit editor, take the opportunity to take a look at your subsetting options. The “All Characters” subset delivers the entire font to your site and usually results in a large kit size. You can reduce the size of your kit by switching to the Default subset, or by using a language-based subset.

It’s worth pointing out that subsetting can also be very dangerous. If you accidentally remove characters that you actually need they’ll show up in a fallback font. When in doubt, the Default subset with OpenType Features checked is the right choice.

2. Load fonts and kits asynchronously

The default JavaScript embed code will load the JavaScript kit in a render-blocking way. However, once the JavaScript loads, the kit will load the fonts asynchronously. Why wait for the JavaScript to load? You’ll get better performance and the same behavior by switching to the advanced embed code; the advanced embed code will load both the fonts and JavaScript asynchronously.

One downside of loading fonts asynchronously is that you’ll need to manage the flash of unstyled text (FOUT) yourself. Typekit has excellent documentation on font events, and the Webfont Handbook goes into great detail on tricks to minimise FOUT.

3. Preload and preconnect

Web fonts are a critical component of your site’s performance; you want your content to appear as soon as possible and preferably in the correct font. You can help the browser prioritize resources by using preconnect and preload resource hints.

Preconnect is used to tell the browser that you’ll soon connect to a hostname. Once the browser sees the preconnect hint, it opens a connection in the background, so it’s ready to use.

Then by the time the browser comes across the Typekit embed code (you’re using the advanced embed code, right?), it can re-use the connection to Typekit’s font network. Doing this can easily save several seconds.

Preload is another resource hint, which not only creates a connection but actually downloads the resource as well so it’s right there when you need it. This can be useful to preload Typekit’s JavaScript or CSS file.

<link rel="preload" href="https://use.typekit.net/abc1def.js" as="script" crossorigin>

<link rel="preload" href="https://use.typekit.net/abc1def.css" as="style" crossorigin>

Preconnect and preload hints are especially useful when you’re using the advanced embed code or a CSS kit. The browser will create a connection, or fetch the kit JavaScript with high priority in the background without blocking rendering. You get the benefits of asynchronous loading and the performance of render-blocking resources.

The Webfont Handbook is packed with insights that came from several years of looking into and following these issues — not only web font performance, but also licensing, text rendering, CSS syntax, and more. If your work regularly involves type on the web, the Webfont Handbook just might be your new go-to guide.


Now in Early Access: Serve web fonts without JavaScript

Wed, 08/30/2017 - 6:06am

We’re excited to ship one of your all-time most requested features: you can now add fonts to your web site using only CSS (Cascading Style Sheets)—no JavaScript required. Also, you can now use fonts from Typekit in HTML email campaigns, mobile articles in Google’s AMP format, or anywhere else CSS web fonts are supported.

Turn on Early Access and you’ll see the new CSS-only embed code in our kit editor, available as an HTML link tag or CSS @import statement. Your existing websites and kits will continue to work with the default JavaScript embed code, and you will now be presented with the new CSS embed code whenever you create a new kit, or when you access an existing kit’s embed code.

CSS kits will finally allow you to use web fonts from Typekit in places our previous reliance on JavaScript prevented us from supporting, such as:

  • HTML email. You can now use fonts from Typekit in emails. Many email clients support HTML and CSS, but not JavaScript. Style your email campaigns with beautiful typography from the Typekit library, and stand out from the rest.
  • Google AMP. You don’t have to sacrifice style for speed – use your Typekit web fonts with mobile article formats to reach a wider audience. Google AMP is now compatible with our CSS embed code.
  • Custom stylesheets. Some web page builders or other web based software (like wikis) allow you to edit CSS but not HTML. You can add fonts from Typekit to those sites by using the @import version of the CSS embed code.

For more details and step-by-step support, check out our guide to getting started with CSS-only web font serving.

Which embed code format should I use?

Either embed code gives you control over the OpenType features and language support in your site’s web fonts; you can still configure these options in our kit editor.

For most web developers, the CSS embed code is the most efficient way to add web fonts to your site. Using only CSS to deliver web fonts allows you to take advantage of newer advances in how browsers load and render fonts, and removing JavaScript code and execution from the loading process should provide a small but welcome speed boost.

The advanced JavaScript embed code is still the right choice for sites that use East Asian web fonts, which depend on our JavaScript-based dynamic subsetting feature for support.

For advanced users or in specific use cases, our JavaScript embed code gives you fine-tuned control over how fonts are loaded.

  • If you don’t want to block the page until fonts are loaded, use our advanced embed code with async: true turned on. This will result in an initial flash of unstyled text (FOUT), but will allow your page content to load immediately, with fonts swapped in as they are loaded by the browser.
  • Network blips, routing failures, or service downtime could all potentially affect your fonts. The advanced embed code gives you control over functionality such as font loading behavior and timeouts.
  • The advanced embed code loads both the JavaScript file and fonts asynchronously into your site for optimal performance.
Browser support

All of the same browsers and versions that currently support JavaScript web font serving will also support CSS web font serving. See a detailed listing of support.

We want your feedback!

We release features into Early Access because we feel confident that they are ready to use, and we’d like you to give it a try, test its limits, and let us know how you feel about the change before it becomes a core part of our product.

Please give us your feedback via the comments, Twitter, or directly to our support team at support@typekit.com. We hope you enjoy the new simplicity of using Typekit in your web projects as much as we do!


Major update to our FontFont collection

Thu, 08/24/2017 - 6:04am

Monotype’s FontFont library was one of the original offerings in Typekit in 2009 back when we were only a webfont service. We’re pleased to announce that an additional 230 FontFonts are now available for sync in the Typekit library.

We’ve also put an extensive collection of over 700 FontFont typefaces on Typekit Marketplace for individual purchase, which you do not need a paid Creative Cloud subscription to use. With an Adobe ID, you can sync purchased fonts via the Creative Cloud desktop app. The fonts are then yours to use in any desktop application, and can be hosted on the web via Typekit as well. Read on for a brief overview of what we love in the FontFont collection, or jump directly to their foundry page to see for yourself.

FF Real is an entirely new family on Typekit. Designed by Erik Spiekermann and Ralph du Carrois, it was originally conceived by Spiekermann to use as the text face for his biography. The family has been recently expanded to include 52 styles divided between FF Real Text and FF Real Head, including italics. For a grotesque typeface, there’s an unusual and impressive focus on legibility; in the Text version, features like the curved foot of the lowercase l and crossbars on the uppercase I contribute to this.

FF Ernestine, by Nina Stössinger, is a slab serif that stands out from others in its genre. For starters, that could be recognized anywhere. The whole design is influenced by choices to make it more open and friendly: ball terminals and large x-height, along with open counters and round shapes. Stössinger took care to design each style separately, rather than automating their variation in weight. This makes each style work well in its own right, without the context of the others. A special addition to Ernestine and included in the font is its Armenian version, designed by Hrant Papazian.

FF Dax brings a humanist touch to a minimal sans typeface. Hans Reichel’s choice to eliminate stems on characters such as the lowercase a and u gives the typeface a casual aesthetic, while all other features are polished. This style influenced countless designs to follow. When spacing is tight, we also have the Dax Compact styles ready to sync.

We have a total of 38 FontFont families available on Typekit. Take a look at the list here or check out their foundry page to see it all in the same place — and let us know where you use them!

FF Amman Sans
FF Amman Serif
FF Angie
FF Avance
FF Basic Gothic
FF Brokenscript
FF Carina
FF Chambers Sans
FF Cocon
FF Dagny
FF Dax
FF Duper
FF Enzo
FF Ernestine
FF Folk
FF Ginger
FF Good
FF Info
FF Karbid
FF Kava
FF Mach
FF Market
FF Meta
FF Meta Serif
FF More
FF Nuvo
FF Prater
FF Providence
FF Real Head
FF Real Text
FF Speak
FF Spinoza
FF Tisa
FF Tisa Sans
FF Typestar
FF Uberhand
FF Utility
FF Zwo


See you at TypeCon

Mon, 08/21/2017 - 9:59am

TypeCon 2017: Counter starts on Thursday and the Typekit team is ready to see many of you in Boston this week.

We’re pleased to be a Banner sponsor of the conference this year. Several folks from our team will be attending all the sessions and events throughout the week, so look for us and say hello. We’ll be out in full force at the events below:

Friday, August 25

The SOTA Spacebar returns this year! The TypeCon folks describe it as “a game, wrapped in a conversation, finished with a selfie,” and our own Ariadne Remoundakis is on the list of type celebs to meet. Everyone who completes the challenges will get a Typekit Swag Bag and one lucky winner will join the Typekit team for drinks and conversation on Saturday before the Type Quiz.

On Snapchat? Make sure to use the Spacebar geofilter to tag those 24 hour memories.

After the party, Briar Levit screens her documentary, Graphic Means (another project we’re happy to support).

Saturday, August 26

Masataka Hattori presents “Fundamentals of Japanese Metrics Editing” at 11:50 a.m., an excellent opportunity for those wanting to learn more about Japanese font (and font-design tool) development.


Introducing Pelago from Adobe Originals

Thu, 08/17/2017 - 7:59am

Pelago is a semi-formal sans-serif type family with a crisp contemporary appearance and an understated elegance that lends itself to wide range of applications, ranging from the most demanding text-based web and print communication to expressive display work.

At display sizes Pelago exhibits subtly swelling stroke endings, animated letter counter shapes, and a moderate degree of stroke modulation — qualities derived from both humanist handwriting and Roman inscriptional lettering. At smaller type sizes these expressive accents recede, revealing a clear and very readable text face that doesn’t suffer from the structural rigidity found in conventional sans-serif designs.

Pelago includes six weights with matching italics, and supports multiple figure styles as well as small caps for more advanced typographic needs. Its broad language coverage includes Greek, Cyrillic, and extended Latin.

All weights are available on Typekit, and you can purchase the whole collection on Fontspring.


©2003 - Present Akamai Design & Development.