Webmonkey » typography

Learn Typography Basics With ‘On Web Typography’

Scott Gilbertson — Mon, 11 Feb 2013 19:32:19 +0000

Web typography has come a long way from the days when the only way to get a custom typeface on a page was with images created in Photoshop. These days, thanks to widespread browser support for CSS @font-face and services like Typekit, a couple lines of code will add actual font files to your pages.

Go back to 2001 with that information and you would blow many a designer’s mind.

Of course if you’re not a designer, today’s overwhelming variety of type possibilities can be overwhelming. For some help deciphering it all and navigating the sometimes complex world of web typography, check out the video above of Typekit’s Jason Santa Maria‘s talk “On Web Typography.” The video comes from An Event Apart Boston in June of last year, but was only recently made available online (note that Santa Maria has since left Typekit).

After a whirlwind tour of the history of online typography, Santa Maria explores typography from a newcomer’s perspective, looking at how typography affects how you read and how to choose and combine typefaces for a better looking, easier to read site. It’s about an hour long, but you’d be hard pressed to find a better intro to and overview of the art of typography.

‘Interactive Guide’ Teaches the Basics of Good Web Typography

Scott Gilbertson — Wed, 19 Dec 2012 16:47:01 +0000

Image: Rob McKaughan/Flickr

Good web typography needn’t be difficult, but typography can be a complicated and sometimes intimidating subject for newcomers.

To help you understand typography a bit better — and create better-looking websites with your new understanding — developer Tommi Kaikkonen created his Interactive Guide to Blog Typography. The guide offers a nice hand-holding walk through of the elements that make for good typography on the web, helping you not just make more readable sites, but understand why they’re more readable.

For most suggestions in Kaikkonen’s guide there’s an interactive button to toggle different line-heights, fonts and measures so you can see for yourself why those elements matter and how they contribute to making your site easier to read.

Among the suggestions in Kaikkonen’s guide are to set a readable measure (the number of characters on a line), frame content with white space (to put emphasis on the main part of the page), avoid pure black for text and, unless you really know what you’re doing, stick with just two different fonts.

There is one part of the guide we can’t totally endorse — the last suggestion, which is to use font-variant: small-caps; even if the font you’re using doesn’t actually have a small-caps variant. With some fonts — the traditional six fonts of web design, for example — you can get away with this, but if you’re using fancier fonts like those from Google Web Fonts or TypeKit this can make for some really awful results; proceed with caution on that one.

Exercise Better Web Typography With CSS Hyphens

Scott Gilbertson — Wed, 28 Nov 2012 20:52:54 +0000

Forget The Homer; look at those sweet, sweet hyphens. Image: Screenshot/Webmonkey.

Last night, while reading Craig Mod’s excellent article, Subcompact Publishing, I noticed something that only type-obsessed nerds probably notice: some really good-looking hyphenation. A quick right-click to “inspect element” revealed this gem: -moz-hyphens: auto;.

It’s true; while we were sleeping Firefox, IE 10 and Safari all implemented the CSS hyphenation spec. In fact, Firefox has had hyphenation support for over year (starting with version 6). Sadly, Chrome doesn’t support hyphens just yet, nor does Opera. Still, if you’d like to do something really simple that will vastly improve the readability of your text for Firefox, IE 10 and Safari users, add this to your site’s stylesheet:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

Right now the -o- prefix isn’t doing anything, but it future-proofs the code a bit for when Opera adds support. The only catch to hyphenation is that not only does the browser need to support it, it also needs to have a hyphenation dictionary for the language you’re using. The Mozilla Developer Network has a good rundown of which browsers support which languages.

There’s no real need for a fallback since the web has never had any hyphenation. Browsers that don’t support the CSS hyphens rule will simply render the page as they always have, but those that do will now be a bit more readable.

And, as a kind of footnote, if you have any interest in the future of publishing, Subcompact Publishing is well worth a read.

[Update: It looks like developer Peter Paul Koch just noticed hyphenation support as well. He's got a short post that notes one potential problem with hyphens that I missed: you need to explicitly declare a language, as in in order to trigger hyphenation. See Koch's post for more details.]

Responsive Design Tricks: Fluid Typography With CSS 3

Scott Gilbertson — Wed, 08 Feb 2012 19:07:04 +0000

Photo: Ariel Zambelich/Wired.com

Building responsive websites means that your design has to adapt to different screen sizes. That there is no such thing as “pixel perfect” has long been a maxim of good web design, but nowhere is this more true than when you start working with percentage widths, em-based type and other flexible techniques of responsive design. While fluid grids, adaptive images and other tools help, sometimes even basic things like the flow of type can look wrong without a little extra help.

One common problem when designing for multiple devices is handling the changes that happen when the user rotates the screen. It’s frustrating to see your elegant portrait-oriented designs fall apart as the device moves to landscape mode (or vice versa). Frequently the problem is that images, videos and other embedded content in your page is sized in relation to the pixel width of the viewport, but the type is not. That means that the type fails to adapt to layout changes, leaving ugly gaps, whitespace or hard-to-read, overly long lines.

There are a number of ways to solve this problem, but one of the simplest and easiest is to use fluid typography in addition to your fluid grid. BBC developer Mark Hurrell wrote up an excellent tutorial some time ago that shows how, by specifying font sizes in rems, you can “adjust every font-size on the page by using media-queries to change the font-size set on the BODY or HTML element according to viewport width.”

To find the right size type for various screen widths, Hurrell calculates a resolution-independent font scale based on target widths. That is then applied using a series of media queries and the new CSS 3 unit rem. The rem unit means ems relative to the root (the HTML) element. That means your type gets proportionally larger overall, rather than in relation to its parent element as would happen with a simple em. As Hurrell notes, support is pretty much universal on tablets and phones (browsers that don’t support it will fall back to px sizing, so all is not lost).

In the end what you get using rems and media queries is fluid typography that scales just like a fluid grid. That means that when the device rotates the type resizes to fit the new screen dimensions. For more details on how to make it work on your site be sure to check out the Responsive News blog post, which also has a few links to websites already using this trick.

Thinking with Type: Brush Up Your Typography Skills

Scott Gilbertson — Fri, 11 Nov 2011 16:29:29 +0000

The power and potential impact of typography on the web has grown by leaps and bounds with the advent of widespread browser support for @font-face and font hosting services like Adobe’s Typekit.

Of course with new tools come new problems. Many web developers don’t know much about fonts and typography. After all it used to be there were only six reliable font choices on the web — why bother learning about something you couldn’t use? But that, like so many other things in web development, is no longer true.

If the web’s newfound typography options leave you feeling a bit behind, head over to Ellen Lupton’s Thinking With Type website. The site is a goldmine of information on typography dos and don’ts both on the web and off. The site is not, however, so much about fonts, but rather about type as a visual element and what it can do (both good and bad) within a design.

If you’ve ever wondered why your small caps don’t look right, how to properly kern text or how you can use contrasting font weights to create more visually engaging banners, Thinking With Type has the answers for you.

There’s even a section on working with multi-column grids, something that will hopefully be possible in the near future as more browsers begin to support the various CSS grid layout systems.

The Thinking With Type website is a companion to Lupton’s book of the same name, which is well worth picking up if you have any interest in learning more about typography.

See Also:

Improve Your Website’s Typography With Kern.js

Scott Gilbertson — Tue, 17 May 2011 15:19:00 +0000

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:

Good Web Typography Is Easy With Type-a-File

Scott Gilbertson — Thu, 04 Nov 2010 17:34:51 +0000

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

Scott Gilbertson — Tue, 02 Nov 2010 18:58:26 +0000

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:

Lettering.js Makes Complex Typography Easy

Scott Gilbertson — Tue, 02 Nov 2010 18:44:29 +0000

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:

Typekit Gets an API

Michael Calore — Thu, 29 Jul 2010 17:54:27 +0000

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: