Tag Archives: Fonts

The New Face of Google Web Fonts

As we talked about at our Google IO session, the Google Web Fonts team has been hard at work designing a new font browsing experience for www.google.com/webfonts. Today, this new interface is available for you to try! Just click here, or you can click the New Version link at the top of our current product. The interface has a lot of the features you've requested, including the ability to preview your own custom text, the ability to compare fonts side-by-side, as well as an indication of page load times.


To arrive at the final design, our team spent significant time researching how users pick which fonts to use on your web pages, blogs and projects. Based on our findings, we sketched out dozens of possible ways to design our font browsing experience. After many iterations of testing with our test users, we believe we've arrived at a font browsing experience you'll really like.

Our primary goal with this new interface is to ensure that as the library of free, open source web fonts grows, you can still browse the library quickly and easily. To accomplish this goal, we've introduced the concept of a collection, which is similar to the concept of a shopping cart on your favorite ecommerce website. Just add fonts to your collection, and then proceed through the Choose, Review and Use steps. During this process, you can compare them side by side, experience with them in sample layouts using the new Test Drive feature, and finally copy and paste the HTML snippet to use these fonts in your pages.

During our user studies, we noticed that when users proceeded to select a font, they have a certain use case in mind. In other words, they knew they were looking for a font for a logo, for a heading or for body text. So we designed 3 different viewing modes - Word, Sentence and Paragraph - to facilitate font browsing in each of these cases. By default, you are in Sentence mode, which shows about a sentence length of preview text. But when you switch to Word mode, the font preview size increases, and the font cards shrink so you can see more fonts on the screen. When you switch to Paragraph mode, the text size will shrink significantly, and you'll see the fonts used in sample paragraphs instead.


Second, the new interface allows for easy font browsing by weight. Just use the thickness filter in the left hand panel. Looking for an Ultra black font? How about Ultra Light? Look no further. This feature relies on the font technology of TypeDNA. The Google Web Fonts are analyzed to determine each font's specific boldness characteristic. In this way, you see a consistent level of boldness across the fonts in your filter, regardless of how the font designer originally categorized them.

The new interface introduces the Test Drive module, which allows users to visualize their font collection in a sample layout. In this way, you can see what your fonts look like in practice, before embedding them in the final product. To take your fonts for a test drive, click on the Test Drive tab from within the Review step.

And finally, the new interface has a final step, Use. Here you'll find an indication of page load time based on your font selections. It's important to remember that the more fonts you use on your page, the more font data needs to be downloaded before your users can use your pages. Although Google Web Fonts is highly optimized to serve web fonts quickly to any user in the world, it's always important to request only the font families and styles you intend to use on your pages.


Sometime in the next few weeks, this interface will replace the current homepage at www.google.com/webfonts. But until then you can give it a spin and let us know what you think.

Posted by Jeremie Lenfant-Engelmann, Engineer, Google Web Fonts

Interview with Argentinian Type Designer Pablo Impallari



Pablo Impallari's Lobster font is one of the most popular fonts on the web. Its exciting design, excellent OpenType features, constant development and inclusion in the launch of Google Web Fonts last year have made it a favourite for millions of people.

Pablo continues to actively design and release his own typefaces and help other designers learn and publish new fonts. You can see all his fonts and read more about Pablo on his Google Profile.

Q: What inspired you to create the Dancing Script font?

I love scripts, both formal and casual. For Dancing Script, my inspiration came from the many casual scripts of the 1950s. "Murray Hill" and "Mistral" were the two main references.

Q: Did you try to accomplish something specific with this font, and did you succeed?

I wanted to create an informal flowing script where the letters bounce up and down the baseline. And to keep it friendly and legible at the same time.



Q: What kinds of documents are most appropriate for this font?

Any place where Arial and Times New Roman look boring. Informal invitations, party flyers, Happy Birthday cards... you name it! Its better to use it together with sans-serif fonts, so the spontaneous effect is enhanced through visual contrast.

Q: Designing a new font is a long journey. What inspires you to keep motivated throughout all the different stages?

If you look at the whole picture, thinking that you have to complete more than 200 glyphs, that can be overwhelming. But if you goes one letter at the time you get little "Eureka moments" each time you get finish a glyph. That motivates me to move on to the next one. Also, being able to write more words every time a new letter is added feels fantastic.

Q: What is your favourite part of the type design process, and why?

Designing the lowercase letters. Don't really know why... maybe because this is where everything else is defined.

Q: Can you recommend how other type designers can learn the skills involved in making a font like this?

Doyald Young's books are mind blowing. I encourage everyone to buy them. Sadly Doyald passed away recently and he surely will be missed!

Q: What are your favourite fonts, and why?

So many...

Young Galland and Young Finesse from Doyald Young, they are just perfect!

Montague Script from Stephen Rapp, its a truly lively script.

Pooper Black and Sneacy from Michael Clark, for the same reason.

Cabazon from Jim Parkinson, a legible, friendly Blackletter.

Tyffany and Ronaldson, for they spikey caps.

I can continue forever... There is always something to love in almost every typeface.

Q: What do you think could be improved about the type design process?

Hinting TrueType fonts is very hard to do. On Type 1 or OpenType-CFF fonts, that was not really a big problem since their hinting is much easier and looks much better. But since TrueType fonts are coming back for the web, TrueType hinting is important once again. This is my new reason to hate IE. Having a nice TrueType autohinter would be great!

Posted by Dawn Shaikh, Senior User Experience Researcher, Google Web Fonts

Streamline your web font requests. Introducing “text=”

Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you’ll need. This often occurs when you’re using a web font in a logo or heading.

That’s why we’re introducing a new beta feature to the Google Web Fonts API. The feature is called “text=”, and allows you to specify which characters you’ll need. To use it, simply add “text=” to your Google Web Fonts API requests. Here’s an example:
<link
  href='http://fonts.googleapis.com/css?family=Special+Elite&text=MyText'
  rel='stylesheet' type='text/css'>

Google will optimize the web font served based on the contents of this parameter. For example, if you only require a few letters for a logo, such as “MyText”, Google will return a font file that is optimized to those letters. Typically, that means Google will return a font file that contains only the letters you requested. Other times, Google might return a more complete font file, especially when that will lead to better caching performance.

The “text=” parameter has the potential to dramatically cut down web font file size. In some preliminary studies, web fonts can be cut from 35k down to just 5k (or even smaller), if only short strings of text are required. If you have a longer string, you can shorten the request by removing duplicate characters, as the order of characters in the string doesn’t matter.

The effect of this feature is even more pronounced on mobile devices, where connection speeds are limited. Using the text= parameter, you can ensure your users will have a great, quick loading experience.

We’re happy to say that the feature also works for international fonts. There’s no need to also specify the subset= parameter, as text= has access to all the characters in the original font. To access Unicode characters, use standard technique of url-encoding the UTF-8 representation of the string. Therefore, ¡Hola! is represented as: text=%c2%a1Hola! .

Enjoy!

Posted by Raph Levien, Engineer, Google Web Fonts

Using UX Research to make Google Web Fonts even better!

Late in 2010, our team spent hours learning more about our users through surveys and traditional usability methods. In our survey, users spoke up loud and clear - “We want more fonts!” We are working hard to add new fonts with 35 font families added since December. What did users like best about the Google Font Directory? It is easy to use, available, dependable, and it has decent font choices and features... all at a great price - free!


What new features would you like to see added to the Google Font Directory?
More fonts! (More in general, international fonts, basic fonts, more weights/variants, & specific fonts)



What, if anything, do you like best about the Google Font Directory?

During our usability sessions, we were able to see many types of users interact with our web fonts. We identified major user groups and documented their typical workflow. The research we conducted took us to the brainstorming table. Our whole team spent an entire day brainstorming goals and priorities based on user research. The brainstorming day was followed by a design sprint in our Seattle office. Four talented Google designers and other team members spent five full days working through hundreds of mocks and design concepts. Stay tuned for the results of this effort!

So what’s next? More user testing, of course! Our engineers and user experience team have been busy working on ideas from the design sprint, and we are ready to get some feedback. If you would like to help us, sign up here!

Brainstorming involved lots of discussions & lots of stickies!



Hard at work in the design sprint.

Sign up to help us make Google Web Fonts even better!
http://goo.gl/1hmDN

posted by Dawn Shaikh, Senior User Experience Researcher, Google Web Fonts

Introducing Expletus Sans

Expletus Sans was added to Google Web Fonts this week.

Jasper de Waard, born in 1996, first came in contact with the beauty of type design when he was 10, and developed his skills as a type and graphic designer ever since. He was born and raised in Rotterdam, the Netherlands, and went to a bilingual high school there, training him to read and write English fluently and have a more international focus. He is currently in his third year, three years before his exam. He hopes to continue his practices in the fields of type and graphic design after he finishes school and release many more typefaces in the future.

His love for the tiny details, balance in proportions and urge for perfection made him into what he is today. However, the great support and feedback from people on several forums can't be denied as a great source of inspiration and evaluation material, giving him a greater understanding of the method behind type design. He is also available for custom type work and identity design.




Q: What inspired you to create the font?

It was a single x in a logo that started me off, but it was largely a search for my own opinions in type design so in a way you could say Expletus Sans was 'self-inspired'.

Q: Did you try to accomplish something specific with this font, and did you succeed?

I wanted to create a look that was completely different from everything I knew. I feel like I definitely succeeded in this.

Q: What kinds of documents are most appropriate for this font?

It could be used for anything that needs a good dose of elegance. I would personally love to see it in identity work.

Q: Designing a new font is a long journey. What inspires you to keep motivated throughout all the different stages?

Ones I put my mind to something, I finish it. With designing a typeface I feel like I have no choice. Once I've started, I get obsessed with perfection. Apart from that, it was the many great responses I got on the internet on my work that kept me motivated.

Q: What is your favourite part of the type design process, and why?

The very beginning. Trying to work out the basic lines of a concept and see the skeleton of the typeface emerge. It pleases me most, because it's the fastest and most rewarding process. After that it's months of tiny little details.

Q: Can you recommend how other type designers can learn the skills involved in making a font like this?

Start drawing or straight on the computer and post your work on as many type-related websites as you can think of. Take your time to read through feedback and never dismiss an idea before you have seen it. Don't give yourself a deadline. You'll never make it in time.

Q: What are your favourite fonts, and why?

All fonts by Robert Slimbach, because of his brilliant eye for perfection. Dolly, because of it's comfortable, yet fresh feel. The Centro superfamily, for excellence throughout all styles. Many more, for even more different reasons.

Q: What do you think could be improved about the type design process?

Multiple Master should be used more extensively and automated processes like iKern are underrated.

Q: How do you feel about publishing your font as an open source project?

It just happened to me. I never particularly thought about it, until you knocked at my door. It seems like a good way to start and increases the chance of seeing my work in use. I feel like it gives me the chance to make the world just a little bit more beautiful and let others enjoy that too, without charge.


Posted by Dave Crossland

Google Web Fonts – New Stats, New Name

Web fonts are taking off in a big way. Back in November, the Google Web Fonts team first published stats on the rapid adoption curve of the Google Font API. Then, Google was serving approximately 17 million daily font requests[1] to roughly 400,000 unique websites[2].

And today, less than 4 months later, we’re excited to announce that Google Web Fonts has since grown by another 290%. The Google Font API now serves roughly 50 million daily requests[1], across roughly 800,000 unique websites[2]. This equates to over 30% month over month growth. Amazingly, these stats don’t factor in caching, so the actual views of Google Web Fonts may far exceed these numbers.



Growth picked up considerably after Google Web Fonts announced over 20 new font families for the New Year. From these numbers, it’s clear that web fonts are quickly becoming part of the standard practice of web developers, game developers, and bloggers.

To make it easier for all, we’re also pleased to announce a re-branding of the “Google Font Directory” to “Google Web Fonts.” The service is now available via the simple, memorable URL: www.google.com/webfonts.

Web fonts are on their way to changing the very fabric of the web, and this is very exciting to Google.

Here’s to a beautiful web!

Posted by David Wurtz, Product Manager, Google Web Fonts

[1] A request is a single call to the Google Font API for one or more fonts.
[2] We count a unique website as unique domains, except that “www” subdomains are not counted. For example, www.myblog.com and myblog.com would count as one domain. However, sam.myblog.com and sally.myblog.com would count as two domains.