Какой шрифт на сайте использовать: руководство для начинающих / Хабр

Содержание

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

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


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

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

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

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

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

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

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

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

20. Avenir



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

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


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

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


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

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



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

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



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

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



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



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

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



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

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


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

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



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

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



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

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



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

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


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

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


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

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


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

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

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

04. Helvetica


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

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


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


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

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


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

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

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

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

P.S. Для кого интересны только кириллические веб-шрифты, посмотрите вот эту подборку: lyncis.info/en/post/274

Подбор типографики для сайта / Хабр

Выбор типографики для сайта почти настолько же важен, как сам дизайн. Он не только помогает посетителю лучше понять содержание вашего сайта, а также создает определенное настроение. Так как в этом плане подбор шрифта — вещь очень субъективная, существует много «правильных вариантов». Но на самом деле выбор типографики не так сложен, как может показаться!

С середины девяностых, когда Netscape представил тег

для изменения шрифта текста (сейчас устарел), веб-мастеры пытались использовать нестандартные шрифты на своих веб-сайтах с определенным успехом.
<font size="5" color="black">Black text</font>

На протяжении всей истории интернета и по мере появления новых технологий, можно выделить несколько стадий развития типографики. Сначала использовались обходные пути, например картинки вместо текста, постепенно это сменилось решениями на Flash и CSS, а также Javascript.

В настоящее время доступны разные инструменты и технологии, например шрифты Google (бесплатно) или Adobe Typekit (доступно по подписке), которые намного упрощают внедрение пользовательских шрифтов на сайт. Более того, существуют онлайн-конструкторы и редакторы, такие как Breezi, Squarespace и Moonfruit, которые могут сделать всю работу за вас, сгенерировать код и предоставить вам готовое решение.

Читаемость шрифта превыше всего

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

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

Начните с типографики основного контента

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

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

Также стоит подумать о размере шрифта. Каждый шрифт может иметь разные значения и вариации размеров, поэтому нельзя утверждать, что есть размер, который подходит для каждого шрифта, но примерно 14-16 размер может сработать отлично.

Шрифт для заголовков

Заголовки также важны, потому что они будут начальной точкой для больших объемов текста. Так происходит потому, что люди «сканируют» страницы в интернете, а не читают каждую строчку с начала и до конца.

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

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

Также, если вы используете нестандартный шрифт, вам может понадобиться как-то указать правильный шрифт для ваших заголовков. Например, если вы используете решение на Javascript для отображения шрифта на вашем сайте (например Google Fonts, Adobe Typekit или Cufon), это замедлит скорость загрузки вашего сайта. И чем больше шрифта Javascript должен будет отрисовать, тем медленнее станет ваша страница. Это еще одна причина, почему стоит избегать нестандартных шрифтов в основном тексте.

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

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

Двух шрифтов хватит!

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

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

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

Категории шрифтов

Гарнитуры можно разделить на две основные категории: с засечками (Serif) и без засечек (Sans serif). Засечки представляют собой небольшие элементы на концах штрихов букв.

Также существуют другие категории, например «Script», «Blackletter» или «Mono», но они не используются так же широко, как предыдущие.

Шрифты, «безопасные для web»

«Безопасный для web» — это термин, используемый для описания доступных элементов, или, другими словами, «безопасный» для использования в интернете. Он применяется не только к шрифтам, но в этом контексте особенно, он относится к шрифтам, которые установлены на большинстве компьютеров (PC и Mac).

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

Приведу небольшой список «безопасных» шрифтов:

Без засечек:

  • Helvetica
  • Arial
  • Tahoma
  • Impact
  • Lucida Sans
  • Verdana
  • Geneva

С засечками:

  • Times New Roman
  • Georgia
  • Garamond
  • Palatino Linotype
  • Book Antiqua
  • Courier
  • Monaco
Другие заметки

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

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

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

Выводы

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

Перевод статьи Choosing the Right Typography for Your Website

лучшие из лучших / Блог компании ua-hosting.company / Хабр

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

Для удобства шрифты поделены на 8 категорий, вы можете выбрать необходимую из списка:



Serif fonts


1. Droid Serif


Семейство шрифтов Droid Serif в первую очередь предназначено для удобного чтения на небольших экранах.

2. Butler


Это микс семейств шрифтов Dala Floda & Bodoni. Был создан для того, чтобы немного модернизировать шрифты с засечками. Отлично подходит для плакатов, большого размера книг. В общей сложности семейство Butler содержит 334 символов.

Ссылка для скачивания

3. Arvo


Arvo — это семейство шрифтов, которое подходит как для вывода на дисплей, так и для печати. Разработано Антоном Коовитом для чтения, Arvo в каталоге Google Font — бесплатный открытый шрифт (OFL).

4. Crimson Text


Бесплатное семейство шрифтов, созданное специально для книжного производства с нотками старинных шрифтов Garamond-esque. Crimson Text — разработан немецким дизайнером, проживающим в Торонто, Себастьяном Кош. Crimson — прекрасная альтернатива традиционному Garamond-esque, с выразительным курсивом, прекрасно сочетается с геометрическими засечками, такими как Futura или Avenir.

5. Aleo


Aleo — полукруглый с гладкой структурой шрифт, придающий нотки индивидуальности, но при этом удобочитаемый. Бесплатное семейство шрифтов, которое включает в себя шесть стилей, 3 насыщенности шрифта / weight (Light, Regular и Bold) с соответствующим курсивом. Шрифт был разработан Alessio Laiso.

6. Cormorant


Cormorant — это экстравагантный шрифт с засечками, наследие исторических шрифтов фран­цузс­ко­го пу­ан­со­нис­та и из­да­теля Клода Га­рамо­на. Был нарисован вручную Кристианом Тальманом. «Острые резкие засечки, опасно гладкие кривые», такой шрифт лучше всего использовать для заголовков или в текстах больших размеров (плакаты). Читабелен как при выводе на экран, так и в печатном виде. Cormorant поддерживает кириллицу, каждый из стилей представлен в пяти насыщенностях Light, Regular, Medium, Semibold, Bold.

7. Brela


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

Скачать Brela Regular

8. Libre Baskerville


Libre Baskerville — это веб-шрифт, созданный американской фирмой ATF (American Type Founders 1941 год). Шрифт с высокой x, ему свойственна меньшая контрастность, что позволяет использовать его для чтения на экране.

9. Jura


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

10. Fenix


Fénix — это шрифт с засечками и грубыми штрихами, он прекрасен для чтения, для текстов с небольшим размером кегля. Шрифт под названием птицы счастья — работа Фернандо Диаса, дизайнера уругвайского литейного завода TipoType.

11. Luthier


Luthier — это современный шрифт с характерными резкими засечками и высоким контрастом, наличие двух видов насыщенности + курсив. Хорошо подходит для заголовков, для основного текста, для серьезных интеллектуальных проектов. Бесплатный шрифт был создан живущим в Барселоне дизайнером Адрианом Гомесом.

Free sans-serif шрифты


12. Aganè


Шрифт Aganè — это чистый без засечек шрифт, разработанный швейцарским графическим дизайнером, специалистом UI Данило де Марко. Свободный для персонального и коммерческого пользования, Aganè — это результат вдохновения такими шрифтами как Noorda Font, FF Transit и Frutiger. Оптимизированный для удобочитаемости даже при небольших размерах кегля. Доступен в 4 насыщенностях: light, regular, bold и extra bold. Aganè является лауреатом премии IF Design 2017 года.

13. Titillium Web


Как для бесплатного шрифта, у Titillium очень респектабельная родословная, которая берет свое начало с дизайн-проекта итальянской академии di Belle Arti di Urbino. Каждый учебный год десятки студентов работают над проектом, развивают его, совершенствуют шрифт путем анализа предоставленных данных от дизайнеров, которые используют этот шрифт в своих работах. Он острый, современный и поставляется в широком диапазоне насыщенностей. Лучше всего он подходит для написания заголовков.

14. League Gothic


League Gothic — это сжатый без засечек, вдохновленный классическим шрифтом Alternate Gothic # 1, шрифт изначально был разработанным Моррисом Фуллером Бентоном для American Type Founders Company в 1903 году. Это возрождение старой классики, новая версия забытого старого.

15. Chivo


Chivo — гротескный шрифт, он идеально подходит для заголовков и других надписей, которыми вы хотите привлечь внимание. Уверенный, элегантный, он предлагается в четырех насыщенностях с использованием курсива. Этот бесплатный шрифт — работа Эктора Гатти и команды Omnibus-Type.

16. Comfortaa


Comfortaa — это округлый геометрический шрифт без засечек, предназначенный для текстов с большим размером кегля. Создан был инженером-конструктором Технического университета в Дании Johan Aakerlund. Это простой, красивый шрифт, который включает в себя большое количество различных символов.

17. Noto Sans


Noto Sans (от «No more tofu») относится к семейству бесплатных шрифтов, которое охватывает более 800 языков и оперирует свыше 110 тыс. символами, не пропущен ни один из символов, заложенных в системе Юникод.

18. HK Grotesk Hanken


HK Grotesk — шрифт без засечек, создание которого — продукт вдохновения классическими гротескными шрифтами, такими как Akzidenz Grotesk, Univers, Trade Gothic и Gill Sans. Он был разработан Hanken Design Co с целью создания дружественного и удобочитаемого шрифта, который подходил бы для текста с небольшим кеглем. Недавно была добавлена кириллица.

19. Aileron


Aileron — это универсальный нео-гротескный шрифт без засечек, что-то между Helvetica и Univers. Был создан Sora Sagano, дизайнер компании Tipotype. Он призван обеспечить читателям высокий уровень визуального комфорта.

20. Ubuntu


Этот бесплатный шрифт был специально создан компанией Dalton Maag по заказу Canonical в дополнение к операционной системе Linux для использования в персональных компьютерах, планшетах и смартфонах.

21. Clear Sans


Clear Sans — это универсальный шрифт, разработанный Intel для комфортного вывода на экран. Подходит и для печати, и для использования в сети. Он универсален, в сдержанном стиле (без засечек) шрифт с поддержкой OpenType.

22. Source Sans Pro


Выпущенный в 2012 году, Source Sans Pro был первым семейством шрифтов с открытым исходным кодом для Adobe, его популярности можно позавидовать. Это классический гротескный шрифт с простым, непритязательным дизайном разработан дизайнером компании Adobe Паулом Хантом.

Handwriting fonts


23. Nickainley


Nickainley — этот шрифт с классическими нотками и винтажным ощущением, предполагает множество возможных вариантов использования, включая логотипы, дизайны футболок, фирменные бланки и банеры. Этот бесплатный шрифт был создан индонезийским агентством Seniors Studio.

24. Pacifico


Pacifico — это удобный забавный рукописный шрифт, вдохновением послужила американская серф-культура 1950 годов. Этот шрифт с открытым исходным кодом разработан покойным дизайнером Верноном Адамсом, который скончался в прошлом году. Вернон закончил магистратуру по дизайну шрифтов в Университете Рединга и жил в Калифорнии.

25. Cute Punk


Cute Punk — это яркий, молодежный и полностью современный подход к рукописным шрифтам. Это работа Флоу, дизайнера и иллюстратора из Братиславы, Словакия.

26. Futuracha


Один из самых странных рукописных шрифтов, Futuracha может хорошо сработать при правильном применении в дизайне. Своеобразный, идиосинкразический подход применен в этом рукописном шрифте, Futuracha был создан под вдохновением от классических шрифтов Джона Баскервиля и Futura Book. Это бесплатное семейство шрифтов включает в себя численные символы — греческие и латинские. Futuracha можно использовать в креативных заголовках, логотипах или типографских иллюстрациях.

27. Yellowtail


Yellowtail — классический рукописный шрифт, старая школа 1930 годов, таких как Gillies Gothic и Kaufmann. Разработан был типографическим институтом Astigmatic, смесь связующих и несвязанных буквенных форм придает ему уникальный внешний вид и в то же время обеспечивает удобочитаемость.

Винтажные и ретро шрифты (vintage and retro fonts)


28. Cheque


Cheque — изначально был студийным проектом Мирела Белова, в нем нотки геометрических фигур и классический, винтажный образ. Он используется в заголовках версии Regular и Black бесплатны как для личного, так и для коммерческого пользования.

29. Bauru


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

30. LOT


LOT — один из самых толстых, крутых, ретро-бесплатных шрифтов. Стилизованные надписи в блогах и рекламе, на плакатах и в журналах в стиле 1970, 1980 годов. LOT — гладкий новый винтажный стиль с коллекцией толстых геометрических букв. Располагает 78 символами, бесплатный шрифт LOT хорош для разработки логотипов, для заголовков.

31. Streetwear


Окунутся в ретро атмосферу? Запросто! Шрифт Streetwear — крутой, смелый шрифт в стиле ретро-моды и -спорта 1960, 1970 годов. Универсальный и веселый одновременно. Подходит для логотипов, плакатов, упаковки и дизайна футболок.

32. Paralines Font


Paralines Font — шрифт в ретро-футуристическом стиле. Здесь своеобразно использованы параллельные линии, такая техника вдохновляет дизайнеров, шрифт подходит для любого проекта, передает настроение 1970 начала 1980 годов.

33. Hamurz


Бесплатный шрифт Hamurz — хипстерский ретро стиль с грубыми краями и округлыми формами. Созданный Bagus Budiyanto, он может применяться для создания логотипов, заголовков, рисунков на футболках, значках или на печатных изданиях.

Brush fonts


34. Leafy


Leafy — бесплатный ручной работы шрифт. Содержит более 90 символов, нарисован Крисиджанисом Мезулисом. Идеально подходит для любого дизайна.

35. Playlist


Playlist отлично подходит для иллюстраций на товарах (плакаты, футболки), рисованный шрифт в стиле сухой кисти, который состоит из трех вариантов: скрипт, шапки и орнамент.

36. Sophia


Бесплатный шрифт Sophie для декоративного оформления, легкий, дружелюбный и безмолвно-веселый. Рукописный шрифт со сладким декоративным бонусом)

37. Reckless


Reckless — шрифт для поднятия настроения, включает прописные латинские символы. Хорош для создания эффекта акварельных красок для печати и для веб проектов. Был создан российским дизайнером Надей Спасибенко.

38. Kust


Kust — это рукописный шрифт, слегка искаженными штрихами. Он был представлен в нарисованном виде — на твердой бумаге черными чернилами толстой кистью дизайнером Leva Mezule.

39. Brux


Шрифт Brux с оригинальным подходом к рукописным шрифтам, он довольно жесткий, с чертами формальности, вызывает ощущение шрифта, нарисованного под трафарет.

Шрифты в стиле тату (tattoo fonts)

40. Betty


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

41. Angilla


Angilla — чрезвычано свежий и стильный tattoo шрифт, работа шведского дизайнера Måns Grebäck.

42. Serval


Бесплатный шрифт Serval — это жилистый, колючий зверь со своеобразным дизайном.

43. MOM


MOM — это шрифт, в стиле американской старой школьной татуировкой, дань уважения великим художникам-татуировщикам прошлого.

44. Original Gangsta


Бескомпромиссный стиль в каждом символе шрифта Original Gangsta. Нет милосердию, Gangsta — это жесткий шрифт для брутальных надписей.

Шрифты в стиле графити (graffiti fonts)


45. Ruthless Dripping One


Ruthless Dripping One — один из немногих бесплатных шрифтов в стиле граффити, который выглядит реалистично. Большинство бесплатных шрифтов-граффити — в действительности стилизованные шрифты без чувства искусства, стиля и игривости, которые так важны для городской уличной арт-сцены.

46. Urban Jungle


Трафареты — это фокус современного уличного искусства. В Urban Jungle смешаны традиционные трафареты с добавлением текстуры, что мгновенно окунает в атмосферу улицы, яростной улицы.

47. Blow Brush


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

48. Sister Spray


Бесплатный шрифт Sister Spray по красивому грязный шрифт с распылителя: буквы, цифры и кучу брызг, пятен и штрихов.

49. Tag Type


Tag Type вдохновлен граффити-тегами, содержит буквы верхнего и нижнего регистра, цифры и знаки препинания. Шрифт создан украинским дизайнером Энди Панченко.

Необычные шрифты (unusual fonts)


50. Gilbert


Шрифт назван в честь дизайнера-создателя радужного флага Гилберта Бейкера, который умер в 2017 году, он был активистом LGBTQ и художником, известен тем, что создал знаковый флаг радуги. Gilbert доступен в стандартном векторном формате, цветном формате OpenType-SVG и анимированной версии.

51. Jaapokki


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

52. Carioca Bebas


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

53. Le Super Serif


Шрифт Le Super Serif — это редкая вещь: типографский эксперимент голландского дизайнера Тийса Янссена. Модный заглавный шрифт на современный западный лад. Шрифт имеет 88 лигатур и несколько «специальных» альтернативных символов.

54. Pelmeshka


Бесплатный шрифт Pelmeshka — новый поворот, уникальная вариация шрифтов для тем о еде. Идеально подходит для любого дизайна. Смешной, дружелюбный и оригинальный стиль этого шрифта — работа русского дизайнера Кирилла Михайлова.

55. Tiny Hands


Этот бесплатный шрифт посвящен эксцентричному почерку, принадлежащему Дональду Трампу. Он был создан типографом Марком Дэвисом, как забавная сатиры, но в то же время его спкойно можно использовать для мультфильма или комикса.

Какой бы дизайн и шрифт для своего сайта, проекта вы не выбрали, необходимо заранее подумать о его надежном размещении и хранении. Наши специалисты помогут вам подобрать оптимальный вариант, согласно потребностям и возможностям, будь то хостинг за 0,99 $ или дорогостоящая инфраструктура корпоративного класса. Будьте уверены в том, что ваша информация размещена в надежном дата-центре премиум класса, а ценовая политика предоставления услуг — волшебна. Акции — еще одни шаг навстречу нашим пользователям.

На правах рекламы.Акция! Только сейчас получите до 4-х месяцев бесплатного пользования VPS (KVM) c выделенными накопителями в Нидерландах и США (конфигурации от VPS (KVM) — E5-2650v4 (6 Cores) / 10GB DDR4 / 240GB SSD или 4TB HDD / 1Gbps 10TB — $29 / месяц и выше, доступны варианты с RAID1 и RAID10), полноценным аналогом выделенных серверов, при заказе на срок 1-12 месяцев, условия акции здесь, cуществующие абоненты могут получить 2 месяца бонусом!

Как построить инфраструктуру корп. класса c применением серверов Dell R730xd Е5-2650 v4 стоимостью 9000 евро за копейки?

Как выбрать шрифт для сайта

При первом знакомстве с любым сайтом ключевую роль играет дизайн.

Шрифт, как его составляющая, может упростить восприятие сайта и информации на нем для нового пользователя или, наоборот, усложнить.

Исследования показали, что многие люди не читают текст на сайте целиком, а только просматривают (сканируют) информацию.

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

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

Разновидности шрифтов для сайта

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

виды шрифтов для сайта
  1. Шрифты с засечками. Они облегчают чтение печатных изданий, визуально очерчивая строки. Но в веб-дизайне они скорее усложняют восприятие и рассеивают внимание читателя. Основное назначение таких шрифтов – использование в логотипах, выделение заголовков и важной информации на странице.
  2. Рубленные. Шрифты нейтрального характера, без засечек. Подходят для заголовков, параграфов, основного текста.
  3. Декоративные. Они выглядят оригинально, ярко. Такие шрифты отлично подойдут для молодежных сайтов и любой тематики, связанной с творчеством. Но применять их нужно очень осторожно: текст, написанный декоративным шрифтом, сложный для чтения. Чаще всего их используют для создания логотипов и выделения заголовков.

Какие шрифты актуальны сегодня?

В оформлении сайтов современные дизайнеры отдают преимущество шрифтам Google Fonts, поскольку:

  • они качественные и простые в использовании;
  • с ними не возникает проблем при верстке;
  • большой выбор, база шрифтов расширяется, добавляются новые;
  • любой шрифт Google Fonts корректно отображается при открытии страниц любым браузером.

Выбирая шрифты в Google Fonts, важно проверять наличие кириллических символов: они есть примерно в каждом десятом шрифте.

Но даже с учетом кириллицы для оформления веб-страниц подойдет далеко не каждый вариант. Рассмотрим рейтинг самых популярных шрифтов для сайта из Google Fonts в 2018 году:

  1. Open Sans. Нейтральный и легкий для восприятия шрифт, удобный для чтения, прекрасно сочетается со многими другими (например, Jubilat). Дизайнеры «Бизнес Сайт» на базе Open Sans разрабатывали оформление сайтов для студии грациозного спорта (gracebody.com.ua), международной платежной системы (tyme.ua), интернет-магазина бритвенных принадлежностей (buymach.com).
  2. Lora. Читабельный и четкий шрифт. Используется в разных начертаниях и насыщенности как для основного текста, так и для заголовков и параграфов. Этот шрифт не такой типичный и узнаваемый, как предыдущий, чем и заслужил приверженность дизайнеров.
  3. Roboto. Легко читается даже в маленьком размере и прекрасно работает в паре с другими кириллическими шрифтами Google Fonts. Roboto был взят за основу при разработке веб-студией «Бизнес Сайт» интернет-магазина «Мир клея».
  4. шрифт Робото для сайта
  5. PT Sans – один из наиболее востребованных и универсальных шрифтов. Легко читается в размере 14-26 пт. При соответствующем выборе начертаний и размера подойдет для основного текста и заголовков.
  6. Ubuntu. Мягкий шрифт, располагает к себе посетителя страницы. Использован в дизайне сайта веб-студии site2b.com.ua, где обеспечил читабельность текста маленького размера и легкое восприятие заголовков.
  7. шрифт Ubuntu для сайта

Характер и настроение шрифта

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

  • Юмористические зарисовки, оформленные гарнитурой Times, посчитало смешными на 10% больше читателей, чем при оформлении Arial.
  • Убедительность текста в формате Baskerville подтвердили на 5% больше респондентов по сравнению с этим же самым текстом, написанным Comic Sans.

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

необычные шрифты для сайта

Характер шрифтов особенно важно учитывать при создании сочетаний заголовок + текст.

Если в этой паре соединить противоречащие друг другу гарнитуры, внимание читателя сосредоточится на самих шрифтах, а не на содержании страницы. Например, если заголовок выполнен в Franklin Gothic (элегантный, солидный, мужественный стиль), а основной текст в Souvenir (легкомысленный, игривый), в результате получится противоречивое сочетание, которое мешает гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura Bold, картина полностью изменится: эти два шрифта дополнят друг друга благодаря схожести элементов и не создают ненужного напряжения.

Ищем правильные сочетания шрифтов для сайта

Примерно 90% пользователей не обращают внимания на шрифт, используемый на сайте.

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

Задача дизайнера – проработать все эти факторы, выдерживая дресс-код тематики сайта.

Сделать это правильно помогают следующие правила:

правила использования шрифтов на сайте
  • Использование 2-3 шрифтов для оформления сайта. Большее количество будет отвлекать внимание посетителей. К тому же, большое количество использованных шрифтов увеличит время загрузки страницы, что отрицательно скажется на посещаемости и поисковом продвижении.
  • Читабельность. Все остальное не будет иметь значения, если текст не удобно читать. Чтобы пользователь не покинул страницу в первые же секунды после перехода, важно убедиться, что текстовый контент легко читается и выбраны правильные параметры: цветовое сочетание, размер, начертание и пр.
  • Выделение логических блоков. Для этого применяются разные гарнитуры или один и тот же шрифт, но с разными параметрами насыщенности, размера, начертания. Это помогает посетителю сориентироваться на странице.
  • Правильное сочетание выбранных шрифтов между собой. Классические варианты: шрифт с засечками + рубленный, сочетание шрифтов разного класса, контрастная насыщенность шрифта в заголовке и в основном тексте, сочетание шрифтов различной тональности, яркое + нейтральное. Оценить гармоничность типографики можно приемом «бокового зрения»: направить взгляд левее или правее текста, чтобы воспринимать картинку в целом, не читая текст.

Полезные инструменты в работе со шрифтами

Используйте готовые сочетания шрифтов с помощью онлайн-сервисов:

  • Google Type: большое количество шрифтовых пар, подобранных дизайнерами.
  • Type Genius: вводите основной шрифт и получайте подходящую пару.
  • Font Combinator , простой в использовании сервис, позволяет выбирать и гарнитуру и тип шрифта для заголовков и основного текста среди гармонирующих между собой вариантов.
  • Font Pair: подбирайте шрифтовую пару по вводным характеристикам и скачивайте их на свой компьютер.
  • The Art of Mixing Typefaces – таблица-шпаргалка по сочетаемости шрифтов для веб-дизайнеров.

Если хотите сэкономить время, заказывайте разработку сайта под ключ, дизайн, редизайн сайта у профессионалов веб-студии «Бизнес Сайт».

Типографика в вебе / Хабр

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

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

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

Типографика — свод законов, правил и норм оформления текста, основанных на изучении восприятия набора читателем. Знание и понимание типографики превращают текст в инструмент построения композиции, делают его живым, придают характер и способность передать идею не только при помощи содержания, но и графически.

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

Гарнитуры можно разделить на две основные категории:

  • Антиква — шрифты с засечками.
  • Гротеск, соответственно, — шрифт без засечек.

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

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

Кегль — высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в типографских пунктах (обозначается как pt). Например, текст набранный 14 кеглем, будет равен 14 pt по высоте.

Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк.

Кернинг — расстояние между буквами. Основная суть кернинга — подбор различных интервалов между различными парами конкретных букв для увеличения удобочитаемости.

Есть замечательная игра-тренажер — Kern Type. Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.

Что мы делаем не так?


Используем большое количество шрифтов

Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.

Не знаем какого размера должен быть шрифт

Размер текста в вебе не должен быть меньше 12 пикселей. Лучший выбор — в пределах 14–18 px для основного текста. Не слишком большой и в то же время удобочитаемый. Причем, если уж мы выбрали размер 16 px, он должен оставаться 16 px на всех страницах сайта и не скакать плюс-минус 1 px от блока к блоку. Относится это и к интерлиньяжу, он везде должен быть одинаков.

Размер шрифтов надо указывать целыми числами, не используя десятичныхдробей, например 16,28 px. И, конечно же, в фотошопе необходимо перевести pt в px. Для этого выбираете в меню: Редактирование — Установки — Основные. Далее — Единицы измерения и линейки. Меняете в выпадающих меню «Текст», «Линейки» пункты на пиксели. Жмете «OK».

Длина строки — разве это важно?

Длина строки не должна превышать 600 px. Это оптимальный размер для комфортного перемещения взгляда с одной строчки на другую. Очень широкую контентную часть тяжело читать — часто просто теряешь ту строчку, на которую собирался перейти после прочтения длинной предыдущей строки. Если все-таки необходимо растянуть текстовый блок на 1000 px и более по ширине, можно попробовать разбить текст на две или более колонок. Другой вариант — сделать межстрочное расстояние чуть больше обычного, чтобы визуально сильнее отделить строки друг от друга. Не забывайте разделять текст абзацами, это также поможет сделать его легко читаемым.

Интерлиньяж соответствует размеру шрифта

Расстояние между строками практически всегда должно быть больше размера шрифта. За исключением заголовков. Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например размер текста 14 px, тогда интрерлиньяж — 21 px. 14 / 2 = 7 + 14 = 21.

Выбираем любой понравившийся шрифт

Думаю, уже всем известно, что шрифты для дизайна веб-сайтов лучше всего использовать с fonts.google.com и webfont.ru, если, конечно, заказчик не предоставил вам свой шрифт.

O Lorem, lorem...

Совершенно естественно, что при разработке сайта почти никогда не используется тот контент, который там будет — зачастую, это контента ещё просто не существует. Поэтому дизайнеры (да и верстальщики тоже) используют «рыбу» — произвольный текст, который вписывается в контентные блоки. Это довольно удобно, особенно для дизайнеров, ведь теперь пресловутый «Lorem Ipsum...» можно вставить прямо из фотошопа (Меню: Текст — Вставить Lorem Ipsum). Но для русскоязычных сайтов делать это не рекомендуется — латиница не дает представления о том, как будет выглядеть текст, набранный кириллическим шрифтом. Поэтому генератор текстов вам в помощь.

Ссылки

Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, — перед нами хороший сайт. Поэтому необходимо заранее продумать, как будут выглядеть все ссылки на сайте. Допустим, все кликабельные элементы — одного цвета, например красные, а не кликабельные другого — черного. Тогда никто не будет путаться.

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

Выравнивание

Есть текстовые блоки, которые очень часто выравниваются неправильно — это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю. Во всех этих случаях читать текст неудобно, и визуально он выглядит непривлекательно. Выравнивание ВСЕГДА должно быть по левому краю. Даже если очень хочется сделать его по правому краю (просто потому что вам кажется — композиционно должно быть именно так) — это неправильно Исключением может быть одно или два коротких предложения, которые, скорее всего, являются подзаголовками для основного текста.

Контраст

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

Стили

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

Хорошая типографика – это качество, которое человек, заходя на ваш сайт, не замечает, но чувствует.

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

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

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

Для контента лучше выбирать шрифты без засечек (гротески). На экранах и мониторах они воспринимаются гораздо лучше. Шрифты с засечками (антиква) используются преимущественно в заголовках или печатных материалах.

Наиболее популярными вариантами являются Arial, Trebuchet десятого кегля для основного контента и Georgia, Times New Roman двенадцатого кегля для заголовков. Это обусловлено их широкой распространенностью и удобством чтения. А вот Impact и Comic Sans, несмотря на популярность, использовать не рекомендуется.

Еще один удачный вариант – это шрифт Verdana. Визуально он похож на Arial, но имеет более тонкий контур. Имейте ввиду, что этот шрифт по умолчанию устанавливается только на поздних версиях Windows и Mac OC, поэтому обязательно указывайте замену.

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

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

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

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

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

3 совета по правильному использованию шрифтов в электронных письмах

Вы когда-нибудь задумывались о том, почему выбранный вами шрифт для электронного письма не отображался в почтовом ящике? Вероятно, это случалось, потому что ваш шрифт не был «безопасным», и устройство, на котором открывали письмо, его не поддерживало. В этой статье мы рассмотрим понятие «веб-безопасности» шрифтов, способы использования стандартных и нестандартных шрифтов, а также лучшие примеры их использования в email-рассылках.

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

«Небезопасные» шрифты и как ими пользоваться

Определенные шрифты будут корректно отображаться абсолютно на всех устройствах и во всех почтовых клиентах. Это так называемые «веб-безопасные» шрифты:
  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

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

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

Во-вторых, выйти за границы «веб-безопасности» можно, набирая текст нестандартными шрифтами. Одним из популярных способов является использование веб-шрифтов, которые скачиваются при открытии сообщения, например, с сервиса Google web fonts. Формирование «шрифтовых CSS стеков» позволяет устройству переключиться на более распространенный альтернативный шрифт.

А теперь давайте вернемся к проектированию электронных писем и типографике. Правильно подобрать шрифт для кампании email-маркетинга вам помогут 3 совета.

Совет №1: Выберите правильный шрифт для основного текста письма

В прошлом году на сайте компании Bloomberg была опубликована статья под названием «Шрифт ваших писем портит вам жизнь», автор которой пришел к выводу, что такие шрифты, как Arial и Helvetica не слишком подходят для чтения писем на ходу [мы уже переводили этот материал в нашем блоге – его можно прочитать здесь – прим. перев.]. Почему? Потому что формы некоторых букв – таких, как p, b, q, d – слишком схожи между собой, и читателю трудно их различить. «Вам следует использовать шрифт, в котором буквы не сливаются друг с другом», – дал совет профессор шрифтового дизайна Джерри Леонидас (Gerry Leonidas). Засечки, характерные для шрифтов семейства serif, придают каждой букве уникальность. Напоминаем, как выглядят буквы с засечками и без них:

Изображение взято с сайта w3schools.com

Какие шрифты рекомендуется использовать при верстке электронных писем в качестве альтернативы для Arial и Helvetica? Georgia или Verdana. «Что касается электронных писем, мы обычно просматриваем пару абзацев», – говорится в статье. – Широкое расстояние между буквами значительно ускоряет чтение… А серифы помогают различить буквы между собой».

В своем почтовом ящике мы нашли несколько хороших примеров использования шрифтов с засечками. Глобальная образовательная компания General Assembly, как правило, использует шрифт Georgia для основного текста письма:

Британская компания Dunhill, специализирующаяся на производстве мужских товаров класса люкс, также отдает предпочтение Georgia:

И кулинарный сайт The Kitchn делает выбор в пользу шрифта Georgia:

Но мы также обнаружили множество писем, в которых были использованы шрифты семейства sans serifs. Чаще всего шрифты без засечек выбирают для небольших блоков текста (1 или 2 строки) или крупных заголовков, как в этом письме от сайта Canopy:

Американский бренд спортивной одежды премиум-класса Lululemon также отдает предпочтение шрифту без засечек:

Выводы

По общему правилу, если основной текст письма состоит из длинных блоков, следует использовать шрифты с засечками. Шрифты Georgia и Verdana делают текст более удобным для чтения. Однако для кратких писем и отдельных отрывков текста больше подходят шрифты без засечек.
Совет №2: Выделите заголовок с помощью комбинирования шрифтов или изменения стиля шрифта

Заголовки определяют структуру письма, разбивают текст на разделы, а содержание – на отдельные элементы. С их помощью читателю легче просмотреть и усвоить ваше сообщение. Выделить заголовок и сделать email более читабельным можно несколькими способами:

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

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

Размер шрифта заголовков должен превышать размер шрифта основного текста как минимум в два раза, при этом заголовок и блоки контента отделяются пустой строкой для улучшения читабельности. Именно по такому принципу компании Canopy, The Kitchn и Lululemon оформляют заголовки своих писем.

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

Разница шрифтов заголовка и основного текста письма создает приятный визуальный контраст. «Самым популярным принципом комбинирования шрифтов является сочетание рубленого шрифта для заголовка и шрифта с засечками для основного текста, – сообщается в Smashing Magazine. – Пользуясь этой классической комбинацией, почти невозможно ошибиться». Секрет заключается в том, чтобы не сочетать шрифты, которые отличаются множеством уникальных характеристик. Это может привести к нежелательному конфликту в типографике. Как правило, «веб-безопасные» шрифты не слишком витиеватые, поэтому вы можете с лёгкостью комбинировать практически любой шрифт семейства serif с рубленным шрифтом.
К «веб-безопасным» шрифтам с засечками относятся:

  • Courier
  • Georgia
  • Times New Roman

К «веб-безопасным» шрифтам без засечек относятся:
  • Arial
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Trebuchet
  • Verdana

Даже при комбинировании разных шрифтов, размер шрифта заголовка все равно должен превышать размер шрифта основного текста минимум в два раза (он может также отличаться по цвету или насыщенности). Вышеупомянутый email от General Assembly – отличный пример сочетания шрифта Arial в заголовке и Georgia в основном тексте письма.

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

Многие бренды используют логотипы и заголовки писем как возможность представить свой фирменный стиль. Их типографика может быть настолько уникальной, что они предпочитают помещать шрифты в письма в виде изображений, а не текста. Нестандартный шрифт в таком случае рекомендуется вставлять в изображения, поскольку иначе он может не отобразиться в некоторых почтовых клиентах. С другой стороны, при составлении письма не стоит целиком полагаться на изображения, так как некоторые почтовые ящики по умолчанию блокируют их загрузку. Тем не менее, некоторые компании идут на этот риск, исходя из контента своих писем и аудитории. Так, например, интернет-магазин дизайнерских предметов интерьера Sight Unseen, помещает в свои письма изображения с фирменным заголовком:

Выводы

Придайте своему бренду индивидуальность, просто поместив логотип вашего бренда и нестандартный шрифт в начало сообщения, а для остальных заголовков и основного текста письма используйте «веб-безопасный» шрифт.
Правило №3: Правильно оформляйте ссылки

Одно из преимуществ добавления изображений в email состоит в том, что все они могут быть привязаны к посадочным страницам. Таким образом, переходя по ссылкам в письме, читатели могут получить дополнительную информацию или совершить покупку. Компании, которые предпочитают использовать в письмах шрифты вместо изображений, могут улучшить навигацию, применив технологию «умного связывания» (smart linking). Не обязательно подчеркивать ссылки или делать их голубыми! Вы можете «перекрасить» гиперссылки в цвет вашего бренда, а можете не подчеркивать их или вообще никак не выделять.

Компания Lululemon придерживалась такого подхода при составлении своего письма. Его заголовок, описательная часть и кнопка призыва к действию связаны между собой, поэтому читатели могут нажать практически на любой элемент письма, чтобы получить более подробную информацию. Несмотря на то, что ссылки визуально не выделяются, инстинктивный клик перенаправляет подписчиков на веб-сайт Lululemon. Таким образом, письмо не перегружается подчеркиванием или новыми цветами, а дизайн остается простым и элегантным.

Вывод

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

  1. Для основного текста письма выбирайте «веб-безопасный» шрифт. Если в письме много текста, попробуйте использовать шрифт с засечками.
  2. Для заголовка используйте шрифт без засечек. Размер шрифта заголовка должен превышать размер шрифта основного текста.
  3. Увеличьте эффективность ссылок, привязывая к письму как можно больше информации, не нарушая при этом дизайн.

Другие материалы в блоге «Печкина»:

Как узнать, какие шрифты использует веб-сайт • WPShout

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

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

Вот видео-демонстрация:

И вот текстовое резюме:

Как узнать, какие шрифты использует веб-сайт

  1. Откройте инспектор браузера. В Chrome или Firefox вы можете сделать это, щелкнув правой кнопкой мыши и выбрав «Осмотреть». Ctrl + Shift + I (Windows) или Cmd + Shift + I (Mac) также должны работать.
  2. Перейдите к элементу, шрифт которого вам интересен. Вы можете сделать это, либо нажав «Проверить» на самом элементе, либо перейдя к элементу в объектной модели документа (DOM) инспектора браузера, его карте элементов Nexted HTML, составляющих сайт.(Обратите внимание на то, какие разделы страницы выделяются при перемещении по DOM.)
  3. Как только вы найдете нужный элемент, перейдите на вкладку «Вычисленные» в Инспекторе и прокрутите вниз до семейства шрифтов . атрибут. Здесь указан шрифт элемента.

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

Как узнать, какие шрифты используются на веб-сайтах с изображениями

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

Для этого есть замечательная вещь, она называется Font Squirrel Matcherator. Вы можете прочитать немного больше о Matcherator в нашей ссылке на него, но вот основы использования Matcherator для идентификации шрифтов в изображении:

  1. Загрузите изображение с сайта (используя правый клик> «Сохранить изображение как» Или другим способом) и загрузите его в интерфейс Matcherator.
  2. Используйте синее поле выбора, чтобы выбрать часть изображения, шрифт которого вы хотите проанализировать. (Вы должны увидеть, как программа начинает расставлять маленькие «квадраты» вокруг вещей, которые она определяет как символы шрифта.)
  3. Нажмите «Сопоставить!»

Результаты должны дать вам шрифты, которые очень близко соответствуют выбранному тексту. Если вы подозреваете, что это не точное совпадение с , то вы можете продолжить поиск в Google: например, если возвращенный результат был Adagio Slab, поищите в Google «шрифты, похожие на Adagio Slab» и посмотрите, что получится.Подобные списки шрифтов от whatfontis.com кажутся особенно полезными.

Спасибо за прочтение и узнайте, какие шрифты есть на сайте!

CSS Web Safe Шрифты


Часто используемые комбинации шрифтов

Свойство font-family должно содержать несколько имен шрифтов как «запасной вариант» система, чтобы обеспечить максимальную совместимость между браузерами / операционными системами. Если браузер не поддерживает первый шрифт, он пытается следующий шрифт.

Начните с того шрифта, который вам нужен, и закончите родовым семейством, чтобы браузер выбрать аналогичный шрифт в общей семье, если нет других шрифтов в наличии:

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


с засечками шрифты

семейство шрифтов Пример текста
Грузия, засечек

Это заголовок

Это пункт

"Палатино Линотип", "Книга Антиква", Палатино, засечек

Это заголовок

Это пункт

"Times New Roman", Times, засечек

Это заголовок

Это пункт



Sans-Serif Fonts

семейство шрифтов Пример текста
Arial, Helvetica, без засечек

Это заголовок

Это пункт

"Arial Black", гаджет, без засечек

Это заголовок

Это пункт

"Comic Sans MS", курсив, без засечек

Это заголовок

Это пункт

Impact, Древесный уголь, без засечек

Это заголовок

Это пункт

"Lucida Sans Unicode", "Lucida Grande", без засечек

Это заголовок

Это пункт

Тахома, Женева, без засечек

Это заголовок

Это пункт

"Trebuchet MS", Helvetica, без засечек

Это заголовок

Это пункт

Вердана, Женева, без засечек

Это заголовок

Это пункт

Monospace Fonts

семейство шрифтов Пример текста
"Курьер Нью", Курьер, моноширин

Это заголовок

Это пункт

"Lucida Console", Монако, моноспейс

Это заголовок

Это пункт

Подсказка: Также ознакомьтесь со всеми доступными шрифтами Google и способами их использования.


,

Как узнать, какой шрифт на странице

Обновлено: 04.02.2009 от Computer Hope

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

шрифт в документе

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

шрифт на веб-странице

с помощью текстового редактора или текстового редактора

Вы можете выделить текст на веб-странице, который вы хотите определить шрифт. Скопируйте этот текст (щелкните правой кнопкой мыши и выберите «Копировать» или нажмите Ctrl + C на клавиатуре). Откройте приложение для обработки текста или текстовый редактор и вставьте (щелкните правой кнопкой мыши и выберите Вставить или нажмите Ctrl + V на клавиатуре) текст в новом документе.Снова выделите текст в текстовом редакторе и посмотрите на шрифт на панели инструментов. Он должен отображать, какой тип шрифта используется для этого текста.

через плагин

Если вам часто нравится проверять шрифты, используемые на веб-странице, вы можете загрузить плагин для вашего интернет-браузера. Эти плагины запускаются автоматически при просмотре веб-страницы и доступны с помощью кнопки на панели инструментов. Большинство из них работают аналогично, либо выделяя текст, либо наводя курсор на шрифт и нажимая кнопку на панели инструментов.Имя шрифта должно появиться во всплывающем окне или текстовом пузыре.

Заметка

Хотя существует множество бесплатных приложений, некоторые из них стоят денег для загрузки.

Через исходный код

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

Наконечник

Во многих веб-браузерах вы можете просмотреть исходный код с помощью Ctrl + U или нажав F12 .

,

CSS-шрифтов


Свойства шрифта CSS определяют семейство шрифтов, жирность, размер и стиль текста.


Разница между шрифтами с засечками и без засечек


Семейства шрифтов CSS

В CSS есть два типа имен семейств шрифтов:

  • родовое семейство - группа семейств шрифтов с похожий внешний вид (например, «Serif» или «Monospace»)
  • семейство шрифтов - определенное семейство шрифтов (например, "Times New Roman" или "Arial")
Родовая семья Семейство шрифтов Описание
с засечками Times New Roman
Грузия
У некоторых шрифтов с засечками есть небольшие линии на концах
без засечек Arial
Вердана
«без» означает без - эти шрифты не имеют строки на концах символов
Monospace Курьер Новый
Lucida Console
Все моноширинные символы имеют одинаковую ширину

Примечание: На экранах компьютеров шрифты без засечек считаются легче, чем шрифты с засечками.


Семейство шрифтов

Семейство шрифтов текста устанавливается с помощью свойства font-family .

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

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

Примечание : Если имя семейства шрифтов больше, чем одно слово, оно должно быть в кавычки, как: «Times New Roman».

В списке через запятую указано несколько семейств шрифтов:

Пример

Укажите шрифт для трех абзацев:

.serif {
font-family: "Times New Roman", Times, serif;
}

.sansserif {
font-family: Arial, Helvetica, sans-serif;
}

.monospace {
семейство шрифтов: "Lucida Console", Courier, monospace;
}

Попробуй сам "

Пример

Укажите шрифт «Impact» для абзаца:

п.Impact {
font-family: Impact, Древесный уголь, без засечек;
}

Попробуй сам "

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



,

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

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