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

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

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.

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.

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.

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.

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.

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

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?

Un font sans-serif in CSS. Ogni lettera è un div con una class corrispondente alla lettera da rappresentare. Se l’approccio è terribile dal punto di vista dell’accessibilità, permette però di animare le varie parti di una lettera, o colorarle in maniera differente, o applicarvi qualsiasi animazione CSS vogliate.

Medium.com è superfluo?

Matthew Butterick (l’autore del bellissimo Butterick’s Practical Typography) ha risposto a un post uscito su Medium alcuni giorni fa, in cui l’autore illustrava come le macchine da scrivere abbiano contribuito a imbruttire la tipografia. L’argomento del post di Butterick non sono tanto le macchine da scrivere, quanto Medium stesso, e perché esista (una questione interessante, secondo me).

L’idea di uno YouTube dei testi può sembra buona — ma il costo di pubblicazione di un articolo, o gestione del design, è praticamente zero. Secondo Butterick, al web odierno Medium non aggiunge nuove possibilità: ne chiude e basta, limitando le opzioni, racchiudendo tutto nella stessa confezione. Medium priva gli autori del controllo sui propri pezzi, sulla loro presentazione e distribuzione. E nonostante Medium dia molta attenzione alla tipografia e alla presentazione, questa rimane identica per ogni testo: se il ruolo della tipografia è migliorare il testo per il lettore, testi differenti richiedono tipografia differente.

Ogni storia su Medium si presenta in ugual modo — come proveniente più da Medium, che da un autore specifico. Personalmente, non capisco chi ha un blog e decide di pubblicare pezzi su Medium, a meno che non lo si faccia per ottenere una maggiore diffusione. Perché a questo Medium si riduce: a uno strumento per promuovere un “contenuto”. Medium non è uno strumento per la scrittura, ma per la promozione della scrittura.

Medium serve a creare l’illusione che tutto quello che sta al suo interno faccia parte di un ecosistema editoriale. Medium vorrebbe, come il New York Times, riuscire a conferire autorità ad un pezzo semplicemente mettendoci il suo logo. Funziona anche grazie ai (pochi) autori che Medium paga per produrre contenuti, che ne portano altri attratti dal “prestigio” della piattaforma.

Medium, scrive Butterick, è marketing al servizio del marketing:

In verità, il prodotto principale di Medium non è una piattaforma per la pubblicazione, ma la promozione della stessa. Questa promozione porta lettori e scrittori sul sito. Questi generano i contenuti e i dati che servono ai pubblicitari. Ridotto così, Medium è semplicemente marketing al servizio di altro marketing. Non è un “posto per le idee”. È un posto per i pubblicitari. È, quindi, totalmente superfluo.

“Ma cosa mi dici riguardo a tutti gli articoli scritti su Medium?” La misura dell’inutilità non risiede negli articoli. Piuttosto, risiede in ciò che Medium aggiunge alla scrittura e agli articoli. Ricordate la questione iniziale: in che modo Medium migliore Internet? Non ho trovato una singola storia su Medium che non avrebbe potuto esistere altrettanto bene altrove.

La retorica con cui il sito viene presentato — il posto in cui scambiarsi le idee, una specie di conferenza TED testuale — serve a promuovere un sito di cui potremmo tranquillamente fare a meno.

Bellissimo articolo da Designing Medium. Designing Medium è la raccolta di Medium in cui i designer, programmatori e ideatori del sito raccontano, spiegano e giustificato le scelte che hanno fatto. Alla tipografia è stata riposta un’attenzione quasi ossessiva, e i vari problemi (e le soluzioni a cui sono giunti) sono stati esposti nel corso di sei articoli.

Death to Typewriters è uno di questi, in cui Marcin Wichary racconta come le macchine da scrivere abbiano imbruttito la tipografia, portando a un abbandono (nella stampa di massa, prima, nei computer — che hanno influenzato —, poi) di alcune convenzioni che solo adesso — grazie a display retina e HTML5/CSS3 — stanno ricominciando a diffondersi sui nostri schermi, sul web e nel software.

I blame typewriters for double-handedly setting typography back by centuries. Type before typewriters was a beautiful world filled with hard-earned nuance and richness, a universe of tradition and craftsmanship where letters and their arrangement could tell as many stories as the words and passages they portrayed.

Un semplicissimo comando, da incollare dentro Terminale, per installare sul proprio Mac tutti i font di Google Fonts.

curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/install.sh | sh

(Quanto durerà Google Fonts?)

Sans Serriffe

Il primo aprile del 1977 il Guardian pubblica una mappa di quella che sostiene essere una nuova isola, scoperta nell’Oceano Indiano. Se il nome dell’isola (Sans Serriffe) non fosse di per sé già abbastanza sospetto, basta soffermarsi sui nomi dei luoghi riportati sulla mappa (Bodoni, Gill Sands, Upper Caisse, Garamondo) per capire lo scherzo del Guardian ai lettori.

(Spiegazioni tipografiche alla fonte — ovvero /mapporn di Reddit. Dalla newsletter settimanale di Pietro Minto)

Si chiama così il font che Apple ha creato — e che utilizza — per l’iWatch. La descrizione di Fast Company:

Seemingly inspired by Helvetica and FF Din, San Francisco is designed specifically for smaller displays: there’s plenty of space between each letter, and Apple seems to be avoiding extraordinarily thin lettering that wouldn’t play well on already cramped watch screens. Yet as some have already noticed, San Francisco also looks gorgeous on Retina Displays as a replacement Mac default typeface.

Se volete utilizzarlo su Mac — sul quale è bellissimo — seguite questa guida. Dato il nome, San Francisco, alcuni ipotizzano che Apple sia intenzionata a renderlo il font di sistema principale di Macintosh.