Pinboard: bookmarks for gordonbrander tagged 'typography'

Improved handling of kerning pairs and ligatures in modern browsers using the text-rendering: optimizeLegibility; declaration.

Firefox uses this by default for anything over 20px.

css development web typography
9 weeks ago by gordonbrander

copy to mine

averyvery/hieroglyph

Hieroglyph lets you turn a directory of SVG icons into an SVG font.

opensource font typography web development design
9 weeks ago by gordonbrander

copy to mine

Daniele Capo » Blog Archive » Villard diagram

Villard diagram: dividing a segment in n parts in a medieval, yet late-modern, fashion.

grid layout design typography math
january 2012 by gordonbrander

copy to mine

Typotheque: Typeface As Programme by Jürg Lehni

Designer and programmer Jürg Lehni analyses the evolution of typographic technology and the nature of digital fonts, and introduces Donald E. Knuth’s groundbreaking TeX and Metafont systems.

Um, yes.

typography development design latex learn interview
november 2011 by gordonbrander

copy to mine

Type study: Sizing the legible letter « The Typekit Blog
teaching bdw2011 learn typography css web development design
november 2011 by gordonbrander

copy to mine

Shape Type, the letter shaping game

From the guys that brought you Kern Type. A game about shaping letter forms (bezier curves).

design typography game javascript svg
october 2011 by gordonbrander

copy to mine

Font Squirrel | Free Font Otama e.p. by Tim Donaldson

A nice serif with extreme lines.

serif font typography opensource @font-face
october 2011 by gordonbrander

copy to mine

Kern Type, the kerning game

A game that scores you based on your kerning solutions, with HTML5, Javascript, SVG. Awesome.

typography web inspiration javascript svg game bdw2011
october 2011 by gordonbrander

copy to mine

raphaelbastide/Terminal-Grotesque - GitHub

An open source font with a deliberate lack of anti-aliasing. A nice cyberpunk feel.

font opensource design typography
october 2011 by gordonbrander

copy to mine

Three-letter kerning technique
typography bdw2011 learn design from iphone
september 2011 by gordonbrander

copy to mine

CSS Mask-Image & Text | Trent Walton

On CSS text masking.

css typography design
september 2011 by gordonbrander

copy to mine

the Movie title stills collection

A truly wonderful collection of stills from movies. Very in-depth.

design inspiration typography
september 2011 by gordonbrander

copy to mine

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

A handy list of fonts available.

@font-face css typography bdw2011
september 2011 by gordonbrander

copy to mine

HTML5 Rocks - Quick Guide to implement webfonts via @font-face

A no-nonsense tutorial for web font embedding.

teaching web development @font-face typography css bdw2011 learn
september 2011 by gordonbrander

copy to mine

For the Love of a Good Line » Columns » Story Matters

A profession of love for typography. Great site design, too.

typography blog design inspiration
july 2011 by gordonbrander

copy to mine

The League of Moveable Type - Ostrich Sans

A friendly sans from the League.

typography font opensource sans-serif modern
may 2011 by gordonbrander

copy to mine

Lost Type Co-op | Browse Fonts

Great retro fonts from an indie foundry that runs on donations (which go straight to the designer).

typography font retro
may 2011 by gordonbrander

copy to mine

Font sizing with rem - Snook.ca

rem, or "Root Em" is a new unit type in CSS3 that is based on the size of em at the root element (without the pesky multiplication issues em has). It's supported mostly everywhere and in IE9+. Fallback is easy, of course, (just duplicate your size declaration with a px alternative). I'm not sure it's worth the hassle now that most UAs support zooming. It is a nice alternative, however.

css typography web development
may 2011 by gordonbrander

copy to mine

HandPaintedType | Painters

A project to digitize and preserve the alphabets of Hindi sign painters!

india typography design
may 2011 by gordonbrander

copy to mine

Type study: Typographic hierarchy « The Typekit Blog

By Frank Chimero.

teaching typography design
march 2011 by gordonbrander

copy to mine

Fighting the @font-face FOUT « Paul Irish

Many dueling approaches to preventing "Flash of unstyled text" in Firefox.

@font-face css typography javascript bdw2011
march 2011 by gordonbrander

copy to mine

Kern.js - Make web kerning suck less.

A bookmarklet for keyboard-based kerning when using Lettering.js

javascript css typography development design web font
march 2011 by gordonbrander

copy to mine

Converting @font-face Fonts Quickly In Any OS

Shell script for convenient @font-face conversion and packaging. Nice.

css development @font-face typography opensource
february 2011 by gordonbrander

copy to mine

WebFont Loader - Google Font API - Google Code

An open source script from Google and TypeKit that handles font loading from Google API, TypeKit, Ascender or a custom CSS file of your choice. Also gives you niceties like .wf-loading class on html element to prevent FOUC.

@font-face javascript typography opensource
february 2011 by gordonbrander

copy to mine

Fonts In Use – Type at work in the real world.

Great designs with their fonts identified.

design learn typography inspiration
january 2011 by gordonbrander

copy to mine

The League of Moveable Type

Quality open source fonts. Home of League Gothic, an OpenType redraw of a 1903 font.

design opensource typography
january 2011 by gordonbrander

copy to mine

BigText Makes Text Big

jQuery plugin expands text's size to fit the width of the containing div. Cool for typographic poster-style work.

javascript jquery typography design plugin opensource
january 2011 by gordonbrander

copy to mine

Lettering.js - A jQuery plugin for radical web typography.

Fine-grain type control through a jQuery plugin: lettering.js wraps important letters in span elements with classes allowing you to kern, twist, color, whatever.

jquery plugin opensource typography design development javascript
october 2010 by gordonbrander

copy to mine

How to kern type well

...do it upside-down.

typography design
october 2010 by gordonbrander

copy to mine

Carlos Bueno: Sweet Justice: justified text for the web

Javascript for adding the soft-hyphen character to text.

javascript web typography design development opensource
september 2010 by gordonbrander

copy to mine

Type in Motion

A lovely and entertaining kinetic typography intro to... typography.

typography animation learn teaching film
july 2010 by gordonbrander

copy to mine

Stuff and Nonsense: Proportional leading with CSS3 Media Queries

A clever idea: increase leading as column widths increase in liquid areas.

css typography design development
june 2010 by gordonbrander

copy to mine

Cross-browser kerning-pairs & ligatures

It turns out `text-rendering: optimizeLegibility;` improves kerning pairs in Safari, Chrome. FF has it on by default.

css typography design
june 2010 by gordonbrander

copy to mine

St Marie Thin

A thin slab-serif. Modern, angular and idiosyncratic, without being too strange. Available under an attribution/share-alike CC license.

creativecommons font serif modern @font-face design typography
june 2010 by gordonbrander

copy to mine

Dekar by Fontfabric

A classy, free, quirky-futuristic sans-serif that allows @font-face embedding with a link back to the site.

@font-face typography font sans-serif modern design
june 2010 by gordonbrander

copy to mine

Paul Irish: Bulletproof @font-face syntax

Way more complex than it needs to be (thanks IE), but at least it works, and it gives me an excuse to put a smily face character in my CSS.

@font-face typography css ie learn
june 2010 by gordonbrander

copy to mine

Heroic Condensed

Lovely modern sans-serif. I think this is the one Feltron uses all the time?

sans-serif typography font modern
june 2010 by gordonbrander

copy to mine

Web Fonts. Delivered ∗ Kernest

Open, free font embedding site (similar to TypeKit)

css @font-face typography design development tool
june 2010 by gordonbrander

copy to mine

Typedia: Anatomy of a Typeface

A primer on terminology

typography learn design
may 2010 by gordonbrander

copy to mine

Google Font API - Google Code

Now serving web fonts.

@font-face css javascript typography design development documentation
may 2010 by gordonbrander

copy to mine

Fontspring

A font broker that sells @font-face embedding licenses for a one-time fee (not a hosted model).

@font-face font typography web design css
march 2010 by gordonbrander

copy to mine

Font Embedding

"a resource for designers, developers and typeface creators on font usage, technology and licensing issues"

@font-face design web legal typography
march 2010 by gordonbrander

copy to mine

Ask H&FJ: Four Ways to Mix Fonts

"Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ's Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary."

design typography
march 2010 by gordonbrander

copy to mine

A new global visual language for the BBC's digital services

The BBC walks through the process of re-designing their website's visual system. This is a perfect example of how designing for the web is about creating flexible systems.

design grid typography inspiration learn process
february 2010 by gordonbrander

copy to mine

Web Open Font Format for Firefox 3.6

I believe this is the .zip format that was talked about in the mailing list a while back... Must investigate further.

@font-face css typography
january 2010 by gordonbrander

copy to mine

The League of Moveable Type: Chunk font

Great ultra-fat slab serif. It's free!

design typography font serif free
december 2009 by gordonbrander

copy to mine

Titillium

A gorgeous modern, light and clean open source font from a design class in Italy.

font typography sans-serif opensource @font-face
november 2009 by gordonbrander

copy to mine

Mezzoblue: WEFT-less

Working with @font-face, Font Forge and Internet Explorer.

@font-face font design ie css typography
november 2009 by gordonbrander

copy to mine

Font Squirrel: Commercial use free fonts

...hello free font embedding

design free font typography
november 2009 by gordonbrander

copy to mine

Create Your Own @font-face Kits

Generates the necessary files for IE, etc.

@font-face css typography font
november 2009 by gordonbrander

copy to mine

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

Articles on typography

typography blog
november 2009 by gordonbrander

copy to mine

Friends of Type

Gorgeous type

typography design blog
october 2009 by gordonbrander

copy to mine

Engravers’ Gothic font family

Nice sans serif in the style of Futura

font typography sans-serif humanist
september 2009 by gordonbrander

copy to mine

textorize: Pristine Font rendering for the Web

The blog post

opensource typography development design osx ruby
september 2009 by gordonbrander

copy to mine

GitHub: textorize at master

An OSX command line tool for generating pristine images for text replacement.

development design typography ruby osx opensource
september 2009 by gordonbrander

copy to mine

Slideshare: Textorize

An OSX command line tool for generating pristine images for text replacement

development design typography ruby opensource osx
september 2009 by gordonbrander

copy to mine

Fontlab

Apparently the industry-standard for font authoring

font typography app
september 2009 by gordonbrander

copy to mine

FontForge

Open-source font creation software

font typography opensource app
september 2009 by gordonbrander

copy to mine

Lessons From Swiss Style Graphic Design

Kind of a nice roundup from Smashing Magazine

swiss design minimalism typography philosophy
september 2009 by gordonbrander

copy to mine

Arial vs Helvetica

...an overlay comparison

font typography swiss sans-serif
september 2009 by gordonbrander

copy to mine

Typedia: A Shared Encyclopedia of Typefaces

"Like IMDB for typefaces". An anyone-can-contribute reference to learning about type and typefaces.

typography community crowdsourcing school learn
august 2009 by gordonbrander

copy to mine

Helvetica Neue Light: Creating Font Stacks for those other fonts.

The short version:
{
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-weight:300;
}
...will make everyone who has it happy.

design development web css typography font
july 2009 by gordonbrander

copy to mine

MUSEO - a [free] font from exljbris Font Foundry

Exljbris has a quite a few nice free fonts (available for @font-face embedding, too!)

font typography @font-face css web development design sans-serif
july 2009 by gordonbrander

copy to mine

Hannah

Hannah is a thin font with drastically variable-width characters and a hand-drawn quality. It would be fun for an avant garde or crafty piece. It reminds me a great deal of the opening credits of Dr. Strangelove.

font typography sans-serif
july 2009 by gordonbrander

copy to mine

CSS - String Truncation with Ellipsis | A JavaScript, CSS, and XHTML Resource By Matt Snider

Making overflow:ellipses work in all browsers (including Firefox). Wow.

css design web development typography firefox xml ie
july 2009 by gordonbrander

copy to mine

Unit Interactive: Better CSS Font Stacks

A clever little article with some useful stacks. I particularly like his serif choices.

design web font typography css
june 2009 by gordonbrander

copy to mine

Introducing Typekit « The Typekit Blog

Typekit is claiming to be working with multiple font foundries to make fonts embedable via CSS and a wee bit of Javascript. It looks like a hosted model.

@font-face typography font css web design javascript
may 2009 by gordonbrander

copy to mine

Ubiquitous web font embedding just got a step closer

An article from Web Directions. We've got everything we need now to do CSS font embeds. It's all about the legalities. It looks like even these legal issues may be paved over through hosted font files.

design web css font typography @font-face law ie
may 2009 by gordonbrander

copy to mine

New Rail Alphabet

The modernist sans-serif that is used in UK hospitals, train stations and airports. Has a very close aesthetic kinship with Helvetica.

design typography font sans-serif modern
may 2009 by gordonbrander

copy to mine

10 Great Free Fonts for @font-face embedding

Some of them are quite classy, others might be good in light measure.

font typography @font-face opensource web design css embed
may 2009 by gordonbrander

copy to mine

Open Font Library: Typefaces we can all share

Open-source fonts that allow you to use the @font-face directive in CSS.

design web development css typography font opensource creativecommons
april 2009 by gordonbrander

copy to mine

Converting Tracking and Leading from Photoshop to CSS

Photoshop does tracking (letter-spacing) in 1/1000em.

css typography photoshop kerning
april 2009 by gordonbrander

copy to mine

CRW / Corporate Risk Watch

Crazy simple and gorgeous grid-based design.

design web grid inspiration typography swiss
april 2009 by gordonbrander

copy to mine

Black Estate Vineyard – Omihi Waipara. New Zealand Wine

Intricate and minimal grid-based design. Very evocative of Muller Brockmann. A clever play with layering elements (foreground and background playfully intertwine) causes the page to pop, keeping it from looking flat.