Social-Login-Buttons, Links zu Social-Media-Kanälen – im Jahr 2020 ist das immer noch ein Ding im Webdesign und App-Design. Ich meine, welches Unternehmen ist heutzutage nicht in den sozialen Medien vertreten? Es ist eine Notwendigkeit!
Zu wissen, was die verschiedenen Schriftarten und Farben sind, die von sozialen Netzwerken verwendet werden (so dass wir sie in unseren Designs verwenden können), ist ziemlich praktisch. Es ist etwas, das wir jedes Mal „googeln“, wenn wir eine App oder Website entwerfen. (z. B. „Facebook-Blau“, „Facebook-Hex-Wert“, „Welche Farbe wird von Facebook verwendet?“ und so weiter).
In der Tat, ich wette, so haben Sie diesen Artikel gefunden!
Nun, ich werde Sie nicht länger warten lassen. Werfen wir einen Blick auf die Schriftarten und Farben, die von Messenger (von Facebook), Instagram (von Facebook), WhatsApp (von Facebook), Facebook selbst, Twitter, Pinterest, LinkedIn, Snapchat und schließlich Google/YouTube verwendet werden.
Dieser Artikel wurde 2020 aktualisiert, um die neueren Schriftarten und Farben zu zeigen, die von sozialen Netzwerken verwendet werden, darunter Facebook, Twitter, Instagram und verschiedene andere. Google+ hat kein Comeback geschafft.
Welche Schriftart wird verwendet? 🤔
Kurzer Hinweis: Systemschriften (d.h. : system-ui in CSS) sind der Standard, sofern nicht anders angegeben. Für jedes Medium bedeutet dies:
- Roboto für Android
- Segoe UI für Windows
- San Francisco für iOS/macOS
Das Material Design (d.h. YouTube und andere Google-Apps) verwendet ebenfalls Roboto. Das eigentliche Google-Logo verwendet jedoch die Google-eigene Schriftart Product Sans (dies gilt auch für das Alphabet-Logo).
Messenger, von Facebook
Messenger-Farbwerte
- Messenger-Hex-Wert:
#0084FF - Messenger RGB-Wert:
rgb(0 132 255)
Messenger-Schriftarten
Messenger auf macOS verwendet Helvetica Neue anstelle von San Francisco, aber alles andere folgt dem Systemstandard.
Instagram, von Facebook
Instagram-Farbwerte
- Instagram Hex-Wert:
#E1306C - Instagram RGB-Wert:
rgb(225 48 108)
Instagram verwendet viele Farben in ihrem Branding, obwohl der oben genannte Farbwert derjenige ist, der in ihren eigenen Beispielen verwendet wird.
WhatsApp, von Facebook
WhatsApp-Farbwerte
- WhatsApp Hex-Wert:
#25D366 - WhatsApp RGB-Wert:
rgb(37 211 102)
Facebook, by Facebook (lol)
Facebook Farbwerte
- Facebook Hex-Wert:
#1877F2 - Facebook RGB-Wert:
rgb(24 119 242)
Twitter Farbwerte
- Twitter Hex-Wert:
#1DA1F2 - Twitter RGB-Wert:
rgb(29 161 242)
Pinterest Farbwerte
- Pinterest Hex-Wert:
#E60023 - Pinterest RGB-Wert:
rgb(230 0 35)
Pinterest Schriftarten
Pinterest verwendet Helvetica/Neue Haas Grotesk für die Website, aber die Standard-Systemschriftart für alles andere.
LinkedIn Farbwerte
- Hex:
#1666C5 - RGB:
rgb(22 102 197)
LinkedIn-Schriftarten
LinkedIn verwendet : Sans-Serif auf seiner Website, das heißt Helvetica first/Arial second/Systemstandard ansonsten.
Snapchat
Snapchat Farbwerte
- Hex:
#FFFC00 - RGB:
rga(255 252 0)
Snapchat-Schriftarten
Aus der Herde herausstechend, verwendet Snapchat die Schriftart Graphik!
YouTube
Android, Google und Google-eigene Apps wie YouTube verwenden das als Material Design bekannte Designsystem, das auf verschiedene Farben verweist und auch die Verwendung der Roboto-Schriftart empfiehlt.
YouTube Farbwerte
- Hex:
#FF0000 - RGB:
rgb(255 0 0)
Google Blau Farbwert
- Hex:
#4285F4 - RGB:
rgb(66 133 244)
Google Rot Farbwert
- Hex:
#EA4335 - RGB:
rgb(234 67 53)
Google Gelb Farbwert
- Hex:
#FBBC05 - RGB:
rgb(251 188 5)
Google Grün Farbwert
- Hex:
#34A853 - RGB:
rgb(52 168 83)
Alphabet Rot Farbwert
Alphabet ist das Unternehmen, dem Google gehört.
- Hex:
#ED1C24 - RGB:
rgb(52 168 83)
Social-Media-Farben als CSS-Variablen
Platzieren Sie diesen Codeschnipsel am Anfang Ihrer CSS-Datei, um die oben genannten Social-Media-Markenfarben (RGB) als CSS-Variablen zu verwenden:
: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;}Dann rufen Sie sie wie folgt auf:
.social-icon.facebook { background-color: rgb(var(--facebook)); // without alpha background-color: rgb(var(--facebook) / 50%); // with alpha}Sie haben immer noch nicht gefunden, wonach Sie suchen? Keine Sorge – wir haben einen Leitfaden für kostenlose Schriftarten, der Ihnen weiterhilft.