All posts tagged ‘Fonts’

Adobe, Google Partner for Edge Web Fonts

Adobe Edge Web Fonts service. Image: Screenshot/Webmonkey.

As part of its new Edge Suite of tools for web developers Adobe has announced Edge Web Fonts, a new free service much like Google Web Fonts.

In fact Adobe has partnered with Google to make most of Google’s open source fonts available through Edge Web Fonts as well. Both services also include the Source Sans Pro open source font family Adobe released earlier this year and the brand-new Source Code Pro.

The full list of fonts available through the service can be found on Adobe’s new Edge Fonts site, though sadly there’s no way to preview them. Previews of what Adobe’s Typekit blog calls the “more popular” options can be found on the Edge Web Fonts page.

Adobe also plans to work with Google to improve many of the fonts, adding hinting for better rendering at smaller sizes and optimizing other aspects for better-looking, better-performing fonts. The company plans to open source its improvements so even if you prefer to stick with Google Web Fonts you’ll still eventually have access to better looking fonts.

So why go with Adobe’s new Edge Fonts over Google’s existing service? There’s really no advantage if you’re already happy with Google’s offering, especially if you’re downloading Google’s fonts and serving them yourself, since that eliminates the chance that Adobe’s (or Google’s) servers will go down and take your fonts with them. Of course Edge Fonts is powered by Typekit, which has proved itself reliable over the years.

For more info on Adobe Edge Web Fonts head on over to the Typekit Blog, or check out the sample code to take them for a spin on your site today.

[Update: Developer Tony Stuck has put together a very nice preview page of the Adobe Edge Fonts for those that would like to actually see the fonts before diving in, which, presumably, is everyone.]

File Under: Visual Design

Source Sans Pro: Adobe’s First Open Source Type Family

Image: Adobe

Adobe has released a new open source font family by the name of Source Sans Pro.

You can check out and download the various font weights and styles in both OTF and TTF formats from Adobe. There’s a PDF glyph sample available as well. Both Adobe Typekit and Google Web Fonts are serving up hosted copies, if you’d like an easy way to use Source Sans Pro on your website.

Source Sans Pro makes a nice headline font on the web, with a nod to classic News Gothic headline fonts of the early 20th century.

Adobe typeface designer Paul D. Hunt created Source Sans Pro. “I was drawn to the forms of the American Type Founders’ gothics designed by Morris Fuller Benton…. I have always been impressed by the forms of his News Gothic and Franklin Gothic,” writes Hunt on the Adobe Type Blog. The goal behind Source Sans Pro was to create a font that’s “both legible in short UI labels, as well as being comfortable to read in longer passages of text on screen and in print.”

Adobe’s plan is to use the new font in its open source applications, and indeed Source Sans Pro is already part of the WebKit-based code editor, Brackets. An earlier incarnation was used in the Strobe Media Playback framework. (in Strobe, Source Sans Pro is known as Playback Sans).

In addition to the font itself, Adobe is releasing the underlying source materials so that anyone who’d like to can modify Source Sans Pro to suit their whims. Source Sans Pro is available under the OSI-approved SIL Open Font License.

Decoding Web Fonts With ‘What Font’

What Font shows you which font a webpage is using

Designers have been bemoaning the state of typography in the browser since the dawn of the web. However, CSS 3 and the @font-face rule go a long way toward improving your font options. Throw in tools like lettering.js and easy-to-use font services like TypeKit and it’s not hard to turn your site into something from a typography nerd’s fantasies.

The days of only six font choices on the web are, thankfully, well behind us. Now you can choose from hundreds of fonts, whether you embed your own or use a service like Typekit. We see gorgeous typography on different sites everyday and sometimes we’re left wondering, what is that cool font?

That’s why we’re loving the What Font bookmarklet from developer Chengyin Liu. What Font is a little JavaScript bookmarklet you can add to your favorite browser and then, when you want to know which font a site is using, just click the bookmark and hover the text in question. What Font will hover a small transparent overlay with the typeface name (see screenshot above).

To try it out, head on over to Liu’s site and drag the bookmarklet to your browser’s bookmarks bar.

It’s worth noting that you can get the same information from Firebug or the WebKit Inspector, but What Font doesn’t have the interface overhead of Firebug or WebKit’s developer tools — it just does one thing and does it well. Couple the What Font bookmarklet with FontFonter and you can preview your website in your favorite new font in no time.

See Also:

File Under: CSS, Fonts, Visual Design

Good Web Typography Is Easy With Type-a-File

The web is awash with CSS frameworks. But, while frameworks can be great for prototyping and quick mockups, they’re often overkill for most projects. It’s also pretty rare to find a framework that meets all of your design needs.

If you’re just looking for a way to get some great typography on your site, but don’t need a grid or other tools that often come with a full-blown framework, check out Type-a-File. Type-a-File isn’t exactly a framework, it’s more specific — a set of typography styles that you can adapt into your CSS.

Type-a-File is the work of designer Russ Maschmeyer and currently offers eight different typographic style sheets, designed, in Type-a-File’s words, to “give your web typography a head start.”

The style sheets takes advantage of some of the new features in CSS 3 like column-count and border-radius, as well as services like TypeKit for fancy fonts. Fortunately, the vast majority of the rules aren’t based on the still-nascent CSS 3 spec, so nearly all the effects will work in older browsers as well.

In addition to basic rules for typographic elements — h1-6, p, lists, cite and so on — Type-a-File has a few classes you can apply to pull quotes, create “kickers” or “sidenotes” and change default headings.

Type-a-File is released under a Creative Commons Attribution license, so if you’d like to take one of the eight example style sheets and use it to build something of your own you’re feel to do so. You can even submit it back to Type-a-File for inclusion on the site.

Photo by the four elements/Flickr/CC

See Also:

Adobe Shows Off Fancy WebKit-Based Typography

Typography on the web has improved by leaps and bounds since the dark days of the blink tag, but it’s still a long way from ideal.

Sure there are great ways to serve custom fonts, and you can even use JavaScript libraries like Lettering.js for even more control over your layout. But when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.

The demo movie above from Adobe shows off some WebKit-based experiments that seek to change that. Adobe Engineering VP Paul Gubbay narrates and the demo, and he shows how his team is extending the WebKit browser to do some new typographic tricks. WebKit is the open source engine behind Safari and Google Chrome, and it powers the most popular mobile browsers like the ones on the iPhone, iPad, iPod and all the Android phones. The demo certainly shows some impressive results.

However, we’re a bit suspicious of the methodology behind the results. Gubbay talks about extending WebKit’s CSS support via vendor prefixes, but neglects to mention what those prefixes are built against — in other words, there’s no mention of submitting a standard that other browsers could work from.

In fact, while the demo is pretty cool, the whole overview is too vague to say much about other than, “that would be nice.”

Also, note to Adobe, you don’t need to work with Google to work on WebKit. It’s an open source project. You can just submit your patches (instructions are here).

[via John Nack]

Update: The original post got Paul Gubbay’s name wrong. We have updated it. (Sorry, Paul!) Also, be sure to read his response in the comments.

See Also: