Przyciski logowania społecznościowego, linki do kanałów mediów społecznościowych – w 2020 roku to nadal jest rzecz w projektowaniu stron internetowych i aplikacji. Jakiej firmy nie ma w dzisiejszych czasach w mediach społecznościowych? To konieczność!
Znajomość różnych czcionek i kolorów używanych przez sieci społecznościowe (abyśmy mogli je wykorzystać w naszych projektach) jest całkiem przydatna. Jest to coś, co „googlujemy” za każdym razem, gdy projektujemy aplikację lub stronę internetową. (Na przykład, „Facebook blue”, „Facebook hex value”, „What is the color used by Facebook?”, i tak dalej).
Założę się, że właśnie w ten sposób znalazłeś ten artykuł!
Nie będę kazał Ci dłużej czekać. Przyjrzyjmy się czcionkom i kolorom używanym przez Messengera (przez Facebooka), Instagram (przez Facebooka), WhatsApp (przez Facebooka), samego Facebooka, Twittera, Pinteresta, LinkedIn, Snapchata i wreszcie Google/YouTube.
Ten artykuł został zaktualizowany w 2020 roku, aby pokazać nowsze czcionki i kolory używane przez sieci społecznościowe, w tym Facebooka, Twittera, Instagrama i różne inne. Google+ nie zrobił powrotu.
Jaka czcionka jest używana przez ? 🤔
Krótka uwaga: czcionki systemowe (tj. : system-ui w CSS) są standardem, chyba że podano inaczej. Dla każdego medium oznacza to, że:
- Roboto dla Androida
- Segoe UI dla Windows
- San Francisco dla iOS/macOS
Projektowanie materiałów (tj. YouTube i inne aplikacje Google) również używa Roboto. Jednakże logo Google używa własnej czcionki Product Sans (dotyczy to również logo Alphabet).
Messenger, by Facebook
Wartości kolorów Messenger
- Wartość heksadecymalna Messenger:
#0084FF - Wartość RGB Messengera:
rgb(0 132 255)
Czcionki Messengera
Messenger na macOS używa Helvetica Neue zamiast San Francisco, ale wszystko inne jest zgodne z domyślnymi ustawieniami systemowymi.
Instagram, by Facebook
Wartości kolorów Instagrama
- Wartość heksadecymalna Instagrama:
#E1306C - Wartość RGB Instagrama:
rgb(225 48 108)
Instagram używa wielu kolorów w swoim brandingu, chociaż wartość koloru wspomniana powyżej jest tą używaną w ich własnych przykładach.
WhatsApp, by Facebook
Wartości kolorów WhatsApp
- Wartość heksadecymalna WhatsApp:
#25D366 - Wartość RGB WhatsApp:
rgb(37 211 102)
Facebook, by Facebook (lol)
Wartości kolorów Facebooka
- Wartość heksadecymalna Facebooka:
#1877F2 - Wartość RGB Facebooka:
rgb(24 119 242)
Wartości kolorów Twittera
- Wartość heksadecymalna Twittera:
#1DA1F2 - Wartość RGB Twittera:
rgb(29 161 242)
Wartości kolorystyczne Pinterest
- Wartość heksadecymalna Pinterest:
#E60023 - Wartość RGB Pinterest:
rgb(230 0 35)
Czcionkiinterest
Pinterest używa Helvetica/Neue Haas Grotesk dla swojej strony internetowej, ale domyślnej czcionki systemowej dla wszystkiego innego.
Wartości kolorówLinkedIn
- Hex:
#1666C5 - RGB:
rgb(22 102 197)
CzcionkiLinkedIn
LinkedIn używa : Sans-Serif na swojej stronie internetowej, co oznacza Helvetica first/Arial second/system default else.
Snapchat
Wartości kolorów Snapchata
- Hex:
#FFFC00 - RGB:
rga(255 252 0)
Czcionki Snapchata
Wyróżniając się ze stada, Snapchat używa czcionki Graphik!
YouTube
Android, Google i aplikacje należące do Google, takie jak YouTube, używają systemu projektowania znanego jako Material Design, który odwołuje się do kilku kolorów, a także zaleca używanie czcionki Roboto.
Wartości kolorów YouTube
- Hex:
#FF0000 - RGB:
rgb(255 0 0)
Google Blue Color Value
- Hex:
#4285F4 - RGB:
rgb(66 133 244)
Google Red Color Value
- Hex:
#EA4335 - RGB:
rgb(234 67 53)
Google Yellow Color Value
- Hex:
#FBBC05 - RGB:
rgb(251 188 5)
Google Green Color Value
- Hex:
#34A853 - RGB:
rgb(52 168 83)
Alphabet Red Color Value
Alphabet to firma, która jest właścicielem Google.
- Hex:
#ED1C24 - RGB:
rgb(52 168 83)
Kolory mediów społecznościowych jako zmienne CSS
Zamieść ten fragment kodu na górze swojego pliku CSS, aby użyć wyżej wymienionych kolorów marek mediów społecznościowych (RGB) jako zmiennych 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;}Następnie nazwij je w ten sposób:
.social-icon.facebook { background-color: rgb(var(--facebook)); // without alpha background-color: rgb(var(--facebook) / 50%); // with alpha}Nadal nie znalazłeś tego, czego szukasz? Nie martw się – mamy przewodnik po darmowych czcionkach, który Cię w tym wyręczy.