Material Icons Extended

Nella dashboard di Blogger il gestore di un blog può vedere per ogni post il titolo, la data di pubblicazione, l’autore e due dati: il numero di commenti e il numero di visualizzazioni.

Questi non sono indicati da parole: accanto alle cifre ci sono delle icone, una a forma di nuvoletta per indicare i commenti e una a forma di istogramma per indicare le visualizzazioni.

Ieri mattina appena ho aperto la pagina per un attimo al posto delle icone ho visto semplicemente dei tofu, ossia dei quadrati dentro cui era indicato il valore Unicode del simbolo.

Che significa questo? Significa che quei glifi sono tratti da un font, e che quel font non è installato sul mio computer. Il browser, aprendo la pagina, la visualizza inizialmente con i font di sistema, e nel frattempo chiede al server i font necessari alla visualizzazione corretta. Questo implica un rapido cambio di stile per le lettere dell’alfabeto contenute in font non installati, o il passaggio da tofu a glifo per quanto riguarda i simboli non supportati dai caratteri di sistema.

Con Firefox è facile risalire al font utilizzato senza dover studiare tutto il codice. Si chiama Material Icons Extended.

È tratto fa fonts.gstatic.com, ossia il server di Google Fonts.

Però non è qualcosa che si trova insieme con i font normali, non fa parte di quell’elenco.

Per poterlo utilizzare bisogna fare riferimento al menù che compare sulla sinistra, in verticale, nella visualizzazione che è stata adottata solo pochi giorni fa. Le varie opzioni sono: Fonts, Noto, Icons, Knowledge e Faq. Bisogna cliccare su Icons.

La pagina di benvenuto fornisce una introduzione: “Material Simbols sono le nostre nuove icone che raccolgono 3,061 glifi in un unico file di caratteri con un largo raggio di varianti nel disegno. I simboli sono disponibli in tre stili normali e quattro adjustable variable font styles: fill, weight, grade e optical size.

Il menù dei filtri è molto ricco.

All’inizio compare un interruttore chiamato Fill, che regola il riempimento dei glifi. Normalmente la stella è in versione outline; attivare il Fill la riempie. C’è una freccia nera nell’interno bianco di un cerchio nero; attivare il Fill fa diventare la freccia bianca all’interno del cerchio nero.

L’opzione Weight di default è a 400. La si può variare, di cento in cento, tra 100 e 700. Questo aumenta di poco lo spessore delle linee, assottigliandolo o aumentandolo, senza mai ottenere effetti sgradevoli.

L’opzione Grade è simile a Weight, ma più impercettibile.

L’Optical Size può essere impostata in quattro valori tra 20 e 48 pixel. Serve per adattare i glifi a vari contesti, a seconda delle dimensioni in cui devono essere visualizzati. Diciamo che più aumenta la dimensione e più si assottiglia lo spessore dei tratti, in proporzione.

Due menù a discesa permettono di scegliere tra Material Symbols e Icons e tra Outlined, Rounded e Sharped.

Infine, i pulsanti Category permettono di arrivare rapidamente alle icone che si stanno cercando: Activities, Android, Audio&Video, Business&Payments, Common Actions, Communication, Hardware, Home, Household, Maps, Photo&Image, Privacy&Security, Social, Text Formatting, Transportation, Travel e Ui Actions.

I due glifi che sono stati usati per le statistiche del post si chiamano uniE253 e uniE9E6, e ovviamente si trovano nell’Area di Uso Privato del font.

La versione usata è quella Fill.

Sul sito di Google Fonts, il primo si chiama Mode Comment, ed è uguale a quello che si chiama Chat Bubble, a parte il fatto che ne è la versione rispecchiata in orizzontale.

Fa parte della categoria Communication.

Il secondo si chiama Stacked Bar Chart, e si trova nella categoria Business&Payments.

Passando il puntatore sul titolo di ciascun post, compaiono altri simboli tratti sempre dallo stesso font. E i simboli del menù di sinistra (Post, Statistiche, Commenti, Utili, Pagine, Layout, Tema, Impostazioni, Elenco Lettura) pure arrivano da lì.

Quello del Tema raffigura un rullo da pittore, ed è la versione rispecchiata di quello che Google presenta col nome di Imagesearch Roller.

La versione che si vede su Google Fonts ha il manico a sinistra e il suo codice è uniE9B4.

Quella che è usata da Blogger ha il manico che piega a destra e il suo codice è uniE243.

Commenti

Post più popolari