Botões de login social, links para canais de redes sociais – em 2020 isto ainda é uma coisa no design da web e design de aplicações. Quero dizer, que negócio não é hoje em dia nos meios de comunicação social? É uma necessidade!
Saber quais são as diferentes fontes e cores utilizadas pelas redes sociais (para que as possamos utilizar nos nossos designs) é bastante útil. É algo que “google” sempre que desenhamos uma aplicação ou website. (Por exemplo, “azul do Facebook”, “valor hexadecimal do Facebook”, “Qual é a cor usada pelo Facebook?”, e assim por diante).
Na verdade, aposto que foi assim que encontrou este artigo!
Bem, não o vou fazer esperar mais. Vamos ver as fontes e cores utilizadas pelo Messenger (pelo Facebook), Instagram (pelo Facebook), WhatsApp (pelo Facebook), o próprio Facebook, Twitter, Pinterest, LinkedIn, Snapchat, e finalmente, Google/YouTube.
Este artigo foi actualizado em 2020 para mostrar as novas fontes e cores utilizadas pelas redes sociais, incluindo Facebook, Twitter, Instagram, e várias outras. Google+ não fez um retorno.
Qual é a fonte utilizada por ? 🤔
Nota rápida: as fontes do sistema (i.e. : system-ui em CSS) são o padrão, salvo indicação em contrário. Para cada meio, isto significa:
- Roboto para Android
- Segoe UI para Windows
- São Francisco para iOS/macOS
Desenho de material (i.e. YouTube e outras aplicações Google) também usa Roboto. No entanto, o logotipo actual do Google utiliza a própria fonte Product Sans do Google (e isto aplica-se também ao logotipo do Alfabeto).
Messenger, do Facebook
Messenger Color Values
- Messenger hex value:
#0084FF - valor RGB do mensageiro:
rgb(0 132 255)
Messenger Fonts
Messenger on macOS usa Helvetica Neue em vez de San Francisco, mas tudo o resto segue o padrão do sistema.
Instagrama, por Facebook
Instagrama Valores de Cor
- Instagrama valor hex:
#E1306C - Instagrama valor RGB:
rgb(225 48 108)
Instagrama utiliza muitas cores na sua marca, embora o valor da cor acima mencionado seja o utilizado nos seus próprios exemplos.
WhatsApp, por Facebook
WhatsApp Color Values
- WhatsApp hex value:
#25D366 - WhatsApp valor RGB:
rgb(37 211 102)
Facebook, por Facebook (lol)
Facebook Color Values
- Facebook hex value:
#1877F2 - Valor RGB do Facebook:
rgb(24 119 242)
Twitter Color Values
- Twitter hex value:
#1DA1F2 - valor RGB do twitter:
rgb(29 161 242)
Interesse
Valores de cor de interesse
- Valor hexadecimal de interesse:
#E60023 - Valor RGB de interesse:
rgb(230 0 35)
Pontas de interesse
Pinteresse usa Helvetica/Neue Haas Grotesk para o seu website, mas a fonte padrão do sistema para tudo o resto.
LinkedIn Valores de cor
- Hex:
#1666C5
RGB: rgb(22 102 197)
LinkedIn Fonts
LinkedIn usa : Sans-Serif no seu website, o que significa Helvetica first/Arial second/system default otherwise.
Snapchat
Snapchat Color Values
- Hex:
#FFFC00 - RGB:
rga(255 252 0)
Fontes de Snapchat
Snapchat usa a fonte Graphik!
YouTube
p>Android, Google, e aplicações de propriedade do Google como o YouTube utilizam o sistema de design conhecido como Material Design, que faz referências a várias cores e também recomenda o uso da fonte Roboto.
Valores de cor do YouTube
- Hex:
#FF0000 - RGB:
rgb(255 0 0)
Google Blue Color Value
- Hex:
#4285F4
RGB: rgb(66 133 244)
Google Valor da cor vermelha
- Hex:
#EA4335
RGB: rgb(234 67 53)
Google Valor da Cor Amarela
- Hex:
#FBBC05
RGB: rgb(251 188 5)
Google Green Color Value
- Hex:
#34A853
RGB: rgb(52 168 83)
Alphabet Red Color Value
Alphabet é a empresa proprietária do Google.
- Hex:
#ED1C24
RGB: rgb(52 168 83)
Cores de Meios Sociais como Variáveis CSS
Colocar este trecho de código no topo do seu ficheiro CSS para usar as cores de marcas de meios sociais (RGB) acima mencionadas como variáveis 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;}Então chame-as assim:
.social-icon.facebook { background-color: rgb(var(--facebook)); // without alpha background-color: rgb(var(--facebook) / 50%); // with alpha}Ainda não encontrou o que procura? Não se preocupe – temos um guia de fontes gratuitas que o fará ser bem tratado.