Font e colori di Facebook, X, Instagram e altri
Avere una collezione di risorse di marca utilizzate dai social network, in modo che possiamo incorporarle nei nostri progetti, è abbastanza utile.
È qualcosa che cerchiamo su Google ogni volta quando sviluppiamo un'app o un sito Web (qual è il colore utilizzato da Facebook?, Qual è il codice colore di Facebook?, o semplicemente, Facebook blu).
Beh, non ti faremo aspettare. Diamo un'occhiata ai colori e ai caratteri utilizzati da Facebook, X, Pinterest, Instagram, Snapchat, LinkedIn, Facebook Messenger, YouTube e Google Material Design.
Mostrami solo i colori principali (Facebook, X, Instagram, YouTube, Pinterest).
Facebook Blu Codici Colore
- Hex: #4267b2
- RGB: 66,103,178
Font Facebook
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Facebook utilizza il font Segoe UI per la versione Windows del proprio sito Web desktop e il font San Francisco creato da Apple per la versione macOS (entrambi sono i font di sistema predefiniti).
Per iOS e Android, sono rispettivamente San Francisco e Roboto (ancora, entrambi i font di sistema, per la leggibilità e la familiarità), che stanno diventando uno standard.
X (già Twitter)
Nel luglio 2023 Twitter è diventato X, e con il nome è cambiato tutto il resto: il celeste che questo articolo consigliava dal 2019 non è più il colore del marchio.
X Codici Colore
- Hex: #000000
- RGB: 0,0,0
Il marchio è nero su bianco, o bianco su nero. Il vecchio celeste (#1DA1F2, e prima ancora la variante più chiara #38A1F3) è in pensione: se lo trovi ancora in una brand guideline, quella guideline è di prima del 2023.
Font X
- Interfaccia: Chirp
- iOS: San Francisco
- Android: Roboto
Chirp è il carattere proprietario introdotto nel 2021, quando la piattaforma si chiamava ancora Twitter, ed è rimasto dopo il cambio di nome. Non è distribuito: si può guardare, non usare. Per avvicinarsi, un grotesk neutro con la stessa impostazione fa il suo lavoro.
Pinterest Codici Colore
- Hex: #BD081C
- RGB: 189,8,28
Il classico colore rosso di Pinterest non è mai cambiato.
Font Pinterest
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Mentre Pinterest utilizza all'incirca gli stessi caratteri standard degli altri social network, Pinterest usa il font Hiragino per il giapponese e altre lingue orientali, che si legge meglio rispetto ai caratteri usati con le lingue romane. Lo sapevi?
Instagram Grey Codici Colore
- Hex: #231F20
- RGB: 35,31,32
Instagram usa anche una combinazione di diversi gradienti. È difficile capire quali sono i singoli colori e in quale scenario dovrebbero essere utilizzati, ma qui puoi trovare tutti gli asset del brand di Instagram. Per essere onesti, è raro vedere questi colori in natura - quelli che fanno riferimento ai loro canali di social media tendono a utilizzare "Instagram Gray".
Font Instagram
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
Niente di straordinario qui. Come vedi, Segoe UI, San Francisco e Roboto sono diventati uno standard dei social network. Con Instagram non è diverso.
Snapchat
Snapchat Codici Colore
- Hex: #FFFC00
- RGB: 255,252,0
Font Snapchat
- Windows: Avenir Next
- macOS: Avenir Next
- iOS: San Francisco
- Android: Roboto
Stranamente, il font utilizzato nella versione web di Snapchat è un po' diverso dalla maggior parte, poiché la maggior parte tende a tornare al font di sistema. Il logo Snapchat, tuttavia, utilizza Avenir Next.
Facebook Messenger
Facebook Messenger Codici Colore
Sebbene sia un'app Facebook, il blu utilizzato da Messenger è leggermente diverso:
- Hex: #0084FF
- RGB: 0,132,255
E il logo usa anche questo colore:
- Hex: #00C6FF
- RGB: 0,198,255
Facebook Messenger Font
Messenger utilizza lo stesso set di caratteri di Facebook:
- Windows: Segoe UI
- macOS: San Francisco
- iOS: San Francisco
- Android: Roboto
LinkedIn Codici Colore
- Hex: #0077B5
- RGB: 0,119,181
LinkedIn Font
LinkedIn usa Source Sans in esclusiva (con Arial come backup), in particolare con i pesi tra luce e semi-grassetto. Leggi le linee guida sui marchi di Linkedin qui.
Nota: Source Sans non ha uno stile corsivo, quindi ripiega su Georgia. Strano, ma è così.
YouTube
YouTube Codici Colore
- Hex: #ED3833
- RGB: 237,56,51
YouTube Font
YouTube, proprietà di Google, utilizza solo Roboto.
Bonus: Google Material Design
Sì, è vero. Tutte le app Google e molte app Android di terze parti (per familiarità e coerenza) utilizzano il sistema di progettazione Google noto come Material Design System.
Il design del materiale contiene un sistema di colori, di colori accettabili (non richiesto ma consigliato) e il carattere predefinito e ampiamente riconosciuto di Google, Roboto.
