Tags: typography

249

sparkline

The scorpion express | Butterick’s Practical Typography

This is easily the most wrong-headed piece of writing I’ve read in a long time.

“But cus­tomers ben­e­fit from smaller file sizes too, be­cause that makes web pages faster.” Cer­tainly, that was true in 1996. And some web de­vel­op­ers per­sist with po­lit­i­cal ob­jec­tions. But with to­day’s faster con­nec­tions—even on mo­bile—op­ti­miz­ing for file size is less use­ful than ever.

I’ll leave it to you to see the logical flaws in every one of the arguments presented here by Matthew Buterick. Meanwhile I’m going to get off his lawn.

The Typekit Blog | Variable fonts, a new kind of font for flexible design

This is what Nick Sherman has been banging on about for years, and now the time has come for variable fonts …as long as typographers, browser makers, and standards bodies get behind it.

More details on Ev’s blog.

Webfonts on the Prairie · An A List Apart Article

A good ol’ polemic in favour of using web fonts. It’s a good read although I strongly disagree with this line of reasoning:

The average internet speed in the United States today is three times as fast as it was in 2011.

But that americentric view is redeemed later on:

The World Wide Web may be a creation of the West, but now, at long last, it needs to get ready for the rest.

I may not agree with all the points in this article, but I think we can all agree that if we’re going to use web fonts, we must use them responsibly …otherwise users are going to treat them as damage and route around them.

`font-display` for the Masses | CSS-Tricks

The font-display property is landing in browsers, and this is a great introduction to using it:

If you don’t know which option to use, then go with swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going with fallback or optional when using font-display.

Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:

if ("fontDisplay" in document.body.style === false) {
  /* JavaScript font loading logic goes here. */
}

FontShop | The Fonts of Star Trek

Yves Peters examines the typography of Star Trek. Unlike Typeset In The Future, which looks at on-screen typography, this article dives into titles and promotional posters.

A Comprehensive Guide to Font Loading Strategies—zachleat.com

A terrific rundown of all your options when it comes to web font loading.

Legibility App

A handy tool for testing the legibility of different typefaces under all sorts of conditions.

ET Book · Edward Tufte on GitHub

I’ve always loved the way that Edward Tufte consistently uses Bembo to typeset his books. Here’s a version made for screen and freely licensed.

Typography Handbook

You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:

A concise, referential guide on best web typographic practices.

Mind you, I take issue with this assertion:

Establishing a vertical rhythm is simple.

Typography for User Interfaces | Viljami Salminen

The history and physiology of text on screen. You can also see the slides from the talk that prompted this article.

Blade Runner | Typeset In The Future

I’ve seen letterforms you people wouldn’t believe…

Miscellany № 74: zombies always make a hash of things – Shady Characters

A thoroughly lovely look at the octothorpe that skewers a myth or two along the way.

BBC Blogs - Internet Blog - BBC UX&D on creating a GEL foundation for everyone

Al runs through the process of updating GEL—the BBC’s Global Experience Language design system. I particularly like the thought that’s gone into naming type sizes.

Webfonts Last by Frederic Marx

Some smart thoughts on web fonts.

Aligning text smartly in CSS

Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.

№ ⸮ ‽ ℔ ⁊ ⸿  — or, a cavalcade of characters – Shady Characters

The numero sign, the reversed question mark, the interrobang, the l b bar symbol, the Tironian et, the capitulum, and the ironieteken.

Webfonts

I love good typography but I have to agree with the sentiment expressed here.

System fonts can be beautiful. Webfonts are not a requirement for great typography.

Use rems for global sizing, use ems for local sizing | Clagnut

In this extract from his forthcoming book, Richard looks at when to use ems, when to use rems …and when to use ch (no, me neither).

The New Web Typography › Robin Rendle

A wonderfully thoughtful piece on typography, Jan Tschichold and the web. This really resonated with me:

It’s only been over the past year or so in which I’ve recognised myself as a ‘Web designer’ with a capital W, as I now believe that something happens to information and technology, and even typography itself, when people pass through these interconnected networks and interact with hypertext.

It’s for these reasons that I don’t believe in “digital design” or “designing for screens” and it’s why I’m often attracted to one particular side of this spectrum.

Robin proposes three “principles, suggestions, outlines, or rather things-that-I-ought-to-be nervous-about when setting text on the web”:

  1. We must prioritise the text over the font, or semantics over style.
  2. We ought to use and/or make tools that reveal the consequences of typographic decisions.
  3. We should acknowledge that web typography is only as strong as its weakest point.

There’s an in-depth look at applying progressive enhancement to web type, and every single link in the resources section at the end is worth investigating.

Oh, and of course it’s beautifully typeset.

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

Better Google Web Fonts

A single page showing all the weights available from Google fonts at a glance.

CSS Font Rendering Controls Module Level 1

This is already starting to land in browsers, which makes me very happy—the ability to specify how you want fonts to load/swap without needing a clever bit of JavaScript.

Robin Rendle › Ampersand 2015

A great run-down of this year’s excellent Ampersand conference.

I wish I had known that Robin was there—I’d like to thank him for his kind words about Chloe.

ampersand : ampersand2015 on Huffduffer

The audio is now up from all the talks at this year’s excellent Ampersand conference.

System shock — Medium

This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.

Read all the way through for a free gift.

Miranj: Collateral Damage

Websites should not come with minimum software requirements.

Richard on Vimeo

The video of Richard’s great talk on responsive typography at the Up Front conference.

Efficient Web Type, c. 1556

A long zoom and then a deep dive into web typography.

Clearleft Letterpress Day | Flickr - Photo Sharing!

This was a fun way to spend the day—getting my hands dirty with ink and type.

Wood type composited and ready to set

Google Web Fonts Typographic Project

Google Fonts aren’t renowned for their quality but this is a beautiful demonstration of what you can accomplish with them.

Web Typography – a handbook by Richard Rutter — Kickstarter

You’ll want to back this—you’ll want to back the hell out of this!

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Dev.Opera — The State of Web Type

If you don’t have time to poke around StateOfWebType.com here’s the short version.

yurivictor/typebetter

A really nifty little bit of JavaScript that converts to smart quotes, apostrophes, ellipses, and em dashes.

(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)

How we use web fonts responsibly, or, avoiding a @font-face-palm by Filament Group

Smart thinking here on the eternal dilemma with loading web fonts. Filament Group have thought about how the initial experience of the first page load could be quite different to subsequent page loads.

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.

Layout in Flipboard for Web and Windows — Flipboard Engineering

A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.

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.

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.

Inge Druckrey: Teaching to See on Vimeo

Sit back, relax, and enjoy this classic documentary on graphic design, courtesy of its producer Edward Tufte.

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.

Quotes and Accents

Jessica’s handy guide to writing the right quotes and accents on a Mac keyboard.

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.

Responsive typography demo

This is a pretty wacky experiment in altering font size based on the user’s distance from the screen (allow the page to access your camera and enable the “realtime” option for some real fun). I don’t know how much real-world application this has, but it’s a cute’n’fun exercise.

The responsive web will be 99.9% typography

An intriguing extrapolation of current design trends: perhaps typographically-strong single-column layouts will become popular out of sheet necessity.

Jan V. White

Eight of Jan White’s excellent books on graphic design are now available for free online, licensed under CC0 …they’re in the public domain now.

All he asks in return is that you might buy one of his books still in print, and maybe make a donation to the Internet Archive.

Jan V. White is a mensch.

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.

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.

Responsive Measure: A jQuery plugin for responsive typography

Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.

Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).

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.

“Authenticity,” an article by Dan Mall

Cute. I gave Dan some advice. He made it look all pretty.

Style Tiles

Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.

Scaling with EM units

Using em-based media queries to incrementally bump up the font size for larger viewports.

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!

How To Build a Modern Website in 2011 - Tom Milway - Blog

A good round-up of what web development means today …and what web developers need to do to keep pace.

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 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.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

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.).

Stubbornella » Blog Archive » Don’t Style Headings Using HTML5 Sections

Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.

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.

agile approach | The Anatomy of a Design Decision: Examiner’s 2012 Campaign Site

Samantha gives the rundown of a hands-on use of Style Tiles.

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

Hyphenation arrives in Firefox and Safari | Fontdeck Blog

Finally. Hyphenation on the web.

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now.

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.

Writing in the Margins: Manicules « A Pretty Book

A lovely little ode to the manicule.

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).

Contrast Rebellion - to hell with low-contrast fonts!

A cute website that’s a call-to-arms against low-contrast text on the web.

BBC - BBC Internet Blog: BBC World Service Language Websites: user experience and typography

A fascinating look at the intersection of typography and internationalisation on the BBC’s World Service site.

Beautiful Swear Words

A swear word a day, typeset.

Ampersand Conference 2011 Focuses on Web Typography | The FontFeed

An incredibly detailed write-up of Ampersand.

Ampersand, the Aftermath — Jon Tan 陳

Jon’s glowing write-up of Ampersand. Feel the love!

Notes from Ampersand conference — My Digest — Laura Kalbag

Excellent notes from Ampersand by Laura. Rather than describing each talk individually, she has documented the emergent themes.

Web Typography – The Book

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

Fuck yeah Keming!

A celebration of horrendous kerning all over the internet.

The Ampersand Story | Clagnut § Brighton · Typography · Clearleft · Conferences

Getting the background on Ampersand from Richard is getting me very excited for the conference.

Fit To Scale | Trent Walton

More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.

Font sizing with rem - Snook.ca

Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.

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.

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.

Shady Characters

The secret life of punctuation.

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.

The origins of abc | I love typography, the typography and fonts blog

A wonderful history of our alphabet. Set aside some time to read this.

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.

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.

Design discussions: Paul Shaw and the NYC Subway: idsgn (a design blog)

"There is a common misbelief that Helvetica is the signage typeface of the New York City subway system. In this ‘Design discussions’, we talk to the author who has uncovered the truth (maybe) behind the story."

A New Visual Design Language for BBC Online — Paul Robert Lloyd

Paul takes an in-depth look at the new BBC design guidelines.

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.

Digital Podge 2009 - Measurable Fun | 17th December 2009

This is a gorgeous-looking website. I have no idea what it's about.

Typotheque: Gore’s choice

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

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."

Radio - The New York Moon

Gorgeous visual design for an interestingly eclectic site.

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.

the Movie title stills collection

Prepare to lose yourself in this collection of movie titles from the 1920s to the present day.

Font in your face | Nimbupani Designs

A good, clear-headed summation of font linking.

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.

Kernest.com | @font-face central

Another font-linking service is on the way.

PHP Typography 1.0 beta 3 • KINGdesk

A PHP script that adds nice typography to your markup.

beautiful fonts with @font-face at hacks.mozilla.org

A good description of how font linking works.

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.

Web Typography Readability Test | by the User Experience team at Viget Labs

Jackson is gathering data to test on-screen readability. Sign up and join in.

Typefaces we can all share : Open Font Library

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

H&FJ News | Hoefler & Frere-Jones

A nice concise look at the ampersand.

The League of Moveable Type

"We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts."

Tal Leming » Web Fonts

An excellent take on font-linking from someone who designs typefaces for a living.

Fuck the foundries [dive into mark]

Mark Pilgrim knows the score.

we love typography. a place to bookmark and savour quality type-related images and quotes

An editorially managed collection of type-related goodies: "Think of it as FFFFound for all things type, typography, lettering, & signage."

8 Simple Ways to Improve Typography In Your Designs • Blog Archive • AisleOne

A quick round-up of typographic best practices applied to the web.

Letterpress books, posters &c. - a set on Flickr

A lovely set of letterpress printing

Handbound letterpress Miniature Book

LegiStyles™

Typographically thoughtful themes for NetNewsWIre. Even if you don't use the RSS reader, check out the gorgeous design of this site.

FORMation Alliance | KERN

Tetris for type geeks on the iPhone.

this is a working library

I love the design of this site almost as much as I love the content.

App Shopper: WhatTheFont (Reference)

Like Shazam, but for fonts. Snap a picture of some text on your iPhone and this app will phone home to the WhatTheFont mothership in order to identify it for you.

Facing up to Fonts | Slides and notes

The slides from Richard's superb Skillswap presentation.

Striking Web Sites with Font Stacks that Inspire - Inspiration Bit

A look at different font stacks out there in the wild.

Jounce, the online home of M. Jackson Wilkinson

Jackson's lovely new site ...written in HTML5.

Font-weight is still broken in all but one browser | Clagnut § Browsers · Typography · CSS techniques

A superb bit of browser research by Richard. "There’s more to the lives of many typefaces than just Bold and Regular, but almost no browsers follow the proper CSS 1 way of specifying Light, Semibold, Black and other weights. There is a workaround,…

A List Apart: Articles: The Trouble With EM ’n EN (and Other Shady Characters)

This article is an oldie but a goodie. I find myself referring to it all the time: "Beating typographic correctness out of (X)HTML: more than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography."

Helvetireader

Jon's helvetican theme for Google Reader.

Five Simple Steps | Books

Mark's book is almost ready. Really. It's got its own site and everything so it must be true.

ThoughtCafe » Online Magazine

I like the look of this, both visually and idealistically. "ThoughtCafe is a crowdsourced online magazine, written by the internet community for the internet community."

Fonts available for @font-face embedding - Webfonts.info

A wiki for tracking which fonts have licenses that allow for @font-face embedding with CSS.

Ubiquitous web font embedding just got a step closer | Web Directions

John has come to the same conclusion as Richard with regards to font embedding. In short, the font foundries are missing a huge revenue stream. They could be offering fonts on a per-domain basis (a la Google Maps or any other third-party API). Rem…

Five CSS design browser differences I can live with | For A Beautiful Web

A great article by Malarkey wherein he lists five examples of progressive enrichment (as Dan is wont to call it) complete with side-by-side comparisons. Useful ammo, this.

Typechart - Browse Web Type, Grab CSS.

A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.

minimalsites | minimal design css gallery

A gallery of minimally designed websites. There are some lovely grid/type-based designs on view here.

Typography for Lawyers

Trying to teach legibility, one legal document at a time.

A new design | Clagnut § Blogging · Information design · Clagnut news

Richard has launched the redesign he's had bubbling away for a while now. 'Tis lovely and gridilicous.

Sushi & Robots

Jina's new site is live and quite lovely it is too.

The Paragraph in Web Typography & Design — Jon Tan ?

A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.

Handwritten Typographers

Cameron asked some type creators for samples of their handwriting. They obliged. Compare the handwriting to the fonts.

Knitting Letters : A to Z

An abecedarium of knitted letters.

The Ampersand

A blog devoted entirely to the ampersand.

Seed Conference | Chicago | 6 June 2008

A version of the beautiful Seed Conference one-sheet Website that has been reworked to use ems instead of pixels.

The Rather Difficult Font Game

I scored 27 and frankly, most of that was pure luck.

Seed Conference | Chicago | 6 June 2008

The typography on this page is simply gorgeous. And the event looks good too.

Apostrophe Atrophy

Documenting typographical abuse, specifically when single primes are used instead of apostrophes.

× × timoni.org × ×

I'm loving the typography on this blog.

kropp

Good typography + stylish grid + liquid layout = WIN!

Typesites

A site devoted to cataloging good website typography.

Typography with Potatoes Workshop : Ana Belén Ramón

This looks like so much fun: spudpress.

TypeTrust

Epic is a lovely looking new typeface from Neil Summerour.

ATypI Brighton 2007

Audio and video from the typography conference held in Brighton earlier this year, including Joe's presentation about the signage in the Toronto subway. Download the files or subscribe to the podcasts.

Design View / Andy Rutledge - quiet structure

A nice overview of avoiding clutter in web design. It's not just about whitespace; the number of edges and gradients can also add up to an undifferentiated design.

Veer: Products: Merchandise: Helvetica Coffee Mug

I think we should get a whole set for the Clearleft office.

Inscribed in the living tile: Type in the Toronto subway (Joe Clark)

The paper of Joe's talk at ATypI Brighton. It's fascinating, well-researched stuff.

George Orwell, “Politics and the English Language”, 1946

A beautifully marked up and typeset copy of George Orwell's classic essay.

typography - a photoset on Flickr

A collection of books with beautiful typography.

stephenson01

i love typography

A new blog dedicated to, yup... typography. Looks like a keeper.

The Serif - Your daily dose of design inspiration - The Serif

An interview with type designer, Eric Olson.

How To Mix Fonts: Typeface Cheat Sheet

A cheat sheet for combining typefaces. No hard and fast rules but a handy guide to print out and use.

design|snips

A collection of websites incorporating noteworthy visual design elements.

lowercase L

A blog devoted entirely to instances of all-caps writing that uses lowercase letter Ls.

Syncotype Your Baselines — RobGoodlatte.com

Here's a handy little bookmarklet that overlays a grid on a web page—very handy for tweaking vertical rhythm and aligning to a baseline.

Blueprint: A CSS Framework

Pulling together a bunch of CSS tricks from a range of sources: reseting, baseline typography and grids (fixed width, unfortunately).

Type the sky | Slanted

Finding letters everywhere.

Mark Boulton Design : +44 (0)845 603 2399

Mark has launched his business site. Lovely grids and typography, as you'd expect.

Graphic Design and typography - Swiss Legacy » The italic poster

We may just have to get this italic poster for the Clearleft office.

Peter Saville Graphic Design - fonts

Peter Saville is releasing some of his fonts for free. I'm grabbing the beautiful serif typeface used on the front of Joy Division's "Closer"; it's gorgeous.

SpiekermannPartners › Le Monde Diplomatique

The newly-launched redesign of Le Monde Diplomatique is absolutely gorgeous. Whitespace on a newspaper: finally!

Guardian Unlimited

The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.

typography - a photoset on Flickr

A gorgeous 1923 specimen book from the American Type Foundry.

Motionographer | Motion graphics, design, animation, filmmaking, vfx and bombastic banter» Blog Archive » Say What Again

Check out the beautiful use of Rockwell in this typographical interpretation of a scene from Pulp Fiction.

A List Apart: Articles: Whitespace

Mark has written a great article for ALA, focusing on one aspect of good typography: whitespace.

decaffeinated archives :: Shuffled ligatures

Apple's variant of Myriad has a very nice "ff" ligature.

Information Architects Japan » Blog Archive » Web design is 95% typography

There's a good list of resources about typography at the end of this article.

Istd - Kern up the Volume

Erik Spiekermann is speaking in London at the start of November. For just £15, this event looks like great value.

Daniel Mall: Typobituaries

Fonts that deserve to do.

Skeptic: The Magazine: Featured Article

A good, if somewhat dispiriting, overview of Artificial Intelligence. (There's some nice typesetting on this page)

mezzoblue § ClearerType

Good news everyone! ClearType is turned on by default in IE7.

Design Melt Down

Design elements, trends and problems in Web Design... via John Oxton.

Samuel's Blog

The working example from Richard's chapter in Blog Design Solutions. It's a home-rolled PHP/MySQL blog for Samuel Pepys featuring beautiful typography... natch.

iStockphoto.com : Articles - Know Your Type

A really nicely laid-out introductory article on typography from the folks at Red Labor.

Digital Web Magazine - CSS Typography

Garret Dimon runs through some of the options available when using CSS to improve readability.

The Anatomy of Web Fonts [Design Principles]

Andy Hume has written a superb article about typography on the Web.

Veer: Ideas: Etched In Stone

The unstoppable rise of Trajan.

two point three

This is a beautiful blog.

The Helvetica Meditations

Here's one for Joe Clark. Helvetica (and some Arial) found in England.

GarrettDimon.com

Garrett has a new site. I'm very keen on the design, especially the typography.

The non-typographer's guide to practical typeface selection

A great overview of typography by Cameron Moll, talented designer and super-nice guy.