Tags: type

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.

№ ⸮ ‽ ℔ ⁊ ⸿  — 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.

RFC 7763 - The text/markdown Media Type

Markdown gets its own media type: text/markdown.

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

thoughtbot/design-sprint: Product Design Sprint Material

If you’re intrigued by the kind of design sprints I wrote about recently, here’s a handy collection of resources to get you going.

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.

briangonzalez/fontprep

The missing font generator for Mac OS X.

Very handy for subsetting fonts for the web. It doesn’t (yet) export WOFF2 unfortunately.

Creating a Web Type Lockup | CSS-Tricks

A really great idea from Chris: using SVG to create the web equivalent of type lockups that can scale with all the control you want, while still maintaining accessibility.

Speaking of accessibility, Emil’s comment is very useful indeed.

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

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

Flash of Faux Text—still more on Font Loading—zachleat.com

Smart thinking on optimising the perceived performance of loading web fonts: if you prioritise the most widely-used weight and style (usually the regular roman), and load other weights and styles subsequently, then it appears as though the font is ready sooner.

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.

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.

Average Font: w

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.

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.

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.

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.