tag: Typography

Consigli per una tipografia migliore

The Design Team:

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.

  1. Start by choosing a typeface for your body text.
  2. Avoid using more than two typefaces.
  3. Balance line spacing and font size.
  4. Keep your line length around 45–90 characters.
  5. Use a modular scale.
  6. Pay special attention to proper punctuation.

PERMALINK COMMENTA TWEET

Font variabili

Typekit:

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.

A List Apart:

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.

Robin Rendle:

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.

PERMALINK COMMENTA TWEET

Space Mono, una nuova font disponibile via Google Fonts

Colophon Fundry:

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.

Molto bella.

PERMALINK COMMENTA TWEET

C’è un nuovo Google Fonts

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.

PERMALINK COMMENTA TWEET

Come la tipografia può salvarti la vita

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.

PERMALINK COMMENTA TWEET

Combinare i font: una guida semplice

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

PERMALINK COMMENTA TWEET

Operator, la nuova font monospace di Hoefler & Co

Jonathan Hoefler:

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.

Ma quanto è bella?

PERMALINK COMMENTA TWEET

Tipoteca Italiana

Video

Tipoteca Italiana

(via @gustomela)

PERMALINK COMMENTA TWEET

Acumin, il sans-serif di Adobe per ebook

Adobe ha rilasciato un nuovo font, Acumin, studiato apposta per diventare l’Helvetica degli ebook:

When Robert Slimbach saw the movie Helvetica, his thought was: but it’s all signage! There was no talk about text. He reflected that Helvetica had always been a display typeface, never really designed for text, but that it had become so popular that it got forced into the mold of a text typeface and used that way constantly. It could be very appealing for that use, with its even appearance, but its design parameters and letterfit didn’t really suit text.

PERMALINK COMMENTA TWEET

I segreti di San Francisco

Akinori Machino:

Helvetica, which was replaced by San Francisco fonts, was created in Switzerland in 1957, when there were no digital devices. Helvetica is widely used by many companies as the corporate type even now, and no doubt it will be used for the future as a great classic font.

San Francisco, on the other hand, is a modern font. It will change the typefaces dynamically according to the context. It is a kind of “Digital Native” fonts for the digital age.

Diciamo che è responsive.

PERMALINK COMMENTA TWEET

Come distanziare le lettere

John Djameson ha scritto una utilissima guida su come distanziare i caratteri. Spesso, nell’impostare la tipografia di un testo sul web la proprietà letter-spacing viene dimenticata e ignorata — forse perché richiede un po’ di abilità e conoscenza, per evitare pasticci.

Djameson la fa molto breve:

  • è cosa buona (in genere) aumentare la distanza fra le lettere in un testo tutto in maiuscolo (0.2–0.25 em per i titoli)
  • il carattere del testo principale (body) dovrebbe mantere la distanza originaria
  • più il testo è piccolo più la distanza fra caratteri dovrebbe aumentare
  • mentre per quanto riguarda la pesantezza del carattere: più questa aumenta, più la distanza fra caratteri dovrebbe decrescere

PERMALINK COMMENTA TWEET

Come utilizzare il font di sistema nel proprio sito

Se ne era fatto accenno, ma l’altro ieri la possibilità è stata ufficialmente documentata sul blog di WebKit. È possibile utilizzare il font di sistema di iOS e Mac OS (quindi San Francisco) specificandola nel proprio CSS semplicemente con font-family: -apple-system.

È in corso una discussione al W3C per standardizzare la proprietà, ed eventualmente sarà possibile specificarla semplicemente con system. È persino possibile specificare direttamente degli stili, ovvero una determinata dimensione e pesantezza dei caratteri, con queste proprietà:

font: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
font: -apple-system-caption2
font: -apple-system-footnote
font: -apple-system-short-body
font: -apple-system-short-headline
font: -apple-system-short-subheadline
font: -apple-system-short-caption1
font: -apple-system-short-footnote
font: -apple-system-tall-body

PERMALINK COMMENTA TWEET

CSS font-family per San Francisco

Craig Hockenberry:

Apple has started abstracting the idea of a system font: it doesn’t have a publicly exposed name. […]

The motivation for this abstraction is so the operating system can make better choices on which face to use at a given weight. Apple is also working on font features, such as selectable “6″ and “9″ glyphs or non-monospaced numbers. It’s my guess that they’d like to bring these features to the web, as well.

Come risultato di questa astrazione, è possibile chiamare il font di sistema del Mac con un nome generico. Invece di fare riferimento a San Francisco, si può fare riferimento (e, siccome deve funzionare anche per app basate su webview, funziona anche sul web) a -apple-system-font.

Ad esempio:

body {
  font-family: -apple-system-font, HelveticaNeue, LucidaGrande;
}

Tutto questo, come specifica Craig, è molto poco documentato al momento (e non supportato da Chrome).

PERMALINK COMMENTA TWEET

Come abbinare i font

Designmodo ha raccolto alcuni siti bellissimi, e ne ha analizzate le scelte tipografiche, spiegandole anche a chi ne sa poco — quali abbinamenti di font risultano vincenti, e gli accorgimenti di line-height o letter-spacing che sono stati presi.

PERMALINK COMMENTA TWEET

Introduzione a San Francisco

San Francisco

Una sessione del WWDC dedicata a introdurre San Francisco, il nuovo font di OS X e iOS.

Consiglio di guardarla, perché vengono spiegate le differenze fra le diverse famiglie tipografiche (ad esempio, in cosa differisce San Francisco Compact, in uso su Apple Watch, dall’originale) e si entra nei dettagli — e nelle motivazioni — dietro San Francisco.

A presentarla è Antonio Cavedoni, che è bravissimo e spiega molto bene — anche per chi di tipografia sa poco o nulla.

PERMALINK COMMENTA TWEET

‘Perché non uso Helvetica’

Suggerisce delle buone alternative (purtroppo tutte costose!):

I’d try Akzidenz Grotesk, which was the original favourite of the Swiss Style pioneers and is the typeface that Helvetica was largely based upon. It’s twice as old as Helvetica which obviously makes it twice as cool.

Or maybe I’d use Neue Haas Grotesk, which bears Helvetica’s original name and is intended to be far closer to it’s original 1957 design than modern digitised interpretations. It just looks a bit nicer.

PERMALINK COMMENTA TWEET

Dettagli tipografici

L’autore di typedetail.com cercherà di “annotare” un font diverso al giorno, evidenziandone le particolarità. È un progetto molto bello, che ne ricorda uno recente, e simile: 100 giorni di font.

PERMALINK COMMENTA TWEET

RightFont: un font manager per Mac

Applicazione

RightFont: un font manager per Mac

Non è molto più potente di quello che il Mac integra di default, ma è sempre a portata di mano dalla barra dei menù per fornire una veloce (e utile) anteprima dei font installati.

Punto di forza principale, RightFont si integra con la Creative Cloud di Adobe per permettervi di gestire anche i font di TypeKit a cui avete accesso. Riconosce anche quelli che avete installato da Google Font.

Nota a margine: da quando TypeKit permette di utilizzare i propri font sul Mac è diventato indispensabile, per me.

PERMALINK COMMENTA TWEET

Tiff: un sito per confrontare due font

Un sito per confrontare due font diversi fra loro, visualmente, sovrapponendo l’uno all’altro. Supporta tutti i font di Google Fonts.

PERMALINK COMMENTA TWEET

100 giorni di font

Per 100 giorni, ogni giorno, Do-Hee Kim proverà a creare una nuova pagina web[1. Stile splash page] utilizzando di font diversi fra quelli disponibili su Google Font, pubblicando il risultato su 100daysoffonts.com.

Siamo già al 27esimo giorno dall’inizio dell’esperimento e il risultato è ottimo. È bello da ammirare, ma anche utile se avete problemi d’abbinamento o volete scovare dei font buoni su Google Font.

Relativo: Quanto durerà Google Font?

PERMALINK COMMENTA TWEET

Non ne hai avuto abbastanza?

Leggi altri post