Шрифтовые логотипы в вебе

На Ретине хорошо выглядит вектор, фотографии и графика, увеличенная в три раза. Готовя графику для сайта, рассчитанного под Ретину, чаще все элементы просто сохраняют в растре с высоким разрешением.

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

Яндекс может просто впечатывать названия продуктов фирменным шрифтом.

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

В целом всё по стандартам триза «сделать статическое динамическим» (или постоянное — переменным) и «сделать неуправляемое управляемым» (другой пример применения стандарта). Кернить, менять цвет, подчёркивание, кегль и интерлиньяж — одно удовольствие.

Для примера наш логотип:

Процедура в три шага:

  1. Оупен-тайп собрал в приложении Glyphs (кстати, поделитесь простыми шрифтовыми редакторами в комментариях). Скопировал и вставил объекты из Иллюстратора плюс минимально настроил.
  2. Из полученного Оупен‑тайпа сгенерировал набор шрифтов для веба на Font Squirrel.
  3. Добавил набор на сайт.

Что скажете? :-)

Поделиться
Отправить
1 комментарий
Даниил Воробьев 2014

По-моему проще использовать SVG, нет? Его поддерживают все современные браузеры и устройства.

Кирилл Беляев 2014

СВГ подойдёт для всех случаев, он хорош. В целом — вы правы (-:

Мой метод для частностей. Преимущество шрифта — контроль над содержанием, межбуквенными и межсрочными. Но он нужен редко. В случае с Яндексом, например, быстрее набирать названия продуктов текстом, чем подгружать для каждого СВГ.

Популярное