Какой шрифт использует яндекс
Перейти к содержимому

Какой шрифт использует яндекс

  • автор:

«Яндекс» создал фирменный шрифт

Интернет-компания отказалась от использования шрифта 1958 года

«Яндекс» создал фирменный шрифт Yandex Sans. До сих пор компания пользовалась гарнитурой Textbook, разработанной в НПО «Полиграфмаш» в 1958 году и предназначенной для набора букварей и учебников, а также Arial.

В презентации «Яндекс» ссылается на конкурентов, которые имеют собственные шрифты: Google, Apple и Microsoft. «Мы почувствовали, что нам хочется иметь свой голос; разумнее инвестировать в свой шрифт, чем платить за лицензии», — объяснили дизайнеры.

Новый шрифт должен отличаться от конкурентов и в то же время быть спокойным, нейтральным, не слишком характерным, решили в компании. Кроме того, он должен выражать корпоративные ценности: открытость, современность, ум, нейтральность, технологичность «с человеческим лицом».

Перед разработчиками поставили задачу — сделать кириллический набор, хорошо читаемый, разборчивый и применимый во всех современных средах, с несколькими степенями насыщенности, совпадающим по основным метрикам с Arial.

Главным недостатком Arial «Яндекс» называет плохое воплощение в кириллице и его безнадежность для брендинга, а Textbook «упрекнули» в старомодности и невозможности использовать в интерфейсе. Над созданием Yandex Sans трудилась команда из трех дизайнеров: Кристиан Шварц ( Christian Schwartz), Мигель Рейес ( Miguel Reyes) и Илья Рудерман.

Шварц — один из самых известных шрифтовых дизайнеров, который сотрудничал с Font Bureau и, в частности, работал над большой системой начертаний для The Guardian ( знаменитой Guardian Egyptian). Рудерман преподает в Британской высшей школе дизайна, на его счету — система шрифтов для «Афиши» и других изданий. Рейес работает в компании Commercial Type, созданной Шварцем.

Какие шрифты поддерживают все браузеры по умолчанию?

Всем привет! Подскажите кто знает или где можно посмотреть, какие шрифты вшиты в браузеры по умолчанию и какие по дефолту поддерживают все браузеры без подключения внешних шрифтов, например там Georgia, Verdana , Open Sans и т.д. Заранее всем спасибо за ответы!

На сайте с 05.01.2020
29 марта 2022, 10:27

Ну системные же. Классическая пачка — Arial, Verdana, Times New Roman и прочие требюше.
На случай их отсутствия прописываются альтернативные или по типам — sans-serif или serif
Тут сильно от конкретной оси зависит, виндовский комплект отличается от макосевского, а ведь есть ещё Android с его Roboto и т.п.

На сайте с 25.11.2006
29 марта 2022, 10:38

В браузерах нет шрифтов. Шрифты есть только в самой системе. Для универсальности указываются семейства шрифтов, далее уже браузер сам выбирает шрифт из системы. Стандарт можно посмотреть тут: https://www.w3.org/Style/Examples/007/fonts.ru.html

  • www.w3.org

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS. Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE
На сайте с 12.04.2007
29 марта 2022, 10:48
Dmitriy_2014 :
какие шрифты

Самые оптимальные из системных: Verdana и Trebuchet MS.

√ SEO продвижение https://akazansky.ru — поиск новых точек роста, экспертный аудит сайтов ( https://akazansky.ru/audit-sajtov ), внедрение эффективных решений цифрового маркетинга. © Обстоятельно, ответственно, доступно.

На сайте с 01.07.2014
29 марта 2022, 11:35

То есть, если пользователь заходит на сайт из-под Windows, то браузер использует/может отобразить все шрифты из системного каталога операционной системы C :\ Windows \ Fonts

Типа как я понял, в браузере вообще нет никаких шрифтов и он подключает шрифты ОС какие найдет у неё, даже не верится, что в браузере нет ни одного шрифта, то есть если в ОС вдруг нет шрифтов то браузер не будет ничего отображать получается.

На сайте с 05.01.2020
29 марта 2022, 11:46

Dmitriy_2014 #:
Типа как я понял, в браузере вообще нет никаких шрифтов и он подключает шрифты ОС какие найдет у неё, даже не верится, что в браузере нет ни одного шрифта, то есть если в ОС вдруг нет шрифтов то браузер не будет ничего отображать получается.

Всё верно. Какие-то шрифты в операционке в любом случае есть, и браузер использует дефолтные, подходящие по типу.
Набор веб-шрифтов потому и называли «безопасным», что они в любом случае были на клиенте, и всё отображалось так, как было задумано верстальщиком. Операционок было мало, шрифтов компьютерных — тоже.
Сейчас у вас выбор намного больше — есть ещё гуглошрифты, наборы шрифтов по умолчанию тоже стали намного богаче, можно подключать свои (всякие woff и otf), проблем быть вообще не должно.

На сайте с 12.04.2007
29 марта 2022, 11:52

Dmitriy_2014 #:
то есть если в ОС вдруг нет шрифтов то браузер не будет ничего отображать получается.

Системные безопасные шрифты есть всегда, покуда установлен браузер и пользователь серфит в интернете.

Вариант, что пользователь до вашего сайта успешно работал в интернете, а потом с вашим сайтом — хлоп и у него не оказалось системных шрифтов, это крайне малая вероятность. Это перед тем как зайти на ваш сайт, ему надо специально физически удалить все рабочие шрифты, чего в обыденной практике не бывает.

На сайте с 01.07.2014
29 марта 2022, 12:08

Хорошо, спасибо за ответы, это я примерно понял, но, тогда как бы перефразировать вопрос:

Какие самые стандартные шрифты, которые браузер может использовать из всех операционных систем, ну, например, Verdana – этот шрифт он точно есть в Windows , Linux , MacOS , Android , iOS и т.д.?

Есть ли какой-то список стандартных шрифтов, которые точно есть во всех операционных системах, которые эти шрифты использует браузер.

На сайте с 05.01.2020
29 марта 2022, 12:15

Dmitriy_2014 #:
Есть ли какой-то список стандартных шрифтов, которые точно есть во всех операционных системах, которые эти шрифты использует браузер.

Нету и едва ли может быть. Вот поэтому и надо составлять свой список из аналогов — тупо пачку без засечек, включая sans-serif для выбора произвольного шрифта из имеющихся с учетом всех возможных целевых систем, если заданных шрифтов у пользователя всё же не оказалось, и т.п.
Ссылка на набор таких шрифтов — там выше с сайта w3c. По ней бы комплект и составлять.

Ответственность за использование чужого шрифта

Всем доброго времени суток! Очень мне приглянулся шрифт Yandex Sans Text. Выглядит просто шикарно. В интернете можно свободного его скачать. Вроде как шрифт является частным, но четко об этом нигде не написано. Вопрос в том, можно ли использовать его на веб-сайте? Сайт посвящен научной тематике (с рекламными баннерами ), то есть никакого отношения к бизнесу он не имеет. Был ли у кого-то подобный опыт?

На сайте с 06.04.2010
28 февраля 2018, 05:37

https://habrahabr.ru/company/yandex/blog/282534/ Многие спрашивают, планируем ли мы выложить новый шрифт в открытый доступ. Сейчас мы этого не планируем. Yandex Sans — голос нашего бренда, такой же как логотип Яндекса. Поэтому и использоваться он будет только в наших продуктах и коммуникациях. Apple и Google раздают свои шрифты открыто для того, чтобы разработчики приложений под iOS и Android могли ими воспользоваться. У нас такой задачи прямо сейчас нет, поэтому и отдавать наружу шрифт не планируется.

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps — от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS — продвижение сайтов: https://www.instagram.com/seoleaks

На сайте с 21.04.2009
28 февраля 2018, 07:07
Kepus:
Очень мне приглянулся шрифт Yandex Sans Text. Выглядит просто шикарно.

Обычный шрифт, ничего шикарного, как по мне — очередное УГ. 99% пользователей абсолютно по барабану, какой шрифт у вас на сайте. Используйте стек Tahoma, «Geneva CY», sans-serif и не выдумывайте.

На сайте с 16.05.2016
28 февраля 2018, 07:48
Я надеюсь ты не с пиратской версии windows задаёшь этот вопрос.
На сайте с 10.01.2015
28 февраля 2018, 17:19
mr888:
Я надеюсь ты не с пиратской версии windows задаёшь этот вопрос.

Не пользуюсь этой операционной системой.

Многие спрашивают, планируем ли мы выложить новый шрифт в открытый доступ. Сейчас мы этого не планируем. Yandex Sans — голос нашего бренда, такой же как логотип Яндекса. Поэтому и использоваться он будет только в наших продуктах и коммуникациях. Apple и Google раздают свои шрифты открыто для того, чтобы разработчики приложений под iOS и Android могли ими воспользоваться. У нас такой задачи прямо сейчас нет, поэтому и отдавать наружу шрифт не планируется.

Да, но это было сказано достаточно давно. Вопрос в том, какие санкции могут последовать за использование шрифта? К примеру, его ведь можно переименовать например. Я понимаю, что это неправильно, но шрифт мне действительно очень приглянулся. Готов даже в футере сайта честно написать, что шрифт от «Яндекса» используется.

На сайте с 15.01.2014
1 марта 2018, 02:24

Kepus:
Да, но это было сказано достаточно давно. Вопрос в том, какие санкции могут последовать за использование шрифта? К примеру, его ведь можно переименовать например.

Шрифт — вполне себе объект авторских прав, а потому может применяться стандартный иск о взыскании компенсации по ст. 1301 ГК РФ. Дело «ПараТайп» — «Ресо Гарантия» наглядно это продемонстрировало, как и последствия. Суммы не фантастические, но тем не менее. К слову, представитель ПараТайпа по этому делу — «Интеллект-С» уже представляло интересы Яндекса в прошлом, так что лично у меня нет сомнений, что Яндекс при желании снова их привлечёт и накажет тех, кто нарушает права Яндекса на шрифт.

Дизайн-вопрос: как выбрать шрифт

Веду рубрику «Дизайн-вопрос». Отвечаю на вопросы о дизайне и смежных областях. Не халтурю, не пишу отписки и отвечаю на совесть: частенько для ответа приходится найти, прочитать и изучить исследования, рекомендации, набрать и подобрать иллюстрации или примеры. Вопросы пишите на mike.ozornin@gmail.com.

Я не думал, что кто-то его вообще видит, но на днях получил неожиданный вопрос. Что ж. Назвался груздем — полезай в кузов. Матвей Правосудов спрашивает:

Я решил использовать несистемный Робото в интерфейсе, потому что он показался мне нейтральным и подходящим для дизайна. Часть команды была против использования несистемного шрифта, потому что это лишнее время на загрузку интерфейса, траблы с лицензией и вообще, пользователи не заметят разницы между каким-нибудь Ариалом и Робото. В конечном итоге мы оставили Робото, но вот нормально обосновать выбор я не смог. В принципе, я понимаю, почему нельзя было в том случае использовать антикву или акциденцию, но вот почему я решил взять именно такую гарнитуру — не знаю. Вопрос:
Расскажи, пожалуйста, как научиться осознано подходить к выбору гарнитуры и уметь доказывать, что именно она нужна?

Матвей! Рад, что у вас решилась исходная проблема с Робото. И с Робото нет никаких проблем с лицензией, его можно использовать где хочется.

Системный шрифт

Отсутствие загрузки и более хороший рендеринг — это, на мой взгляд, справедливые аргументы за системный шрифт. Но есть и аргументы против.

Системный — разный везде

Первый — системный шрифт означает разный внешний вид на разных платформах. Для получения некоего «системного шрифта» недостаточно просто вписать Ариал. Ариала нет на маке, компьютерах с линуксом и мобильных. Если на этих платформах есть целевые пользователи, то кроме Ариала для них понадобится другой шрифт: Робото для андроида, Сан-Франциско для макос и айос, какой-нибудь sans-serif для линуксов (Опенсанс, Либерейшен или какой-нибудь Дежавю). На нативный стэк перешел, например, Бутстрап:
getbootstrap.com/docs/4.1/content/reboot/#native-font-stack.

Атлассиан тоже перешел: Typography По своей идее на «системный шрифт» похож native font stack. По сути это самый родной шрифт на каждой из платформ. Вот как это выглядит в виде CSS-кода:

$font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Roboto", // Basic web fallback "Helvetica Neue", Arial, sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Нативный стэк выглядит везде по-разному и местами эти отличия существенны. Даже не каждый дизайнер заметит разницу между Ариалом, Робото и Сан-Франциско. А вот Сан-Франциско и Сегой отличаются между собой сильней, из-за этого разницу могут увидеть больше людей. Интерактивный пример: https://jsfiddle.net/mikeozornin/3q0hLgpk.
Веб-шрифты не подключены, потребуется установить оба шрифта локально Системные шрифты отличаются между собой, при этом у разных шрифтов разные метрики и, скорей всего, придется что-то где-то адаптировать. Вот две одинаковые кнопки, в которых подключен нативный стек для из Виндоуза и Андроида:

Сегой и Робото

Можно заметить, что у них разное вертикальное выравнивание и визуально разный размер букв. Если на экране будут не только две кнопки, но и какой-то текст, заголовки, таблицы, поля ввода, то на одном из шрифтов что-то может визуально сломаться. Каждая поддерживаемая платформа это дополнительный системный шрифт, который нужно перепроверить и при необходимости адаптировать. Лишний код на адаптацию: компенсация пиксельных отступов, размеров глифов, — это лишнее визуальное тестирование. Можно обойтись и без тестирования, но тогда будет выглядеть «как получится». Общий шрифт снимает бо́льшую часть этих вопросов. Такие аргументы особенно понятны разработчикам и инженерам по качеству. Им бы вообще лишь бы что-то везде сделать одинаковым, чтобы не ломалось в будущем :—)

Системный — без своего «Я»

Шрифт Яндекса — Yandex Sans — рассказ Кости Горского о том, зачем и как делали фирменный шрифт Яндекса. Костя был в то время дизайн-директором Яндекса Второй важный аргумент против системного шрифта — продукт не получает свой язык. На Ариале сложно сделать какой-то узнаваемый визуальный язык, интерфейс будет похож на другие продукты. Наличие своего уникального языка не всегда важно, но часто это может быть определяющим фактором. В этом плане Робото, например, стал языком Гугла, и все интерфейсы с ним выглядят немного по-гугловому. Отсутствие своего языка — одна из главных, почему, например, Яндекс начал разрабатывать свой шрифт. Они хотели с помощью шрифта усилить «язык Яндекса».

Конкретно Ариал — не очень

Третий минус конкретно у ариала. Он не очень хороший (но это мало кто заметит) и у него может быть не хватить начертаний. Если вы захотите тонкое начертание, то ариал вам не помощник.

Вместо вывода

Типографика в гайдах Контура

Может оказаться, что для вас скорость загрузки, уверенный рендеринг стоят этих минусов, а альтернативных платформ мало. В этом случае использовать какой-то системный шрифт не такая проблема. Контур вот в своих продуктах использует Сегой и ничего, им нравится. Они подключают его и в вебе, как они это сделали я не знаю, спрошу.

Как выбрать свой шрифт

Как выбирать шрифт вообще, если брать не только системные. Если коротко: я сам не знаю. Это непросто и я не уверен, что я тот самый человек. Я нечасто это делаю, но у меня как-то сложился такой алгоритм.

1. Формулирую требования

Сначала я формулирую для себя, что я хочу от шрифта. Хороших шрифтов много, поэтому если перебирать по одному, то не хватит никакой жизни, нужно как-то сузить выбор. Про функцию, эстетику и доступность я писал в посте Дизайн-вопрос: зачем в мире столько шрифтов Я отталкиваюсь от следующих областей: функция, эстетика, доступность. Я нашел свои записи, которые писал несколько лет назад, когда мы выбирали шрифт для продуктов. Вот:

  1. Начертания
    Минимум: Обычное, полужирное, тонкое (все с курсивом), хорошо если больше.
  1. Набор цифр
    Есть маюскульные цифры, минускульные опциональны. Есть пропорциональные и моноширинные цифры (скорей всего это есть у всех), моноширинные дефолт.
  1. Хорошая читаемость
    Лучше открытый или полуоткрытый шрифт с высоким x-height. Хорошо бы иметь форму 6 и 9 как в Авенире и Лато, а не как в Гельветике (иногда доступны Opentype-фичей Straight-sided six and nine). Должен хорошо читаться даже на плохих экранах с TN-матрицей.
  1. Универсальный
    Было бы хорошо, чтобы он хорошо работал и в печатной продукции (руководства, отчеты, маркетинговые материалы). Вдруг мы сможем использовать его и там.
  1. Высокая емкость
    В наших продуктах много данных, поэтому хорошо бы, чтобы шрифт не был слишком широким.
  1. Чистый.
  1. Простой, но не упрощенный.
  1. Выглядит технологично.
    Создаёт ощущение технологий и хай-тека, а не теплой ламповости или стимпанка (как Текстбук, Гилл или 20 копеек).
  1. Нормальная кириллица.
  1. Не должен казаться очень чужеродным, создавать из-за непривычности ощущение халтуры.
  1. Доступен в качестве веб-шрифта для использования в непубличном веб-интерфейсе.
  1. Желательно не сильно заезженный, как минимум не фирменный шрифт наших основных конкурентов.
  1. Желательно не космически дорогой.

У вас требования могут быть другие.

У кого-то будет другая эстетика: не строгая технологичность, а детская няшность, ощущение швейцарии или теплая ламповость.

У кого-то будут другие требования к функции: кто-то предпочтет узнаваемость и уникальность в угоду считываемости. У кого-то будут очень строгие требования к емкости шрифта. Именно из-за особых требований к емкости шрифта родились шрифты PT Astra.

В той ссылке про Яндекс описано исходя из чего они проектировали свой шрифт, они формулировали исходные критерии до разработки своего шрифта. Позволю себе процитировать:

  1. Шрифт должен иметь своё лицо, отличаться от конкурентов.
  2. И в то же время быть спокойным, нейтральным, не слишком характерным.
  3. Выражающим наши ценности:
    открытый,
    современный,
    умный,
    нейтральный,
    локальный,
    технологичный, но с человеческим лицом.
  4. Сделанным в первую очередь для кириллического набора.
  5. Очень хорошо читаемым, разборчивым и применимым во всех современных средах.
  6. Совпадающим по основным метрикам и пропорциям с Ариалом.
  7. Имеющим несколько степеней насыщенности.

Или вот требования от которых отталкивались при разработке шрифта для интерфейса государственных систем России (ещё не вышел):

  • Высокие прописные;
  • Очень крупные строчные;
  • Большая ёмкость, т. е. знаки скорее узкие, чем широкие;
  • Просторные межбуквенные расстояния с расчётом на экран не слишком высокого разрешения;
  • Короткие выносные элементы, чтобы экономить место на служебных панелях и кнопках;
  • Скорее гротеск, чем антиква;
  • Скорее открытый или полуоткрытый;
  • Технически подготовленный для работы на экране.

Один из авторов шрифта Yandex Sans Кристиан Шварц в своей лекции про шрифты рассказывает как они искали форму шрифтов для разных компаний. Показателен пример ДойчеБана (немецких железных дорог). Кристиан с командой долго не могли ничего придумать. В какой-то момент решили начать с расписания, ключевой вещи. И они сделали цифры, которые в этом расписании хорошо различаются. И именно эта различимость букв стала основной будущего шрифта:

2. Собираю таблицу

После этого я составляю таблицу шрифтов, которые подходят по формальным признакам, пишу им какие-то плюсы и минусы. Каким-то образом выделяю те, которые нравятся больше и те, которые нравятся меньше.

Таблица выглядит как-то так:

Шрифт Плюсы Минусы Цена Какие-то комментарии
График
Лато
Робото
Фира

Про проблемы с кириллицей в Гугл.Фонтсе я писал в посте: Гугл.Фонтс и кириллица

Шрифты с Гугл.Фонтс нужно я дополнительно проверяю:

  • стоит ли вообще брать в руки этот шрифт. Черный и серый список я смотрю в бизнес-линче Таисии Лушенко
  • не забыл ли Гугл кириллицу, часто она есть: Гугл.Фонтс и кириллица.

3. Смотрю в деле

Скачиваю и устанавливаю шрифты (для бесплатных), платные беру в аренду или ищу в библиотеке. После установки проверяю их в деле: меняю в макете, плакате, брошюре или интерфейсе. Для веб-интерфейсов я пишу юзерстиль (userstyle) в браузере, где меняю шрифт на новый. После этого начинаю пользоваться продуктом как обычно.

Через некоторое время понятно, как он: ок или нет, какие плюсы и какие минусы. Иногда после использования какого-то шрифта я уточняю требования и отсеиваю шрифты.

Вот некоторые советы Ани Даниловой на сайте бюро:

  • про аренду шрифтов
  • про шрифты из библиотеки
  • где искать шрифт

4. Выбираю доступные

После отбора подходящих отсеиваю шрифты по лицензии и цене. Обычно их остается не так много. Даже если после всех этих изысканий вы выберете Робото (но лучше не надо), то бы будете знать, что ваш выбор не случайный.

Как убедить команду в выбранном шрифте

Алгоритма как убедить у меня нет. Мне не приходилось много спорить о шрифтах с недизайнерами. Мои собеседники соглашались с результатом (картинкой), или мне верили заранее, или мои объяснения (все 4 шага), помогали.

Однозначно не стоит ограничиваться показом просто шрифта. Я, например, совершенно не могу представить, как шрифт будет работать, глядя на спецификацию и набор глифов шрифта. Мне нужно пожить с ним хотя бы в макете, а лучше в интерфейсе.

Мне кажется ключевое в «убеждении» — отсутствие этого убеждения. Если не пытаться убедить, а настроить себя на помощь своему слушателю, сформулировать миссию наподобие «помочь человеку вместе с тобой принять взвешенное решение о выборе шрифта», то и убеждение пройдет легче.

Надеюсь чем-нибудь помог. Пишите, если остались вопросы.

В заключение оставлю разные шрифтовые доклады, которые мне кажутся подходящими к теме поста:

  • 001. Making something out of something: Typefaces, history, culture, and meaning
  • 001. Типографика Яндекса — Илья Рудерман
  • Introducing the New System Fonts (WWDC 2015)
  • Typography and Fonts (WWDC 2016)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *