Tags: type

State of Web Type

Like caniuse.com, but for typography features. Find out what’s supported in browsers today.

Alien | Typeset In The Future

Typeset In The Future is back with another cracking analysis. This time—following on from 2001 and Moon—we’ve got Alien.

In her final recorded message before hypersleep, Ripley notes that she is the sole survivor of the Nostromo. What she forgets to mention is that she has not once in the past two hours encountered any Eurostile Bold Extended.

Beautiful web type — the best typefaces from the Google web fonts directory

Many of the free fonts available from Google are pretty bad, but this site showcases how some of them can be used to great effect.

The Scourge of Helvetica Neue Light | Clagnut

Richard never rants.

Here’s Richard ranting.

Tobias Frere-Jones: My Kind of Neighborhood

Some sleuthing uncovers an interesting twist in New York’s psychogeography:

All of the buildings have been demolished, and in some cases the entire street has since been erased. But a startling picture still emerged: New York once had a neighborhood for typography.

Meyrin: CERN Terminal Font « optional.is/required

Here’s the font that Brian created at the line-mode browser hack day at CERN.

FIRST web page viewed by “FIRST” browser via c.1965 modem and terminal - YouTube

What a wonderful way to go online!

Type Connection

A cute approach to pairing typefaces: treat it like a dating game.

2001: A Space Odyssey | Typeset In The Future

Okay, this might just be my new favourite blog:

This site is dedicated to all aspects of movie and TV typography and iconography as it appears in Sci-Fi and fantasy movies.

The first post is all about 2001, and the writing is just the right shade of fun.

I’m already looking forward to future posts. (See what I did there?)

A Pocket Guide to Master Every Day’s Typographic Adventures

A nice little cheat sheet for simple simple typography wins.

Type Rendering Mix

I got excited when Tim Brown announced this at An Event Apart today: a small JavaScript tool for detecting what kind of rasterising and anti-aliasing a browser is using, and adding the appropriate classes to the root element (in much the same way that Web Font Loader does).

Alas, it turns out that it’s reliant on user-agent string sniffing. I guess that’s to be expected: this isn’t something that can be detected directly. Still, it feels a little fragile: whenever you use any user-agent sniffing tool you are entering an arms race that requires you to keep your code constantly updated.

Butterick’s Practical Typography

There’s a lot of very opinionated advice here, and I don’t agree with all of it, but this is still a very handy resource that’s been lovingly crafted.

Web Fonts and the Critical Path - Ian Feather

The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.

Jessica Hische - Upping Your Type Game

A wonderful essay about type on the web by Jessica.

First public use of what Became Proxima Nova by Mark Simonson

Who knew? The reissue of the classic thirteen-part Star Wars radio series was the first appearance of a proto-Proxima Nova.

Logical breakpoints for your responsive design

Vasilis examines the multitude of factors that could influence an ideal measure.

Prototyping Responsive Typography

Some handy tips for starting off your responsive designs from the type out.

Collect + share + discover type combinations.

A lovely new service from Mike Stenhouse: install the bookmarklet and then when you come across a website with a nice combination of fonts, you can save a snapshot of the page (and its fonts) for later perusal. You can then browse those fonts on Typekit, Fontdeck, MyFonts or Google Fonts.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Responsive IA: IA in the touchscreen era - Martin Belam at EuroIA

A really terrific piece about wireframing for responsive designs. Again, it’s all about the prototypes.

Beauty and Ugliness in Type design | I love typography, the typography and fonts blog

A fascinating look at what happens when you mash up beauty and ugliness in one typeface.

Matthew Butterick: Reversing the Tide of Declining Expectations

I don’t agree with everything in this presentation—there’s a nostalgic bias to the non-existent “good ol’ days”—but this is still very engaging and thought-provoking.

Fluid Type | Trent Walton

Trent shares his ideas on handling line lengths in fluid, responsive layouts.

Tomorrow’s web type today: The fine flourish of the ligature » Blog » Elliot Jay Stocks

An informative post on ligatures in web type from Elliot. And, oh yeah, he redesigned his site again (it’s unsurprisingly lovely).

Avería – The Average Font

An algorithmically-generated font sounds like a terrible idea but I actually quite like the end result.

Prontotype :: Data-driven interactive prototyping framework

Mark has put together this rather excellent prototyping tool. It’s basically the V from an MVC system. You can easily move stuff around, change data …all the good stuff you want to do quickly and easily when you’re prototyping in the browser.

Lost Type Co-op | Browse Fonts

Some of these pay-what-you-want fonts are actually rather nice.

Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog

Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.

Emigre Web Fonts

Emigre’s font library is now available as web fonts that you can self-host (providing you take some protective measures with .htaccess). That means Mrs. Eaves is available for the screen. W00t!

Typography Effects with CSS3 and jQuery

Most of these are pretty over the top but they’re good proofs of concept.

Heaven Devoid of Stars – a tale of cross-browser kerning | Clagnut § Browsers · Typography · CSS techniques

Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.

Type study: Sizing the legible letter « The Typekit Blog

A great article by guest author Ethan on the various approaches to sizing text in CSS.

Elena Font Family | Process Type Foundry

A lovely new typeface from Nicole Dotin that’s available to purchase as a web font under the very reasonable terms of the Process license agreement.

The trouble with font classifications | Clagnut § Design thinking · Typography

Richard would like your help. Take a few minutes to run through a card-sorting exercise to help classify fonts in a more meaningful way.

The typography-out approach in the world of browser-based web design » Blog » Elliot Jay Stocks

An insight into Elliot’s current design process which highlights the advantages of designing in the browser when you take a content-first approach.

the average font - a set on Flickr

Take all the fonts on your operating system, superimpose them, and whaddya get? This.

Test page for -webkit-font-smoothing | Christoph Zillgens

This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).

Jake Archibald - Font-Face - Good vs Legal on Vimeo

Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.

It’s also very, very informative. Watch this.

Responsive Web Design! | Jessica Hische

Jessica Hische has redesigned her site in a lovely and responsive manner.

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

TRY HELVETICA

A cute idea: see how signs (mostly in Brazil) would look if they were set in Helvetica.

Explorations in Typography / Mastering the Art of Fine Typesetting

What a great way to sell a book with “explorations” in the title—play around with the font size, leading, alignment (and browser window size).

Web Typography – The Book

Mark, Richard and Jon are writing a book together (on web typography, of course). It will undoubtedly be excellent.

the html5 switch | the 200ok weblog

Ben Buchanan has a nice round-up of some of the options available when you’re switching over to HTML5.

Web-based prototyping software for interaction designers: Handcraft (formerly known as quplo)

A browser-based tool for creating HTML prototypes.

FFFFALLBACK - A simple tool for bulletproof web typography.

A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.

Typography Deconstructed | A comprehensive guide to the anatomy of type.

A beautiful glossary of typographic terms.

WhatFont Bookmarklet « Chengyin Liu

A handy bookmarklet that allows you to examine any piece of text on a website to determine what font it is set in.

The New Bulletproof Font-Face Syntax | Fontspring

Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.

wordmark.it

A handy browser-based way of previewing the fonts installed on your computer.

Comic Sans Criminal - There’s help available for people like you!

A somewhat condescending piece of work about Comic Sans …from a designer who uses the oh-so-passé Museo on his personal site.

Live by the judgemental sword, die by the judgemental sword.

Ampersand · The Web Typography Conference

If you're at all interested in web typography, be in Brighton on June 17th, 2011.

iOS Fonts

A handy list of installed fonts on the iPhone and iPad.

Adfont Calendar 2010 | A free font every day from Fontdeck

It's a type drawer that's also an advent calendar. Responsive too. Check it every day between December 1st and 24th.

David DeSandro

Drag the text 'round for a bit of fun.

Lost World's Fairs

Lovely typographic showcases from Stan and friends.

Webtype

The newest web fonts delivery service is a collaboration between five foundries: The Font Bureau, Ascender, Roger Black, Petr van Blokland and DevBridge.

Interesting Letterhead Designs | Letterheady

A fantastic blog of letterheads. Some of the typographic choices are perfect.

_not my type

Cute wearable typography snobbery.

Ask H&FJ: Four Ways to Mix Fonts

A nice look at some rules of thumb for combining typefaces.

Typograph – Scale & Rhythm

A handy tool that generates font-sizing CSS based on a drag'n'drop interface.

Fonts Live

Ascender is selling (and hosting) webfonts now.

Google Font Directory

Google-hosted free-as-in-beer webfonts.

FontDeck: Exclusive Sneak Peek | Design Shack

Get a glimpse behind Fontdeck's curtain.

WOFF File Format 1.0 Submission Request to W3C

Microsoft, Mozilla and Opera have formally submitted the WOFF font format to the W3C.

CSS3 Background-Clip Text & @font-face

A lovely bit of CSS3.

Making Faces: Metal Type in the 21st Century (A documentary) — Kickstarter

Here's a Kickstarter project worth supporting: fund a documentary on crafting typefaces.

Colosseo Letterpress Poster: Reimagining the Roman Coliseum with type

The most beautiful piece of letterpress art from Cameron thus far.

Revised Font Stack | A Way Back

A thoroughly researched and well-written look at font stacks, with some practical suggestions and advice.

Fontspring | Fonts, fonts and more fonts

A store of fonts for sale, many of which have licenses that allow you to use them with @font-face.

Web-safe Fonts | Web Typography | Speaking In Styles

A very handy list of fonts ranked from "less likely" to "almost certain" to be installed.

My favourite fonts of 2009 | i love typography, the typography and fonts blog

Some beautiful typefaces here, gathered together for your enjoyment.

French Anti-Piracy Organisation Hadopi Uses Pirated Font In Own Logo | The FontFeed

Oh, the irony! Unconstitutionally draconian French "anti-piracy" organisation uses a pirated font in its logo.

Typotheque: Gore’s choice

Changing a numeral in a typeface ...at Al Gore's request.

Times Skimmer by The New York Times

Beautifully done with HTML5 and font linking.

iQ Font

How to draw a font with a car. With. A. Car.

Timothy McSweeney's Internet Tendency: Letters from the Hellbox.

In praise of Gutenberg's contribution to typography.

shopping losts

Taking shopping lists and setting them in a more typographically pleasing way.

Web fonts test

Test cases for font-linking.

High Performance Web Sites :: @font-face and performance

Steve Souders does the research and reveals the sad truth about the effect font-linking has on performance.

@font-face

A quick, slick primer on font linking.

@font-face in Depth

A good look at choosing fonts for font linking.

A Cohesive & Unified Identity for British Government — Paul Robert Lloyd

In search of typographical consistency in government departments.

London Reconnections: A Typeface for the Underground

A wonderfully engaging history of Johnston Underground.

Bulletproof @font-face syntax « Paul Irish

Getting font-linking to work in all browsers.

Read Regular / Introduction

A forthcoming typeface designed specifically to help people with dyslexia read and write more effectively.

Erik Spiekermann | design mind

Erik Spiekermann expounding on the beauty – and the difficulty – of designing numbers.

Typedia: A Shared Encyclopedia of Typefaces

Like Wikipedia for typefaces. Beautiful work from Jason, Dan, and others.

Goudy Fonts

"A tribute to two former bookkeepers who impacted American design & typography for all time."

The Font-as-Service | i love typography, the typography and fonts blog

Elliot gives a rundown of the font delivery services for the web that are on the way.

Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog

A great round-up on the current state of web typography following TypeCon 2009.

The Typography Manual - For the iPhone and iPod Touch

A glossary of typography that you can carry around with you.

How to create EOT files without Microsoft WEFT — Edward O’Connor

@font-face for all — Ted shows how to convert TTF files to EOT using the command line.

The New York Review of Ideas

The colour scheme is a little odd (though I expect this will change from month to month) but the typography is tasteful and the content is king.

Final Eyes: Jen Schuetz, Proofreader & Quality Assurance. San Francisco, CA.

Georgeous typography.

Omkrets arkitektur: Typografi

Miso is rather nice; compact but legible.

Anonymous Pro

A nice fixed-width font from Mark Simonson. I'm giving it a whirl in Textmate.

Introducing Typekit « The Typekit Blog

Jeff's got something up his sleeve that will help the cause of web typography.

Nice Web Type Suggests: Graublau Sans with Lucida sanserif

A great example of @font-face in action: comparing Graublau Sans Web with with Lucida Grande.

Typefaces we can all share : Open Font Library

A repository of liberally-licensed fonts to link to with @font-face.