Tags: type

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.

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.

Long Now image - Photos: The 10,000 Year Clock - CNET News

Pictures of some prototypes of the clock of the Long Now.

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.

FORMation Alliance | KERN

Tetris for type geeks on the iPhone.

The Mesmerizing Curves of Ampersands | The Design Cubicle

Ampersands. Lovely, lovely ampersands.

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.

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,…

Graphic Design and typography - Swiss Legacy » Type Trumps

Top Trumps with typefaces.

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…

Typechart - Browse Web Type, Grab CSS.

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

Typography for Lawyers

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

Handwritten Typographers

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

The Paper Version of the Web at Deeplinking

A nice collection of sketches and paper prototypes.

AJAX Libraries API - Google Code

Google is now hosting all the major JavaScript libraries. The caching benefits should be good news for your users.

The Ampersand

A blog devoted entirely to the ampersand.

Google Doctype - Google Code

This looks like it could be a very valuable resource indeed: a user-contributed and edited reference for HTML, CSS and JavaScript.