Разработка сайтов в Донецке, ДНР. Шрифты и цвета, используемые Facebook, Twitter, Instagram, Google и др.

Кнопки входа в социальные сети, ссылки на каналы социальных сетей — в 2020 году это все еще актуально в веб-дизайне и дизайне приложений. Я имею в виду, какой бизнес не работает в социальных сетях в наши дни? Это необходимость!

Знать, какие шрифты и цвета используются в социальных сетях (чтобы мы могли использовать их в своих проектах), очень удобно. Это то, что мы «гуглим» каждый раз, когда разрабатываем приложение или веб-сайт. (Например, «Синий Facebook», «Шестнадцатеричное значение Facebook», «Какой цвет используется Facebook?» и т. д.).

На самом деле, держу пари, именно так вы нашли эту статью!

Что ж, я не заставлю вас больше ждать. Давайте взглянем на шрифты и цвета, используемые Messenger (от Facebook), Instagram (от Facebook), WhatsApp (от Facebook), самой Facebook, Twitter, Pinterest, LinkedIn, Snapchat и, наконец, Google/YouTube.

Эта статья была обновлена ​​в 2020 году, чтобы показать новые шрифты и цвета, используемые в социальных сетях, включая Facebook, Twitter, Instagram и другие. Google+ не вернулся.

Какой шрифт используется [... ]? 🤔

Краткое примечание: системные шрифты (например: system-ui, в CSS) являются стандартными, если не указано иное. Для каждого носителя это означает:

Робото для Android

Пользовательский интерфейс Segoe для Windows

Сан-Франциско для iOS/macOS

Материальный дизайн (например, YouTube и другие приложения Google) также использует Roboto. Однако в самом логотипе Google используется собственный шрифт Google Product Sans (и это относится и к логотипу Alphabet).

Мессенджер, Facebook

Логотип Facebook Messenger

Значения цвета мессенджера

Шестнадцатеричное значение мессенджера: #0084FF

Значение RGB мессенджера: rgb (0 132 255)

Шрифты для мессенджеров

Messenger на macOS использует Helvetica Neue вместо San Francisco, но все остальное соответствует системе по умолчанию.

Инстаграм, Фейсбук

Логотип инстаграма

Цветовые значения Instagram

Шестнадцатеричное значение Instagram: #E1306C

Значение RGB в Instagram: rgb (225 48 108)

Instagram использует множество цветов в своем брендинге, хотя значение цвета, упомянутое выше, используется в их собственных примерах.

WhatsApp, Facebook

Логотип WhatsApp

Цветовые значения WhatsApp

Шестнадцатеричное значение WhatsApp: #25D366

Значение RGB в WhatsApp: rgb (37 211 102)

Фейсбук, от Фейсбука (смеется)

Логотип Facebook

Цветовые значения Facebook

Шестнадцатеричное значение Facebook: #1877F2

RGB-значение Facebook: rgb (24 119 242)

Твиттер

Логотип Твиттера

Значения цветов в Твиттере

Шестнадцатеричное значение Twitter: #1DA1F2

Значение RGB в Твиттере: rgb (29 161 242)

Пинтерест

Логотип Пинтерест

Цветовые значения Pinterest

Шестнадцатеричное значение Pinterest: #E60023

Значение RGB в Pinterest: rgb (230 0 35)

Шрифты Pinterest

Pinterest использует Helvetica/Neue Haas Grotesk для своего веб-сайта, но системный шрифт по умолчанию для всего остального.

LinkedIn

Логотип LinkedIn

Значения цвета LinkedIn

Шестнадцатеричный: #1666C5

RGB: rgb (22 102 197)

Шрифты LinkedIn

LinkedIn использует: Sans-Serifна своем веб-сайте, что означает сначала Helvetica /второе Arial /системное значение по умолчанию в противном случае.

Снапчат

Логотип Snapchat

Цветовые значения Snapchat

Шестнадцатеричный: #FFFC00

RGB: rga (255 252 0)

Снэпчат Шрифты

Выделяясь из толпы, Snapchat использует шрифт Graphik!

YouTube

Логотипы YouTube

Android, Google и приложения, принадлежащие Google, такие как YouTube, используют систему дизайна, известную как Material Design, которая ссылается на несколько цветов, а также рекомендует использовать шрифт Roboto.

Значения цвета YouTube

Шестнадцатеричный: #FF0000

RGB: rgb (255 0 0)

Google

Логотип Google

Значение синего цвета Google

Шестнадцатеричный: #4285F4

RGB: rgb (66 133 244)

Значение красного цвета Google

Шестнадцатеричный: #EA4335

RGB: rgb (234 67 53)

Значение желтого цвета Google

Шестнадцатеричный: #FBBC05

RGB: rgb (251 188 5)

Значение зеленого цвета Google

Шестнадцатеричный: #34A853

RGB: rgb (52 168 83)

Алфавит Значение красного цвета

Alphabet — компания, которой принадлежит Google.

Шестнадцатеричный: #ED1C24

RGB: rgb (52 168 83)

Цвета социальных сетей как переменные CSS

Поместите этот фрагмент кода вверху вашего файла CSS, чтобы использовать вышеупомянутые фирменные цвета социальных сетей (RGB) в качестве переменных 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;

}

Затем назовите их так:

.social-icon.facebook {

background-color: rgb (var (—facebook)); // without alpha

background-color: rgb (var (—facebook) / 50%) ; // with alpha

}

Все еще не нашли то, что ищете? Не беспокойтесь — у нас есть руководство по бесплатным шрифтам, которое поможет вам.