Prototypo | Streamlining Font Creation

Prototypo is an open-source online typeface editor: start shaping a complete typeface using sliders, then refine spacing and outlines.

A new project by ByteFoundry in London – looking for funding on KickStarter. Check them out here…

Screen Shot 2014-04-14 at 10.01.33 AM


A Brief History of Proxima Nova

Proxima Nova (2005) is a clean, crisp, and modern typeface that continues to be a go-to font for me in my design work. I started wondering, just what was the story behind this font?  Here is what I found:


Proxima Nova font is one of the latest incarnation of a typeface family Mark Simonson has been working on for over 30 years. The first sketches were made around 1981. At that time, he called it Zanzibar, mainly because he liked the word.

Zanzibar had much of the basic structure and appearance of Proxima Nova, especially in the lowercase. In 1991, Mark was art director of a magazine in which he was using Gill Sans. He liked it a lot, but wished there was something plainer and more geometric. Such a face did not seem to exist.

Taking this basic concept and the earlier ideas for Zanzibar, he began working on a new typeface, which he dubbed Visigothic. Many existing fonts influenced the look of Visigothic. Mark wanted something with the general proportions and stroke contrast of Helvetica or Akzidenz Grotesk, but with construction principles and details borrowed variously from Futura, Kabel, the aTF gothics and the U.S. Federal Highway signage typeface.

The result was a hybrid; a face combining modern, even-width proportions with a somewhat geometric appearance. It was released through FontHaus in 1994 as Proxima Sans, a family of six fonts—three weights with matching italics. The name Visigothic was dropped because of its similarity to the name of another recently released font, Visigoth, and because Mark felt it was just a bit too corny.

The name Proxima Sans was chosen to acknowledge that it was near other sans serifs in design and also because the letters in the name displayed some of the more identifiable characteristics of the design.



Four techniques for combining fonts

Four techniques for combining fonts via H&FJ


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.

It’s the interplay between fonts that gives them energy. The more distant the moods in a typographic palette, the friskier the design will be. Here, three fonts with distinctive silhouettes have been chosen for their contrasting dispositions: the unabashed toughness ofTungsten is a foil for both Archer’s sweetness, and the cheekiness of Gotham Rounded.
Tungsten Gotham Rounded Archer
Tungsten Gotham Rounded Archer
 Tungsten from $99  Gotham Rounded fr. $179  Archer from $149
Three type families with nineteenth century roots, thrown together in a cheerful typographic riot. Choosing type families with different features helps prevent redundancy: here, the brawny variations of The Proteus Project are reserved for headings, Sentinel’s six weights of romans and italics recommend it to text, and Knockout’s nine different widths helps the sans serif fill in the cracks.
The Proteus Project Knockout Sentinel
The Proteus Project Knockout Sentinel
 Proteus Project from $99  Knockout from $169  Sentinel from $199
What do a neoclassical modern, a suave sans serif, and a sporty slab have in common? All are meditations on precision, though each has a different texture. H&FJ Didot achieves its crispness through the thinnest possible serifs, Verlag through its insistently geometric motifs, and our new Vitesse typeface through its pairing of machined edges and racy curves. Together, these three mechanical faces create a dramatic typographical tension.
H&FJ Didot Verlag Vitesse
H&FJ Didot Verlag Vitesse
 H&FJ Didot from $299  Verlag from $199  Vitesse from $199
A clever way to combine typefaces with similar proportions is to assign each a different purpose, and to limit each to a specific range of sizes. Here, two hard-working typefaces are assigned supporting roles: the seriffed Mercury serves for text, and the sans serifGotham furnishes all the annotations. The star of the show is the sophisticated Hoefler Titling, which preserves its spotlight by appearing only occasionally, and always in large sizes.
Mercury Text Hoefler Titling Gotham
Mercury Text Hoefler Titling Gotham
 Mercury Text from $199  Hoefler Titling from $199

Read more: Four techniques for combining fonts • Studiodaas Magazine

11 Most Useful jQuery Plugins To Enhance Typography

Brought to us by Studiodass Magazine

Here we are presenting 11 jQuery plugins for you to improve your typography. With jQuery plugins, you can implement superb things on your website quite easily. In this round up, we have put together some jQuery plugins that will allow you a better control on your website for web typography. We all know that typography is an important element in a web design and achieving a high level of typographic style can make your web design look eve more stunning and attention grabbing.

Read more: 11 Most Useful jQuery Plugins To Enhance Typography

A showcase of the best typefaces from the Google web fonts directory.

Found a wonderful collection of Google web fonts maintained by CHAD MAZZOLA.

There are over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.

Create a Hex Color Swatch in InDesign

Must have tip!

There are lots of ways to spec a new color swatch in InDesign, but they’re all based on RGB, CMYK, Lab, or a color library such as Pantone or Trumatch. Many folks brought up with HTML find it helpful to spec colors in hex code (such as #41bbac) or using standard HTML color names (such as red, purple, or darksalmon). If you’re into those kinds of colors, you’re going to love this new, free add-on from called ?CreateHexSwatch.hex1.png

Check out the full description and download extension at

Web Typography for the Lonely

Web Typography for the Lonely aims to excite designers about the possibilities of cutting-edge web standards and javascript through beautiful and inspiring typographic explorations. Check out all this beautiful work …


From Print to Web: Creating Print-Quality Typography in the Browser

Ever struggle to get print-quality type perfection on the web? While our toolset is still young, there is a lot we can do to create delectable, readable typography with just HTML, CSS, and perhaps a little JavaScript.

What do We Have to Work With?
Below, each feature from the InDesign palettes has been mapped to a feature of CSS (or an augment in JavaScript). For the entire article, check out onextrapixel.

The Ultimate Guide to CSS Typography

Typography is often overlooked in today’s design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Take control over your type!

Below are a few CSS tips for typography on the web. Just a really good resource and quick resources. Check out the full article at three{styles}.com

The Font Attribute

CSS provides us with the Font attribute, which is what allows us to tweak the text on our page. This is an overview of the syntax and how to effect text using CSS.


Change the size of your font using font-size

font-size: 1.2em;
font-size: 12px;
font-size: 10pt;


This is used to change the weight of your font (i.e bold, bolder)

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;


The text-transform property allows you to apply uppercase, lowercase, and capitalize effects to your text.

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;


The text-decoration property allows you to underline, overline and put a line through your text

text-decoration: normal;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink; (DO NOT USE)


The Font variant property allows you to create the small-caps effect which capitalizes the letters then decreases the font size.

font-variant: normal;
font-variant: small-caps;
font-variant: inherit;

More resources from three{styles}:

  1. Creating Drop Caps

  2. Creating Attractive Paragraphs

  3. Line-height Examples

  4. Emphasize Text

  5. CSS3

Via three{styles}