Tags: typography

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.

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.

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.

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.

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.

Tombstone Typography // Tom Davie - a set on Flickr

Beautiful writing on headstones.

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.