All posts tagged ‘typography’

Improve Your Website’s Typography With Kern.js

Web typography used to be something of an oxymoron, but recent browser advances and tools like Typekit have helped bring web typography out of the dark ages with custom fonts. Thanks to JavaScript libraries like Lettering.js you can tweak those custom fonts — targeting specific words or letters — and adjust them to your liking.

Lettering.js even makes it possible to do custom kerning on the web. Kerning refers to the space between characters in proportional width fonts. CSS has long offered the letter-spacing property, but because it applies to an entire element — for example an h2 tag — what you’re really doing with letter-spacing is adjusting the tracking.

To actually control kerning you need to target each letter individually. Because Lettering.js can wrap each letter in your text with span tags, you can then target each span separately, adjusting the spacing of individual letters, or, kerning.

But, handy as Lettering.js is, tweaking the letter-spacing, hitting refresh, tweaking some more and so on is still a rather tedious way to improve your kerning. That’s why designer Brendan Stromberger created the Kern.js JavaScript bookmarklet. Used in conjunction with Lettering.js, Kern.js allows you to adjust kerning by simply selecting and dragging letters (or you can use the arrow keys). Kerning adjustments can be made in pixels or ems, so even you if you have a liquid layout there’s no reason you can’t get in on the kerning fun. Once you’ve got your kerning looking the way you’d like, just hit the “finish editing” button and Kern.js will spit out the necessary CSS to apply.

Kerning is admittedly a somewhat nerdy pursuit in a field that’s already pretty nerdy to begin with, but if you’ve developed an obsession with good looking typography, you know that there’s more to it than just dropping in some Typekit fonts. Thanks to Lettering.js and Kern.js, you can finally improve kerning on the web without the tedium of endless page refreshes.

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:

File Under: CSS, Visual Design

Lettering.js Makes Complex Typography Easy

CSS 3 adds some awesome new tools to web designers’ toolkit — the ability to rotate, transform and tweak elements means complex layouts can be done with nothing more than some style sheet rules.

Combine that with some of the fancy new fonts available through web services like Typekit and Fonts.com and you’re well on your way to replicating the kind of fine-tuned typography control print designers have long enjoyed. However, targeting individual letters and words can still be tricky.

That’s where Lettering.js comes in. The JQuery plugin can wrap your text with span tags, allowing you to target CSS rules to individual letters, words or sentences.

If you wondered how the designers behind the Lost World’s Fairs CSS experiment did it, well, look no further than Lettering.js. The other showcase examples on the Lettering.js website are no less impressive.

The library, which requires JQuery, can be downloaded from Github. Using it is as simple as selecting the element you want to target and applying the appropriate function — basically, whether to wrap the letters, words or lines of your target element.

One thing to note, the developers recommend putting Lettering.js in your head tags to avoid the unsightly flash of unstyled content that can occur if you include it at the bottom of your page.

See Also:

File Under: APIs, Fonts

Typekit Gets an API

Font startup Typekit introduced an API Thursday that lets web programmers generate kits from the Typekit library behind the scenes.

The company has previously only offered the option of picking fonts and generating kits using the web-based tool on its site. But by releasing an API, it’s giving people the option of building Typekit into their own apps or simply extending the way they use the service.

Writing on the Typekit blog, Paul Hammond says: “The Typekit API gives you the ability to programmatically create, modify and publish kits. It also allows them to fetch metadata about all the fonts in the Typekit library.”

Here are the documentation pages. As you can see, the Typekit API returns data in a few different flavors (JSON, XML and YAML)

There’s an example page set up on Github, and while there isn’t much there yet (just a kit generator for Ruby) we can expect more soon.

If you haven’t yet explored Typekit’s service for including fancy fonts in your site designs, you should. Especially handy is the WebFont Loader, an open source library of scripts that Typekit developed to help eliminate the “flash of unstyled text” that happens when a page loads. The WebFont Loader offers a number of JavaScript events which allow developers more control over when and how their fonts are loaded onto the page.

See Also: