Двадцатка лучших веб-шрифтов

http://www.techradar.com/news/internet/top-20-fonts-for-the-web-909082
  • Перевод
Top 20 Fonts

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов


Без преувеличения, сейчас сетевая типографика переживает захватывающий период своей жизни. Недавние технологические скачки приблизили нас еще на шаг ближе к типографической нирване в интернете. Шаг, которого все так долго ждали.

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

Спонсор перевода: Студия Айкен*

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

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

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

image

По этой причине почти каждый из двадцати ниже представленных шрифтов имеет свой платный вариант. Также представлены бесплатные версии из так называемого «шрифтохранилища» Typekit.

Добавим, что мы сосредоточили свое внимание исключительно на шрифтах, регулярно используемых в сети. Так что опрокиньтесь на спину и откройте для себя 20 шрифтов, которые вы непременно захотите использовать снова и снова…

20. Avenir


Avenir

Семейство: Sans serif
Дизайнер: Adrian Frutiger
Скачать или купить: Fonts.com

Дизайн Avenir’a разработан на основе вездесущего шрифта Futura (который был задуман как «Die Schrift für die Neue Zeit» — «Шрифт Нового времени»). Однако, по словам дизайнера Адриана Фрутигера, в шрифте Avenir заключено гораздо больше человечности. Несмотря на свою популярность в корпоративных кругах, его округлые геометрические формы и тонкая индивидуальность придадут дружественную улыбку даже самому серьезному содержимому.
Несколько лет спустя Акира Кобаяши завершила Avenir Next, шрифт, который стал усовершенствованной версией оригинала (в новую версию добавили курсив и капитель.)

19. FF Kava


FF Kava
Семейство: Sans serif
Дизайнер: Yanone Kaffeesatz
Скачать или купить: FontShop

Бесплатная версия шрифта вышла в свет во времена, когда поддержка браузерами правила @font-face была широко распространена, чем и заслужила свою популярность среди дизайнеров. В результате чего молодой немецкий дизайнер Янон попал в поле зрения одного из самых крупных в мире производителей цифровых шрифтов — компании FontShop FSI, что позже привело к рождению профессиональной версии данного шрифта.

18. Times New Roman


Times New Roman
Семейство: Serif (cистемный шрифт)

Дизайнер: Victor Lardent, Stanley Morison
Каждый, кто создает списки на подобие нашего, не забудет об этом шрифте. Вероятно, самый распространенный шрифт. Разработан дизайнерами Стенли Морисоном и Виктором Лардентом.

17. Bree


Bree

Семейство: Sans serif
Дизайнер: José Scaglione, Veronika Burian
Скачать или купить: TypekitFontdeck

Полон индивидуальности, наглый и неряшливый, шрифт Bree может показаться годным лишь для заголовков, т.к. впервые мы увидели его на логотипе компании TypeTogether. Однако практика показывает, что Bree выглядит довольно изящно и в меньших своих размерах.
Bree является одним из немногих шрифтов, которые появились на свет в результате коллективной работы двух человек: Жозе Скаглионе и Вероники Буриан, студентов факультета Полиграфического Дизайна Британского Университета Reading. Который, в свою очередь, считается одним из лучших учебных заведений мира, подготавливающий талантливых полиграфических дизайнеров.

16. FF Trixie


FF Trixie

Семейство: Печатная машинка
Дизайнер: Erik van Blokland
Скачать или купить: FontShop

Trixie — один из первых машинописных шрифтов. Станет незаменим в написании заголовков для грустных событий (аварий, стихийных бедствий и т.п). Автору удалось передать эстетику печати на машинке, что с уверенностью можно назвать достижением.

15. Centro Sans pro


Centro Sans pro

Семейство: Serif
Дизайнер: Panos Vassiliou
Скачать или купить: Fontdeck
Большое количество супер-семейств позволяет дизайнерам создавать смешанные виды шрифтов, где serif переплетается с sans serif. Это делается для улучшения читабельности и внешнего вида букв, одновременно. Шрифт Centro Sans pro и является одним из представителей таких супер-семейств.

14. Fedra Sans


Fedra Sans

Семейство: Sans serif
Дизайнер: Peter Bil'ak)
Скачать или купить: Typotheque

Еще один представитель супер-семейств, который начал свой путь в качестве корпоративного шрифта немецкой страховой компании Bayerische Rück. Разработанный в библиотеке шрифтов Typotheque с целью исправно служить людям, как на экране так и на бумаге.
Стоит заметить, что данный проект приостанавливался и запускался несколько раз: то заказчик решит отменить его, то начнет колебаться, то и вовсе украдут оборудование из офиса разработчика. Но благодаря дизайнеру Петеру Биляку удалось не только закончить, но и значительно улучшить проект. В результате чего получился во многом универсальный шрифт.

13. Museo Slab


Museo Slab

Семейство: Slab serif
Дизайнер: Jos Buivenga
Скачать или купить: TypekitFontdeck, Font Squirrel

Оригинальная версия Museo крайне популярна среди дизайнеров и является на половину бесплатной. Шрифт принадлежит к формату Opentype. Имеет поддержку большого количества языков.

12. Clarendon URW


Clarendon URW
Семейство: Slab serif
Дизайнер: Robert Besle, Hermann Eidenbenz
Скачать или купить: TypekitFontdeck, Font Squirrel

Классический британский шрифт с засечками (slab serif), без которого не обойдется ни один подобный список. Усовершенствованный Германом Эйденбенцом, он включает в себя несколько типов плотности и начертаний.

11. Proxima Nova


Proxima Nova

Семейство: Sans serif
Дизайнер: Mark Simonson
Скачать или купить: TypekitFontdeck

Невероятно гибкий и читабельный шрифт, является улучшенной версией Proxima Sans, используется во множествах сценариев. Имеет множество начертаний, что увеличивает количество шрифтов данного семейства до сорока двух.

10. FF Unit Slab


FF Unit Slab

Семейство: Slab serif
Дизайнер: Эрик Спайкерман (Erik Spiekermann), Кристиан Шварц (Christian Schwartz), Крис Соверсби (Kris Sowersby)
Скачать или купить: FontShop

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

09. Calluna


Calluna

Семейство: Serif
Дизайнер: Jos Buivenga
Скачать или купить: TypekitFontdeck, Font Squirrel

Появился на свет в качестве эксперимента над ранней версией Museo Slab и Calluna и стал первым серьезным шрифтом в карьере дизайнера Жоса Буйвенги.
Как и другие шрифты Жоса, он наделен многими свойствами Opentype формата и имеет бесплатную версию, доступную для пользователей.

08. Ronnia Condensed


Ronnia Condensed
Семейство: Sans Serif
Дизайнер: José Scaglione, Veronika Burian
Скачать или купить: Typekit

Самое подходящее слово для его описания — это универсальность. Лучше всего смотрится в заголовках. Используется в различных целях, поэтому вы можете увидеть его, как в заголовках новостей, так и в корпоративных отчетах предприятий.

07. Droid Sans


Droid Sans
Семейство: Sans Serif
Дизайнер: Steve Matteson
Скачать или купить: Typekit, FontsLiveWebtype

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

06. FF Tisa


FF Tisa
Семейство: Serif
Дизайнер: Mitja Miklavcic
Митя Маклавчич создал шрифт для удовлетворения технологических и эстетических требований современных журналов. Он поставил перед собой цель разработать более мягкую и динамичную версиию шрифта. Благодаря невысокому контрасту своих очертаний Tisa великолепно читается даже в самых малых размерах, будь то на страницах книг, или, напечатанный лазерным принтером с низким разрешением.

05. FF DIN


FF DIN

Семейство: Sans serif
Дизайнер: Albert-Jan Pool
Скачать или купить: Typekit, FontShop

Современный шрифт, разработанный голландским дизайнером. Аббревиатура «DIN», в переводе с немецкого означает «Немецкий Институт Нормирования». Изначально использовался как текст на дорожных знаках и номерах квартир. Но вот уже на протяжении многих лет его сугубо деловые геометрические формы украшают немецкий веб-дизайн. В 1995 году был обновлен Альбертом-Яном Пулом, обновление включило в себя больше стилистических вариантов, а также новый формат DIN Rounded.

04. Helvetica


Helvetica
Семейство: Sans Serif
Дизайнер: Max Miedinger, Eduard Hoffmann
Скачать или купить: Fonts.com

Кажется, невозможно обсуждать предмет типографии без упоминания Helvetica. Шрифт заслужил статус легенды благодаря тому, что его использует чуть ли не каждый дизайнер в мире. Его имя и стиль известны общественности.
Helvetica был разработан, чтобы создать конкуренцию шрифту Akzidenz-Grotesk, и его первоначальным названием было — Die Neue Haas Grotesk. Шрифт олицетворяет Швейцарский стиль графического дизайна из далеких 1950-х. Но его широкое применение во всех формах дизайна привело к тому, что он в некоторой степени «приелся», поэтому и было разработано еще несколько его под-форм, таких как Arial. Тем не менее, он остается современной классикой.

03. Alternate Gothic No.1


Alternate Gothic No.1
Семейство: Sans serif
Дизайнер: Morris Fuller Benton
Скачать или купить: Fontdeck
Фантастический шрифт для написания заголовков. Alternate Gothic и его варианты остаются чрезвычайно популярным выбором для тех, кто нуждается в нелицеприятном, почти наглом шрифте. Четкий при относительно малых размерах. Являясь частицей американского индустриализма, выглядит великолепно и в цифровую эпоху.
Стал чрезвычайно популярен после того как Студия дизайна «The League of Moveable Type» создала его обновленную версию с открытыми исходниками.

02. FF Meta Serif


FF Meta Serif
Семейство: Serif
Дизайнер: Christian Schwartz, Erik Spiekermann, Kris Sowersby
Скачать или купить: Typekit, FontShop

Эрик Шпикерман описывает свое семейство Meta как «приближенное к классике», и при этом откровенно скромничает, потому что шрифт Meta действительно является классикой, особенно версия без засечек. Это авторитетный шрифт, который великолепно работает с различными сценариями.

01. Georgia


Georgia
Семейство: Serif
Дизайнер: Matthew Carter
Скачать или купить: Typekit, FontShop

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

Впервые эта подборка была опубликована в .net Issue 208

* Мало что из этих шрифтов есть для кириллицы, поэтому эта подборка больше подойдет для «аутсорсеров». Будем надеятся, что скоро появится хоть часть этих и не только шрифтов для славянских языков на кириллице.

P.S. Для кого интересны только кириллические веб-шрифты, посмотрите вот эту подборку: lyncis.info/en/post/274
Метки:
Поделиться публикацией
Комментарии 71
  • +2
    Некоторые шрифты вообще впервые увидел, некоторые использую регулярно. А в целом, неплохая подборка, в избранное.
  • +16
    А почему так мало шрифтов с поддержкой русских букв?
    Лично я и как многие пользователи хабры живут в России
    • +1
      К сожалению, к-во хороших шрифтов преобладает на латинице, а те «шрифтохранилища», что указанны в этой статье, предоставляют именно такое малое к-во кириллических шрифтов. Всегда так было, к сожалению. Надеюсь, что будут адаптировать под нас, рынок то огромный!
      • +10
        Честно, не понимаю тогда смысл статьи для русскоязычного сообщества. Подразнить?
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Как правило при разработке мультиязычного проекта используется одна гарнитура шрифта для всех языков проекта (насколько это вообще возможно), а подбирать для каждого языка аналоги — идея не слишком отличающаяся от «каждой стране — свой дизайн!» (в 99% случаев не имеет никакого смысла затрачивать на это ресурсы и часто больше вреда чем пользы).
            • +2
              Угу, особенно, если в списке языков наличествуют, например, иврит, хинди и арабский.
      • +1
        Рынок огромный, но дикий. За шрифты платят единицы от всех тех, кто ими пользуется.
        • 0
          потому и не платят, возможно. Может дело в консерватории?
          а ситуация кириллическими шрифтами действительно аховая, такое ощущение, что на задворках цивилизации
    • 0
      Подборка с поддержкой кириллицы: lyncis.info/en/post/274
  • +15
    Блог вашей компании мало кому интересен. Лучше бы в «Типографику» написали этот пост, право слово!
    • +1
      Хотел, но кармы недостаточно. Досыпте кармы — перенесу с удовольствием! :)
  • 0
    Странно, надеялся увидеть Verdana
    • 0
      Да как же Verdana, Georgia!!!
      • 0
        Джорджия на 1-м месте! :)
        Вердана видимо не вошла в их рейтинг, как и Ариал — самый распространенный, по сути.
        • 0
          Arial это же Helvetica от «Майкрософт». :)
  • +10
    А где же PT Sans и PT Serif? Очень достойные бесплатные кириллические шрифты от паратайпа. Я понимаю, что эта статья — перевод, но стоило, его немного дополнить. По крайней мере, мне так кажется.
    • 0
      Не просто дополнить, а адаптировать под русскую кириллическую действительность. А тут тупо перевод второсортной субъективной статьи, да еще и без прямых ссылок на покупку/закачку шрифтов. Короче, лучше свою статью про веб-шрифты написать, с блек-джеком и шлюхами.

      PS: ну что за люди, а где мой любимый Myriad Pro? А где Lucida Grande в конце концов, которая если стоит в системе, то большое количество сайтов зарубежных дизайн-компаний сразу преображается (в т.ч. apple.com)?
    • 0
      Ubuntu тоже незаслуженно обижен.
    • 0
      Давайте не смешивать и не забывать, что перевод — это перевод. Он передаёт мнение забугорного обозревателя шрифтов, который ничего про PT Sans и про недавний PT Serif не знает и знать не может. Про российские шрифты можно¹ сочинить и выложить отдельную блогозапись и подписать её одним своим хабрахабровским именем.

      ______________________
      ¹Можно, если кармы хватает.
      • 0
        Насчёт неизвестности PT Sans за рубежом согласиться не могу. В гугл-вебфонтс эта гарнитура находится на 7-м месте по популярности. Не думаю, что только лишь благодаря русскоязычным пользователям.

        А про отдельную блогозапись я тоже думаю, может и решусь когда-нибудь собрать все кириллические веб-шрифты в одном месте.
    • 0
      Спасибо! Очень хороший шрифт!
  • +1
    А Lucida Grande? Эх…
  • +5
    А Comic Sans где?
  • +1
    После описания FF Trixie подумываю некоторым программистам поставить этот шрифт как стандартный, при работе в IDE
  • +1
    За использование для основного текста шрифтов отличных от дефолтных (font-style) и с отличным от дефолтного размера (font-size: 100%) в браузере дизайнерам нужно отрывать ноги!
    А то поналепят серифов с размером кегля 8 пикселей, так на экране с высоким разрешением читать невозможно :(

    Оставьте пользователю право решать, каким шрифтом какого размера он хочет читать текст!

    Спасает только Reader-плагин в браузере.
  • +1
    Подборка классная. Спасибо автору. Особено понравился Bree (впервые вижу).
  • +4
    Простите, но перевод отвратительный. Прям с первой фразы:
    Без преувеличения, сетевая типография переживает захватывающий период своей жизни сейчас.

    Вы по одному слову переводите, что-ли?
    И такие перлы, как:
    талантливым дизайнерам в мире
    все это есть частью гораздо большей проблемы
    опрокиньтесь на спинку кресла
    • +1
      Ваши замечания учтены и будут поправлены.
      • +1
        Спасибо! С точки зрения содержания статья отличная :)
  • +3
    …Die Neue Haas Grotesk. Шрифт олицетворяет Шведский стиль графического дизайна из далеких 1950-ых.

    Helvetica: I am Swiss not Swedish!
    • 0
      Пардон от переводчика.
      Поправлено.
  • 0
    А я писяюсь и какаюсь от шрифта Calluna.
    Кстати не так давно появилась гарнитура Calluna-Sans. Рекомендую.
  • +2
    > FF Unit Slab
    Ну где, где здесь sans serif? ;-(
    FF Unit Slab
    • 0
      кстати, в оригинале-то правильно написано
    • 0
      Спасибо.
      Поправлено это и проверены все остальные.
      Глупая опечатка.
    • +2
      та и Egyp_t сегодня уже не тот:)
  • 0
    А где этот шрифт, которым Intel пишет «спонсоры будущего» (слегка похож на FF DIN, но более «хайтечный»)? За минувший год его куда только не пихали.
  • +1
    За переводческий аборт "<что-либо> прямо сейчас" нужно вешать на фонарях.
  • +2
    > мелкие заглавные буквы
    капитель?
    • 0
      Где вы такое нашли?
      • 0
        Нашел, поправлено.
      • 0
        Что ж вы сначала исправляете, а потом спрашиваете?
        • 0
          Я буду обновлять комментарии…
      • 0
        • 0
          Спасибо, все верно…
          Я немного не о том спрашивал, но уже все норм :)
          • 0
            поиск по странице — великая вещь :)
            • 0
              Да, но когда стоит код пробела &nbsp; между словами для «склеивания», не всегда он находит. Это был именно тот случай.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Это значит, что шрифт адаптирован для экранов и у него есть лицензия, разрешающая использование на всех компьютерах/устройствах, платная или бесплатная.
  • 0
    По поводу 15. Centro Sans pro.
    Там ведь нельзя скачать — только подключить к сайту. И то, на ограниченное кол-во IP адресов.
    Или я что-то не так увидел?
  • 0
    достойная подборка, жалко что забугорная в основном.
    Bree понравился больше всего.
  • 0
    Дизайнер: Панос Василио (Panos Vassiliou)
    Хорошо что он не в России жил :)

    Спасибо, пригодится…
  • +1
    ребята я незнаю что мне делать
    скачать или купить?
  • 0
    Подборка очень красивая и интересная. Огорчило то, что бесплатные версии не нашлись.
    Плохо искал или их нет?
  • 0
    Подборка супер.

    P.S. Слово „нелицеприятный” — значит немного не то, что вы думаете.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.