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


Содержание

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

Изучаю, к примеры, я сайты. Понравились шрифты на некоторых. Можно ли как-то в коде или еще как-то (я нуб в этом деле) узнать шрифты, которые использовались на каком-то из сайтов?

  • Вопрос задан более трёх лет назад
  • 3433 просмотра

Сначала кликаешь правой кнопки мыши на текст, у которого ты хочешь узнать шрифт и нажимаешь «Просмотр кода элемента».

У тебя появится консоль, и справа ищешь font-family:

Лучшие веб-шрифты для создания заголовков

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

Roboto Slab

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

На сайте Hongkiat можно увидеть, насколько хорошо смотрится Roboto Slab в заголовке – он буквально «отскакивает» от фона и прекрасно читается. Это плотный, почти квадратный шрифт, в нем чувствуется основательность, которая важна для некоторых заголовков. Roboto Slab прекрасно вписывается в технологическую среду, но его можно использовать и в других темах. Вот пример: сайт Wide Open Country.

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

Open Sans

Open Sans это шрифт, который подходит почти для всего. Это универсальный основной шрифт, который замечательно смотрится в тонком начертании, он очень удобен и может украсить любую веб-страницу. Вот хороший пример – сайт How-To Geek, где шрифт Open Sans используется в заголовках и подзаголовках.

Open Sans отличается своей простотой, это «обычный» шрифт, поэтому дизайнеры редко обращают на него внимание. При этом Open Sans универсален и будет уместен практически в любом дизайне. С этим шрифтом можно играть бесконечно, вот как, например, он смотрится на сайте Cleverbird Creative. Белый шрифт отлично читается на не слишком контрастном фоне, при этом он выглядит очень стильно.

Но это еще не все. В библиотеке Google можно найти множество вариантов этого шрифта, таких, как Open Sans Condensed. Сжатое начертание также работает очень хорошо, особенно в заголовках. В дизайне игрового блога GamesRadar используется начертание Condensed, причем заголовок охватывает всю ширину страницы. Поскольку узкие буквы занимают меньше места, это позволяет использовать больше слов в заголовке без ущерба для композиции. Open Sans многолик, и если не нравится сжатое начертание, можно набрать заголовок тяжелым шрифтом, как на сайте Android Autority.

Делаем вывод: Open sans работает практически в любом дизайне и прекрасно подходит для заголовков. Конечно, над начертанием нужно подумать и потом немного повозиться с CSS, но результат того стоит. Это один из лучших бесплатных веб-шрифтов.

Montserrat

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

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

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

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

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

На сайт Anynines можно увидеть Lato практически везде. Он в навигации, в заголовках страниц и в маленьких текстовых блоках. И везде он выглядит очень уместно. Удивительно, но этот скромный шрифт отлично смотрится в тонком начертании. Низкий контраст ничуть не мешает читаемости заголовка. Вот отличный пример – заголовок на сайте PCGamesN.

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

Catamaran

Catamaran – уникальный шрифт с большим числом начертаний, что делает его отличным выбором для создания заголовков. При этом Catamaran прекрасно работает в качестве основного шрифта, но там нужно использовать тонкое или нормальное начертание. Жирный шрифт – только для заголовков. Вот как выглядит catamaran на сайте Full Home Living, где используется самое тяжелое начертание.

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

Raleway

Шрифт Raleway, безусловно, один из самых читаемых веб-шрифтов из библиотеки Google. В первую очередь читаемость обеспечивают тщательно выверенные линии символов – шрифт выглядит очень сбалансированным.

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

У шрифта Raleway есть одна особенность – его строчная W выглядит как две буквы V. Это не то что бы плохо, но многим не нравится. Тем не менее, шрифт отлично подходит для заголовков. Шрифт не самый простой, но у него есть свое лицо и своя энергетика. Так что его обязательно стоит протестировать в макете.

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

Текст, который вы можете видеть на веб-страницах, может быть оформлен разными шрифтами.

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

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

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

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

Как же быть в этом случае?

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

Это следующие шрифты:

serif (шрифт с засечками)

sans-serif (шрифт без засечек)

cursive (шрифт похожий на рукописный текст)

fantasy (декоративные шрифты, которые используются для выделения особым образом заголовков)

monospace (все символы этого шрифта имеют одинаковую ширину)

Почитать об этих шрифтах можно на странице спецификации CSS здесь:

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

Например, к семейству шрифтов serif относятся:

К sans-serif относятся:

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

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

Автор:
Дмитрий Ченгаев

Делюсь своим опытом в веб-разработке, чтобы вы реализовали свои идеи и проекты.

Как подключить шрифт на сайт в CSS

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

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:

В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;

В самом низу файла стилей style.css прописываем правило:

А также в файле стилей задаём правило для всех заголовков:

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

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

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

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

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

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

Как подключить шрифт с помощью различных сервисов

Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

  1. Находим нужный шрифт или выбираем из уже имеющихся;
  2. Скачиваем архив и добавляем его в папку fonts;
  3. Копируем уже готовый CSS-код для файла style.css;

Самый простой способ подключения шрифтов

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт или несколько:
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле:
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег head:

Как подключить шрифт к шаблону Moguta.CMS

  1. Через хостинг загрузить необходимый шрифт в папку /mg-templates/mg-default/fonts;
  2. Через административную панель открыть файл стилей;
  3. Прописать в самом верху новый шрифт;
  4. Ниже в файле стилей найти интересующий нас элемент и задать или изменить свойство font-family: *название нового шрифта* ;

Как добавить ссылку с Google Fonts в шаблон Moguta CMS

  1. Заходим Настройки—>Шаблон—>template.php;
  2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
  3. Затем в файле стилей задаём новый шрифт к нужному элементу:

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

Работа со шрифтами в CSS

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

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

Безопасные веб-шрифты

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

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

Илон Маск рекомендует:  Poke переслать буфер далеко

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

Рекомендуется последним в списке шрифтов указывать и семейство шрифта ( generic-family ). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.

Давайте рассмотрим следующий пример:

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

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

Результат нашего примера:

Рис. 34 Пример использования свойства font-family.

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

sans-serif (без засечек)
Семейство шрифта ( font-family ) Пример
Arial, Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serif Съешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serif Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif Съешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serif Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif Съешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif Съешь же еще этих сочных мандаринов.
serif (с засечками)
Семейство шрифта ( font-family ) Пример
Georgia, serif Съешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif Съешь же еще этих сочных мандаринов.
monospace (моноширинные)
Семейство шрифта ( font-family ) Пример
«Courier New», Courier, monospace Съешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospace Съешь же еще этих сочных мандаринов.

Типы веб-шрифтов и их поддержка браузерами

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

  • TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
  • WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
  • WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
  • SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
  • EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Формат шрифта Chrome Firefox Opera Safari IExplorer Edge
TTF/OTF (True Type и Open Type Fonts) 4.0 3.5 10.0 3.1 9.0* 12.0
WOFF (Web Open Font Format) 5.0 3.6 11.1 5.1 9.0 12.0
WOFF2 (Web Open Font Format 2) 36.0 39.0* 26.0 Нет Нет Нет
SVG (Scalable Vector Graphic) 4.0 Нет 9.0 3.2 Нет Нет
EOT (Embedded Open Type) Нет Нет Нет Нет 6.0 12.0

Ответственность и поиск веб-шрифтов

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

Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».

Добавление веб-шрифта на страницу

Для добавления шрифта на страницу Вам необходимо:

  • использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
  • использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).

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

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:
  3. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):
  4. После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:
  5. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

  • одну плотность шрифта.
  • один стиль для этого шрифта.

Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!

Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!

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


) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент ) — Roboto-Italic.

И так, что мы сделали в этом примере:

  • Добавили три правила @font-faceв начало наших CSS стилей (это важно).
  • В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
  • В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
  • Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом ( italic).
  • Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом ( bold ).
  • Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.

Результат нашего примера:

Рис.38 Пример использования правила @font-face.

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

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

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

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

Добавление веб-шрифта со стороннего ресурса

Давайте рассмотрим на примере службы Google Fonts варианты подключения шрифтов к Вашим страницам без загрузки их на Ваш сервер.

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
  3. После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
  4. Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»

Например, меня интересуют следующие:

    Для заголовков (элемент

) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).

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

  • Следующим шагом необходимо выбрать те наборы символов (языки), которые будете использовать на своем сайте (выбор языков находится в том же вкладке — «Customize» немного ниже). В данном случае выбраны кириллические и латинские символы. Выбирайте только те наборы, которые вам необходимы, чтобы Ваши страницы загружались быстрее:
  • Далее на вкладке «Embed» нам будет предложено два варианта подключения (Standart и @import):
  • » title=»Рис.42 Создание ссылки на внешнюю таблицу стилей, используя HTML тег
    .» style=»width:100%;»>

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

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

    Рассмотрим пример подключения, выбранных нами шрифтов:

    .»> Рис.44 Пример подключение веб-шрифтов, используя тег
    .

    Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег ), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.

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

    Предлагаемый вариант импортирования на страницу:

    Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).

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

    Результат нашего примера:

    Рис.46 Пример подключение веб-шрифтов, используя правило @import.

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

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

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практические задания:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:
    • Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты: для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:

      Практическое задание № 10.
      Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:

      Практическое задание № 11.

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

    36 бесплатных веб-шрифтов для вашего сайта

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

    1. Montserrat

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

    2. Abril Fatface

    Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans.

    3. Playfair Display

    Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo.

    4. GT Walsheim

    Используемый сегодня во многих блогах, GT Walsheim является представителем геометрических гротесков и входит в семейство Grilli Type. За полный набор шрифтов нужно платить, но Grilli Type предлагает бесплатную пробную версию GT Walsheim.

    5. Merriweather

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

    6. Josefin Sans

    Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой.

    7. Gravitas One

    Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок.

    8. Jura

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

    9. League Gothic

    Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов.

    10. Fjord

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

    11. Amaranth

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

    12. Poly

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

    13. Gentium Basic

    Этот шрифт создавался как мульти-лингвистический, включающий в себя латинские и греческие литеры, а также кириллицу и продвинутую поддержку в версии Gentium Plus. Gentium Basic и Gentium Book Basic доступны в бесплатной веб-версии, но ограничены только латинским алфавитом.

    14. Open Sans

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

    15. Ledger Regular

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

    16. Signika

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

    17. Josefin Slab

    Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы.

    18. Forum

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

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

    20. Arvo

    Подходящий в равной степени как для печатной, так и для веб-версии, этот геометрический брусковый шрифт доступен в Roman, Italic, Roman Bold и Bold Italic. Небольшая контрастность Arvo повышает его читабельность на экране.

    21. Bevan

    Bevan был создан на основе традиционного брускового шрифта 30-х. Буквы были отцифрованы, им придали новую форму и оптимизировали для веб-версии. Это один из немногих сверхжирных шрифтов, которые подходят для сайтов.

    22. Old Standard TT

    Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице.

    23. Kreon

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

    24. Droid Sans

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

    25. Italiana

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

    26. Vollkorn

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

    27. Actor

    Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9.

    28. Lato

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

    29. Average

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

    30. EB Garamond

    Уходящий корнями в 16 век, гуманистический шрифт Garamond стал настоящей иконой типографики, неоднократно послужившей основой для создания современных шрифтов, включая шрифт EB Garamond.

    31. Ubuntu

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

    32. Rosario

    Rosario является классическим гуманистическим гротеском, который прекрасно подойдет для стилизации абзацев текста.

    33. Roboto Slab

    Roboto Slab является одним из шрифтов семейства Roboto. Брусковая версия особенно привлекает взгляд своими геометрическими формами и открытыми изгибами. Он одинаково хорошо подходит для экранов гаджетов и печатных версий текстов.

    34. Oswald

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

    35. Stalemate

    Stalemate – это изящный рукописный шрифт с некоторым винтажным оттенком. Он подходит для создания акцентов и персонализации вашего сайта.

    36. Crimson Text

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

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

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


    Если хотите прибегнуть к дедуктивному методу — воспользуйтесь сервисом Identifont.

    ДИДЖИТАЛ-ИЗДАТЕЛЬСТВО SVOEMEDIA

    • Политика обработки персональных данных
    • Информация о платежах и безопасности
    • Реквизиты
    • Ищете работу?Вам сюда
    • Хотите публиковаться у нас?

    ИП КОЛТАШОВА АЛЕКСАНДРА ВАДИМОВНА

    Свидетельство о гос. регистрации: 54 № 5 150 134
    ИНН: 540 618 483 335
    ОГРНИП: 316 547 600 156 201
    Дата постановки на учет: 25 августа 2020

    Дополнительные коды
    ОКПО 104 747 803
    ОКАТО 50 401 386 000
    ОКТМО 50 701 000 001

    Р/с: 4080 2810 5045 0000 0701
    БИК: 44 525 999
    ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» г. МОСКВА
    к/с: 3010 1810 8452 5000 0999

    Сейчас мы пишем про контент-маркетинг и все, что рядом (интернет-маркетинг, соцсети, SEO, блоги, тематические лайфхаки и чек-листы).
    И мы активно планируем второй проект — посвященный дизайну (веб-дизайн, Тильда, цвет, типографика, иллюстрации, полиграфия…). Чтобы обычный человек смог делать красивые сайты-презентации-картинки и мир становился лучше.

    Если вы представитель компании или наш коллега, хотите поделиться кейсом — дайте знать, мы с радостью рассмотрим предложение.

    Публикации для авторов у нас бесплатны. Но мы требовательны к материалам (очень). Пишете классно и без воды? Уже придумали, о чем рассказать нашим читателям? Wellcome: сообщите все, что считаете нужным, и возможно скоро наша совместная статья появится в блоге.

    P. S. Особо талантливых пригласим работать с нами над коммерческими проектами.

    Введение в оформление текстов для веб

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

    Увеличьте читабельность текстов, сделав осознанный выбор шрифта

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

    Текст – один из важнейших объектов пристального внимания при проведении юзабилити-анализа сайта. У текста многих веб-страниц есть следующие слабые места:

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

    Два пути к читабельному тексту

    Веб-дизайнер, желающий создать удобный и функциональный сайт, может пойти двумя путями. Самый простой можно выразить в следующей фразе:

    Лучше всего вообще не задавать размер и тип шрифта, оставив это на усмотрение посетителя.

    Более сложной путь влечет за собой изучение «превратностей» веб-типографики и принятие решения по выбору шрифта для вашего сайта. Для многих дизайнеров контроль над шрифтами обусловлен требованиями создания торговой марки, соответствия фирменному стилю, уместностью определенного шрифта в каждом конкретном случае или просто личными предпочтениями. Контроль над текстом должен преследовать цели повышения «юзабилити» (удобства, функциональности, простоты) сайта; CSS позволяет управлять полями, длинной, шириной, цветом, размером и семейством шрифта — то есть всем тем, что позволяет сверстать текст для достижения максимальной читабельности. Естественно, страница, которую легко читать, очень удобна для посетителя.

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

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

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

    Почему вообще надо управлять текстом на веб-странице?

    Гарнитура шрифта веб-сайта или отдельного документа влияет на наше восприятие его содержания. Поэтому одна страница выглядит строго и серьезно, другая — непринужденно и весело или в стиле техно. Ясно, что оформление сайта детской теле-программы ( www.bbc.co.uk/cbbc/ ) должно отличаться от оформления страницы политических курсов университета ( www.ksg.harvard.edu/prg/ ). Также как и текст «Financial Times» (news.ft.com/home/uk/), если он соответствует своей функции, должен отличаться от текста на «The Tate Modern» ( www.tate.org.uk/modern/default.htm ).

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

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

    Шрифты с засечками против рубленных шрифтов

    Традиционно шрифты делились на шрифты с засечками (serif) и рубленные шрифты (sans serif). Шрифты с засечками характеризуются маленькими декоративными элементами у каждой буквы, которые называются засечками. Хорошим примером может служить Times: Times. Рубленные шрифты засечек не имеют. Например: Helvetica.

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

    Значение шрифтов с засечками и рубленных шрифтов в контексте веб-дизайна

    Рубленные шрифты, по мнению некоторых, выглядят современнее и «круче». С другой стороны, многие считают их искуственными и лишенными жизни. Шрифты с засечками выглядят более традиционно, типично, дружелюбно и знакомо и, как было замечено ранее, они способствуют более легкому восприятию больших объемов текста (историю шрифтов можно прочесть на: www.webreference.com/dlab/9802/sansserif.html ).

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

    «… единственной вашей заботой должно быть соотношение между стилем, семантикой и предполагаемым воздействие текста и соответствующей гарнитурой шрифта для него. Нельзя верстать пьесы Шекспира рубленным шрифтом (даже для разнообразия) и использовать ломкие шрифты с засечками для кричащих рекламных объявлений.»
    ( www.webreference.com/dlab/9802/ )

    Замечание о читабельности шрифтов с засечками в сети

    Стоит заметить, что правило о том, что шрифты с засечками проще для восприятия, неприменимо для интернета. Эксперт юзабилити Якоб Нильсен обращает внимание на то, что применительно к маленьким размерам шрифтов и небольшому разрешению экрана рубленные шрифты удобнее для чтения.

    Выбор подходящего шрифта для сайта — непростое дело. Поэтому важно помнить следующее:

    • Определенные шрифты присутствуют не во всех операционных системах.
    • Некоторые гарнитуры оптимизированы для вывода на печать, другие — на экран. Созданные для печати (в том числе шрифты с засечками) склонны выглядеть на экране «беспорядочно».
    • Размер шрифта зависит от разрешения экрана и операционной системы пользователя.
    • Внешний вид текста зависит от браузера.
    • Пользователи могут изменить настройки своих компьютеров и браузеров.
    • Шрифты и операционные системы

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

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

    На сайте Роба Коллинса можно найти подробный список шрифтов Mac, PC и Internet Explorer ( www.angelfire.com/al4/rcollins/style/fonts.html ).

    Многие шрифты плохо выглядят на компьютерных мониторах

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

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

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

    Adobe с созданием шрифтов PostScript Type 1 и Apple c технологией Truetype положили начало созданию читабельных шрифтов для вывода на экран. Корпорация Microsoft продолжила общее дело, создав ESQ (Enhanced Screen Quality — улучшенное экранное качество) Truetype шрифты. Microsoft можно поблагодарить и за создание доступного каждому прекрасного набора масштабируемых экранных шрифтов, которые стали основой оформления текстов в сети:

    • Verdana,
    • Trebuchet MS,
    • Arial,
    • Times New Roman,
    • Courier New

    Символы Verdana и Georgia создаются из геометрических контуров, оптимизированных для вывода на экран. Созданные Мэтью Картером и в последствие оптимизированные Томом Рикнером (Tom Rickner) эти шрифты остаются четкими и читабельными даже при относительно малых размерах. Оптимизация в данном случае означает изменение шрифта, чтобы он выглядел как можно лучше даже на мониторах с маленьким разрешением.

    Выбор «безопасных» шрифтов для верстки сайтов

    Arial и Times New Roman были тщательно оптимизированы для вывода текстов на экран и поэтому сейчас считаются хорошим выбором для веб-верстки. Times New Roman — хороший шрифт с засечками, который подойдет для веб-документов, предназначенных для последующей печати. С другой стороны, Georgia — прекрасный читабельный шрифт с засечками, предназначенный именно для экранных документов. Arial — наверное самый популярный, и некоторые скажут, что даже слишком популярный, шрифт в веб-верстке. Arial — читабельный шрифт, если только не использовать его маленьких размеров. Verdana — хорошая альтернатива Arial, учитывая большую читабельность при малых размерах инебольшом разрешении экрана.

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

    Шрифты на практике

    Нельзя быть уверенным, что у посетителя вашего сайта обязательно будет установлен выбранный вами шрифт; не все путешествуют по сети с помощью Internet Explorer или используют другие продукты Microsoft. Однако есть пути решения этой проблемы; CSS и тег FONT позволяют указывать список предпочтительных для веб-страницы шрифтов и общий тип шрифта на крайний случай.

    Вот пример таблицы стилей:

    Body
    <
    font-family: Verdana, Arial, Helvetica, sans-serif;
    >

    Я выбрал Verdana, т. к. он читабелен даже при маленьких размерах символов. Но это шрифт Microsoft — он присутствует на компьютерах с Windows 95 и старше. К тому же этот относительно новый шрифт может и не присутствовать на компьютерах с более ранней версией Windows.

    Поэтому я указал вторым Arial для тех, у кого нет Verdana и Helvetica (эквивалент Arial на платформе Mac) для пользователей Macintosh, у которых нет Verdana или Arial. В конце концов я указал, что если не будет найдено этих шрифтов, то браузер отобразит текст рубленным шрифтом по умолчанию.

    Лучший шрифт для верстки сайтов

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

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

    При посещении удобного веб-сайта у пользователя должна быть возможность:

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

    Получается, что не так уж и сложно выбрать шрифты, удобные для чтения с монитора, если вам известны связанные с этим подвохи и способы обойти их. Просто ограничившись указанием в таблице стилей шрифтов: Verdana, Arial, (рубленные шрифты), Georgia или Times New Roman (шрифты с засечками), вы не поступите так уж плохо. Тем не менее, полезно знать, почему именно эти шрифты хороши для верстки сайтов и что еще можно сделать для повышения доступности сайта, удобства посетителей и читабельности текстов. Пора подытожить все, что вы узнали:

    • Удостоверьтесь, что вы не делаете ничего, что может помешать посетителям установить свой шрифт (другими словами не используйте тег ).
    • Используйте таблицы стилей вместо тега для установки свойств шрифта.
    • Выбирайте шрифт, доступный пользователям большинства операционных систем, или обеспечьте альтернативы, указав в таблице стилей также и общий тип шрифта.
    • Шрифт должен соответствовать смысловой нагрузке сайта.
    • Используйте гарнитуры, оптимизированные для вывода на экран.
    • Уделите внимание удобству восприятия и читабельности ваших текстов, используя, как уже говорилось, подходящий шрифт. Для большинства ваших посетителей, которые не будут менять настройки браузеров по умолчанию, также обратите внимание на: длину строк, межстрочный интервал (высоту строк), размер шрифта, шрифт по умолчанию, соотношение текста и свободного пространства на странице — все это повлияет на читабельность текста. Важность повышения читабельности текста увеличивается и из-за двух связанных между собой факторов: объема внимания и скорости прочтения и осмысления информации (для веб-страниц эти показатели на 10–20% меньше, чем для печатных документов).

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

    20 кириллических шрифтов для сайта

    Шрифты для сайт апоможет выбрать эта статья.
    Для вашего сайта мы выбрали 20 кириллических шрифтов.

    Все шрифты выбраны с Google Webfonts. На этом ресурсе можно выбрать шрифт и сразу же скопировать код для использования. Здесь же Вы просто можете по отдельности скачать TTF файлы. Подробное описание для каждого шрифта я делать не буду, это мне уже надоело. Я решил, что будет логично выкладывать шрифты именно целыми блоками. Таким образом, и публикация будет содержательная, и, соответственно, заинтересует большее количество людей.

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

    36 бесплатных веб-шрифтов для вашего сайта

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

    1. Montserrat

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

    2. Abril Fatface

    Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans.

    3. Playfair Display

    Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo.

    4. GT Walsheim

    Используемый сегодня во многих блогах, GT Walsheim является представителем геометрических гротесков и входит в семейство Grilli Type. За полный набор шрифтов нужно платить, но Grilli Type предлагает бесплатную пробную версию GT Walsheim.

    5. Merriweather

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

    6. Josefin Sans

    Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой.

    7. Gravitas One

    Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок.

    8. Jura

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

    9. League Gothic

    Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов.

    10. Fjord

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

    11. Amaranth

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

    12. Poly

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

    13. Gentium Basic

    Этот шрифт создавался как мульти-лингвистический, включающий в себя латинские и греческие литеры, а также кириллицу и продвинутую поддержку в версии Gentium Plus. Gentium Basic и Gentium Book Basic доступны в бесплатной веб-версии, но ограничены только латинским алфавитом.

    14. Open Sans

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

    15. Ledger Regular

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

    16. Signika

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

    17. Josefin Slab

    Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы.

    18. Forum

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

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

    20. Arvo

    Подходящий в равной степени как для печатной, так и для веб-версии, этот геометрический брусковый шрифт доступен в Roman, Italic, Roman Bold и Bold Italic. Небольшая контрастность Arvo повышает его читабельность на экране.

    21. Bevan

    Bevan был создан на основе традиционного брускового шрифта 30-х. Буквы были отцифрованы, им придали новую форму и оптимизировали для веб-версии. Это один из немногих сверхжирных шрифтов, которые подходят для сайтов.

    22. Old Standard TT

    Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице.

    23. Kreon

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

    24. Droid Sans

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

    25. Italiana

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

    26. Vollkorn

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

    27. Actor

    Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9.

    28. Lato

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

    29. Average

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

    30. EB Garamond

    Уходящий корнями в 16 век, гуманистический шрифт Garamond стал настоящей иконой типографики, неоднократно послужившей основой для создания современных шрифтов, включая шрифт EB Garamond.

    31. Ubuntu

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

    32. Rosario

    Rosario является классическим гуманистическим гротеском, который прекрасно подойдет для стилизации абзацев текста.

    33. Roboto Slab

    Roboto Slab является одним из шрифтов семейства Roboto. Брусковая версия особенно привлекает взгляд своими геометрическими формами и открытыми изгибами. Он одинаково хорошо подходит для экранов гаджетов и печатных версий текстов.

    34. Oswald

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

    35. Stalemate

    Stalemate – это изящный рукописный шрифт с некоторым винтажным оттенком. Он подходит для создания акцентов и персонализации вашего сайта.

    36. Crimson Text

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

    Илон Маск рекомендует:  Что такое код gmp_fact
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL