• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ (Украина) →
Вход
×
или зарегистрироваться

Как быстро определить «правильные» шрифты?

ДневникПросмотров: 12006Комментарии: 022 февраля 2016 г.

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

Наиболее популярны: Open Sans, Roboto, Ubuntu и другие. У этих шрифтов, помимо начертания, есть еще и «адаптация к экранному сглаживанию». Именно поэтому на мониторе с включенным сглаживанием привычный Arial проигрывает Open Sans, хотя их начертания и похожи.

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

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

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

В типографике существует понятие гарнитура. Многие его путают с понятием шрифт. Так вот, гарнитура — это набор шрифтов. Например гарнитура Arial состоит из набора шрифтов обычного начертания (normal), курсив (italic), жирный (bold) и жирный курсив (bold italic).

Обычно, вместо «жирный» используется слово «полужирный». Если говорить строго, то «жирность» — это степень насыщенности. Скажем normal — это 400, bold — это 700. Браузеры не могут правильно определять все градации, поэтому используется только bold, который по значению всё-таки ближе к «полужирности», поскольку «совсем жирный» будет иметь значение 900.

Иногда в гарнитуру включают и другие начертания, например сейчас встречается ultra bold и light.

В печатной полиграфии это очень активно используется, а вот для вебсайтов приходится довольствоваться ограничениями HTML и CSS. Нам доступны normal, bold (тэги B и STRONG), italic (тэги I и EM) и комбинации bold italic.

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

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

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

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

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

Ради интереса, возьмите бумагу и напишите фразу

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

А теперь сравните начертание букв на экране и своё. Обратите внимание, что ряд букв имеет разное начертание.

У меня сайт использует Open Sans, в котором используется полноценный курсив:

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

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

a — a
г — г
т — т
и — и
п — п
е — е

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

Вот для примера стандартный Arial (частичная поддержка курсива):

a — a
г — г
т — т
и — и
п — п
е — е

Verdana (нет курсива):

a — a
г — г
т — т
и — и
п — п
е — е

Тahoma (есть поддержка):

a — a
г — г
т — т
и — и
п — п
е — е

Times New Roman (есть):

a — a
г — г
т — т
и — и
п — п
е — е

Основываясь на эту методику, вы можете подобрать «правильные» шрифты для своего сайта на Google Fonts. Я приведу некоторые из них:

  • Open Sans
  • Lora
  • PT Sans
  • Ubuntu
  • PT Serif

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


Создание сайтов (Украина) →
Управление временем по методу Pomodoro
Нормальное описание Flexbox-модели
twitter.com facebook.com
Другие записи сайта
Фрилансер-робот или советы ни о чем и ни для кого
Фрилансер-робот или советы ни о чем и ни для кого
Не смотрите наверх / Don’t Look Up (2021)
Не смотрите наверх / Don’t Look Up (2021)
Модульность в php-проекте
Модульность в php-проекте
Обновление Albireo (Sqlite, PSR-4, PSR-3 и т.д.)
Обновление Albireo (Sqlite, PSR-4, PSR-3 и т.д.)
CodeIgniter 4. Роутинг. Формы. REST
CodeIgniter 4. Роутинг. Формы. REST
b2evolution
b2evolution
Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.3473 | SQL: 20 | Память: 4.6MB | Вход