A web typography learning game
In its first era of popularity, it was all pop and pulp, but now it seems reserved for the task of adding just the slightest bit of a smirk to extremely straight-faced endeavors: elegant magazines, important books, experimental theater, and $80 ceramic pipes.
I didn’t realise how popular this typeface was until I stumbled across this article and started noticing it in bookshops or books I myself own (Mark Grief’s Against Everything).
It was used on the first cover of James Joyce’s Finnegans Wake and for the credits of Friends. Quite a weird mix.
Font Editing for Everyone
After reading extensively on typography, and seeing what works (IRL), I developed the following list of guidelines that have consistently helped me with typographic design. Hopefully, you can apply these tips to start improving the your own typographic design process — without turning you into a snob.
- Start by choosing a typeface for your body text.
- Avoid using more than two typefaces.
- Balance line spacing and font size.
- Keep your line length around 45–90 characters.
- Use a modular scale.
- Pay special attention to proper punctuation.
Just minutes ago, at the ATypI conference in Warsaw, the world was introduced to a new kind of font: a variable font. Jointly developed by Apple, Google, Microsoft, and Adobe, a variable font is, as John Hudson put it, “a single font file that behaves like multiple fonts”. Imagine a single font file gaining an infinite flexibility of weight, width, and other attributes without also gaining file size — and imagine what this means for design.
Type is tied to its medium. Both movable type and phototypesetting methods influenced the way that type was designed and set in their time. Today, the inherent responsiveness of the web necessitates flexible elements and relative units—both of which are used when setting type. Media queries are used to make more significant adjustments at different breakpoints.
However, fonts are treated as another resource that needs to be loaded, instead of a living, integral part of a responsive design. Changing font styles and swapping out font weights with media queries represent the same design compromises inherent in breakpoints.
Why would we want this sort of flexibility on the web? Because loading multiple weights and widths is impractical in some cases and outright foolish in most. Yet the ability to stretch and expand a single responsive font file would supply improved performance23, as only one font would need to be requested, and typographic subtlety, since we could adjust the text as we see fit.
Grazie a una collaborazione fra Apple, Adobe, Microsoft e Google, il formato OpenType include ore una specifica per dei font variabili: font che invece di avere un peso predefinito (grassetto, normale o leggero; per esempio) possono calcolarlo e adattarlo partendo da una font family di base, a seconda del contesto.
Most monospaced typefaces are dictated by text-intensive usage at very small point sizes, but we were captivated by the possibility of a monospace writ large, as it is in our collective mind’s eye: a few words projected on a large display, rendered in overly simplified, appealingly vague pieces of warning or counsel that only a trained operator understands, all witnessed via screen-within-imaginary-screen, aboard interplanetary vessels and hovering automobiles. Our evergreen touchstone for this notion, despite its proportional construction, is Aldo Novarese’s Microgramma, 1952 (and later Eurostile, 1962), its distinctive uppercase ‘R’ leading the way and subsequently echoed in our own drawing.
Google Fonts ha un nuovo design, che dà più risalto i singoli font e aiuta a scegliere e comparare le 804 famiglie tipografiche che il servizio offre.
Scrivere una frase TUTTA IN MAIUSCOLO, CON L’INTENTO DI ENFATIZZARLA, può in realtà rivelarsi controproducente, risultando meno leggibile:
Because we see words as shapes, big rectangular blocks of all caps take us much longer to process. In an emergency, that extra time to decipher an urgent message may come at a cost. […]
So why do we use all caps instead of bold or italic or even highlighted? Because back when lawyers used typewriters, the only simple way to emphasize anything was to use ALL CAPS. And while today our fancy post-typewriter machines could certainly render the text in other “conspicuous” ways, tradition is hard to break. Just ask the weather service.
Type Burrito spiega, semplicemente, per chi non ne capisce molto e si sente intimidito, come combinare e scegliere i font:
If you have two fonts that work together but still seem a little too similar, try changing the size or weight to add some variety.
Need more unity? The easiest place to start is to look at the shapes of the letterforms. Or try something more subtle and sophisticated: unify your typography by finding type designed around the same time, or to find type inspired by the same tool or medium (broad-nib pen, carved in stone, etc—you can usually figure this out with just a bit of googling).
About two years ago, H&Co Senior Designer Andy Clymer proposed that we design a monospace typeface. Monospace (or “fixed-width”) typefaces have a unique place in the culture: their most famous ancestor is the typewriter, and they remain the style that designers reach for when they want to remind readers about the author behind the words. Typewriter faces have become part of the aesthetic of journalism, fundraising, law, academia, and politics; a dressier alternative to handwriting, but still less formal than something set in type, they’re an invaluable tool for designers. […]
The command-line editor — these days, home to so many people who design things — could really be improved by a fully fixed-width typeface. What if, in addition to shedding the unwanted baggage of the typewriter, we also looked to the programming environment as a place where type could make a difference? Like many screen fonts before it, Operator could pay extra attention to the brackets and braces and punctuation marks more critical in code than in text. But if Operator took the unusual step of looking not only to serifs and sans serifs, but to script typefaces for inspiration, it could do a lot more. It could render the easily-confused I, l, and 1 far less ambiguous.