Sociale inlogknoppen, links naar social media-kanalen – in 2020 is dit nog steeds een ding in webdesign en app-design. Ik bedoel, welk bedrijf zit er tegenwoordig niet op social media? Het is een noodzaak!
Weten wat de verschillende lettertypes en kleuren zijn die door sociale netwerken worden gebruikt (zodat we ze in onze ontwerpen kunnen gebruiken) is best handig. Het is iets dat we elke keer “googelen” als we een app of website ontwerpen. (Bijvoorbeeld, “Facebook blauw”, “Facebook hex waarde”, “Wat is de kleur die Facebook gebruikt?”, enzovoort).
In feite, ik wed dat je zo dit artikel hebt gevonden!
Wel, ik zal je niet langer laten wachten. Laten we eens kijken naar de lettertypen en kleuren die worden gebruikt door Messenger (door Facebook), Instagram (door Facebook), WhatsApp (door Facebook), Facebook zelf, Twitter, Pinterest, LinkedIn, Snapchat, en tot slot, Google/YouTube.
Dit artikel is bijgewerkt in 2020 om de nieuwere lettertypen en kleuren te tonen die worden gebruikt door sociale netwerken, waaronder Facebook, Twitter, Instagram, en diverse anderen. Google+ maakte geen comeback.
Wat is het lettertype dat wordt gebruikt door ? 🤔
Quick note: systeemlettertypen (d.w.z. : system-ui in CSS) zijn de standaard, tenzij anders vermeld. Voor elk medium betekent dit:
- Roboto voor Android
- Segoe UI voor Windows
- San Francisco voor iOS/macOS
Material design (d.w.z. YouTube en andere Google-apps) gebruikt ook Roboto. Het eigenlijke Google-logo gebruikt echter Google’s eigen Product Sans-lettertype (en dit geldt ook voor het Alphabet-logo).
Messenger, door Facebook
Messenger-kleurwaarden
- Messenger hex-waarde:
#0084FF - Boodschapper RGB-waarde:
rgb(0 132 255)
Messenger Fonts
Messenger op macOS gebruikt Helvetica Neue in plaats van San Francisco, maar al het andere volgt de standaardinstelling van het systeem.
Instagram, door Facebook
Instagram-kleurwaarden
- Instagram hex-waarde:
#E1306C - Instagram RGB-waarde:
rgb(225 48 108)
Instagram gebruikt veel kleuren in hun branding, hoewel de hierboven genoemde kleurwaarde de waarde is die in hun eigen voorbeelden wordt gebruikt.
WhatsApp, door Facebook
WhatsApp-kleurwaarden
- WhatsApp hex-waarde:
#25D366 - WhatsApp RGB-waarde:
rgb(37 211 102)
Facebook, door Facebook (lol)
Facebook kleurwaarden
- Facebook hex waarde:
#1877F2 - Facebook RGB-waarde:
rgb(24 119 242)
Twitter kleurwaarden
- Twitter hex-waarde:
#1DA1F2 - Twitter RGB-waarde:
rgb(29 161 242)
Pinterest Kleurwaarden
- Pinterest hex-waarde:
#E60023 - Pinterest RGB-waarde:
rgb(230 0 35)
Pinterest Lettertypen
Pinterest gebruikt Helvetica/Neue Haas Grotesk voor hun website, maar het standaard systeemlettertype voor al het andere.
LinkedIn Kleurwaarden
- Hex:
#1666C5 - RGB:
rgb(22 102 197)
LinkedIn lettertypes
LinkedIn gebruikt : Sans-Serif op hun website, dat wil zeggen Helvetica first/Arial second/system default else.
Snapchat
Snapchat-kleurwaarden
- Hex:
#FFFC00 - RGB:
rga(255 252 0)
Snapchat lettertypes
Steken boven de kudde uit, Snapchat gebruikt het Graphik lettertype!
YouTube
Android, Google en apps die eigendom zijn van Google, zoals YouTube, gebruiken het ontwerpsysteem dat bekend staat als Material Design, dat verwijst naar verschillende kleuren en ook het gebruik van het Roboto-lettertype aanbeveelt.
YouTube Kleurwaarden
- Hex:
#FF0000 - RGB:
rgb(255 0 0)
Google Blue Color Value
- Hex:
#4285F4 - RGB:
rgb(66 133 244)
Google Rode Kleurwaarde
- Hex:
#EA4335 - RGB:
rgb(234 67 53)
Google Gele Kleurwaarde
- Hex:
#FBBC05 - RGB:
rgb(251 188 5)
Google Groene Kleurwaarde
- Hex:
#34A853 - RGB:
rgb(52 168 83)
Alphabet Rode Kleurwaarde
Alphabet is het bedrijf dat eigenaar is van Google.
- Hex:
#ED1C24 - RGB:
rgb(52 168 83)
Social Media Kleuren als CSS Variabelen
Plaats dit codefragment bovenaan uw CSS bestand om de eerder genoemde social media merkkleuren (RGB) als CSS variabelen te gebruiken:
: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;}Oproep ze dan als volgt:
.social-icon.facebook { background-color: rgb(var(--facebook)); // without alpha background-color: rgb(var(--facebook) / 50%); // with alpha}Heeft u nog steeds niet gevonden wat u zocht? Maak je geen zorgen – we hebben een gids voor gratis lettertypen waarmee je aan de slag kunt.