Bottoni di accesso sociale, link ai canali dei social media – nel 2020 questo è ancora un elemento del web design e del design delle app. Voglio dire, quale business non è sui social media in questi giorni? È una necessità!
Sapere quali sono i diversi font e colori usati dai social network (in modo da poterli usare nei nostri design) è abbastanza utile. È qualcosa che “cerchiamo su Google” ogni volta che progettiamo un’app o un sito web. (Per esempio, “Facebook blue”, “Facebook hex value”, “Qual è il colore usato da Facebook?”, e così via).
In effetti, scommetto che è così che hai trovato questo articolo!
Bene, non ti farò più aspettare. Diamo un’occhiata ai caratteri e ai colori usati da Messenger (di Facebook), Instagram (di Facebook), WhatsApp (di Facebook), Facebook stesso, Twitter, Pinterest, LinkedIn, Snapchat, e infine Google/YouTube.
Questo articolo è stato aggiornato nel 2020 per mostrare i nuovi caratteri e colori usati dai social network, compresi Facebook, Twitter, Instagram e vari altri. Google+ non ha fatto ritorno.
Qual è il font usato da ? 🤔
Nota veloce: i font di sistema (cioè : system-ui nei CSS) sono lo standard a meno che non sia indicato diversamente. Per ogni mezzo, questo significa:
- Roboto per Android
- Segoe UI per Windows
- San Francisco per iOS/macOS
Anche il material design (cioè YouTube e altre app di Google) usa Roboto. Tuttavia, l’attuale logo di Google utilizza il font Product Sans di Google (e questo vale anche per il logo Alphabet).
Messenger, di Facebook
Valori dei colori di Messenger
- Valore esadecimale di Messenger:
#0084FF - Valore RGB del messaggero:
rgb(0 132 255)
FontsMessenger
Messenger su macOS usa Helvetica Neue invece di San Francisco, ma tutto il resto segue il default di sistema.
Instagram, di Facebook
Valori dei colori di Instagram
- Il valore esadecimale di Instagram:
#E1306C - Valore RGB di Instagram:
rgb(225 48 108)
Instagram usa molti colori nel suo branding, anche se il valore del colore menzionato sopra è quello usato nei loro esempi.
WhatsApp, di Facebook
Valori dei colori di WhatsApp
- Valore esadecimale di WhatsApp:
#25D366 - Valore RGB di WhatsApp:
rgb(37 211 102)
Facebook, by Facebook (lol)
Valori colore di Facebook
- Valore esadecimale di Facebook:
#1877F2 - Valore RGB di Facebook:
rgb(24 119 242)
Valori colore Twitter
- Valore esadecimale Twitter:
#1DA1F2 - Valore RGB di Twitter:
rgb(29 161 242)
Valori colore Pinterest
- Valore esadecimale Pinterest:
#E60023 - Valore RGB di Pinterest:
rgb(230 0 35)
Fonts Pinterest
Pinterest usa Helvetica/Neue Haas Grotesk per il loro sito web, ma il font di sistema predefinito per tutto il resto.
Valori di coloreLinkedIn
- Hex:
#1666C5 - RGB:
rgb(22 102 197)
FontsLinkedIn
LinkedIn usa : Sans-Serif sul loro sito web, il che significa Helvetica primo/Arial secondo/ default di sistema altrimenti.
Snapchat
Valori di colore di Snapchat
- Hex:
#FFFC00 - RGB:
rga(255 252 0)
I caratteri di Snapchat
Si distingue dalla massa, Snapchat usa il carattere Graphik!
YouTube
Android, Google e le app di proprietà di Google come YouTube usano il sistema di design noto come Material Design, che fa riferimento a diversi colori e raccomanda anche l’uso del font Roboto.
Valori dei colori di YouTube
- Hex:
#FF0000 - RGB:
rgb(255 0 0)
Google Blue Color Value
- Hex:
#4285F4 - RGB:
rgb(66 133 244)
Google Valore colore rosso
- Hex:
#EA4335 - RGB:
rgb(234 67 53)
Google Valore colore giallo
- Hex:
#FBBC05 - RGB:
rgb(251 188 5)
Valore colore verde di Google
- Hex:
#34A853 - RGB:
rgb(52 168 83)
Alphabet Red Color Value
Alphabet è la società che possiede Google.
- Hex:
#ED1C24 - RGB:
rgb(52 168 83)
Colori dei social media come variabili CSS
Posiziona questo snippet di codice in cima al tuo file CSS per usare i suddetti colori dei social media (RGB) come variabili CSS:
:root { --messenger: 0 132 255; --instagram: 225 48 108; --whatsapp: 37 211 102; --facebook: 24 119 242; --twitter: 29 161 242; --pinterest: 230 0 35; --linkedin: 22 102 197; --snapchat: 255 252 0; --youtube: 255 0 0;}Poi chiamali in questo modo:
.social-icon.facebook { background-color: rgb(var(--facebook)); // without alpha background-color: rgb(var(--facebook) / 50%); // with alpha}Non hai ancora trovato quello che stai cercando? Non preoccuparti – abbiamo una guida ai font gratuiti che ti aiuterà a risolvere il problema.