Шрифты кириллические для сайта: 42+ лучших кириллических шрифта бесплатно (обновлено в 2021)

Как выбрать шрифт для дизайна Web-сайта :: Дмитрий Маслов

Как выбрать шрифт для дизайна Web-сайта :: Дмитрий Маслов

Введение

Будем считать, что художественный вкус дизайнера в рамках данной статьи не обсуждается. Я — всего лишь программист, технарь, придаток машины, да что же я понимаю в Прекрасном? Разве могу я указывать дизайнеру как Творить? Конечно же нет.

Долгое время на веб-страницах в Интернете можно было использовать только ограниченное количество шрифтов, которые встроены в операционную систему, так называемые web-safe-шрифты. Но несколько лет назад появилась директива @font-face, позволяющая встроить в страницу любой шрифт. Конечно же, дизайнеры обрадовались этой новости. Ещё бы, ведь у них появилась дополнительная возможность приблизить вид веб-страницы к её идеалу!

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

Чтобы так не случалось, на основе своего богатого профессионального опыта приведу несколько житейских советов. В этой статье — относительно выбора шрифтов.

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

Итак, что же должен знать и делать дизайнер при выборе шрифта для дизайна сайта, чтобы конечный результат не пёрнул в лужу?

Набор символов

Думаю, это очевидно, но для порядку всё же напомню: далеко не во всех шрифтах есть кириллица (“русские буквы”). Поэтому при выборе шрифта стоит поинтересоваться, есть ли в нём кириллические символы. И в Фотошопе набирать рыбу не Lorem Ipsum, а какой-то русский текст, потому что даже если кириллица в шрифте и есть, её качество может быть ниже, чем латиницы. Набрав в качестве рыбы русский текст, вы дополнительно это проконтролируете.

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

Кроме того создатели шрифта могут “схалтурить” на символах, не являющихся буквами. Например, могут отсутствовать (или отвратительно выглядеть) знаки копирайта, торговой марки, знаки валют и т.д.. Особенно это относится к декоративным шрифтам, которые вполне могут содержать только буквы с цифрами и всё. Также бывают шрифты, содержащие в себе только прописные буквы и не имеющие строчных. Если вам в заголовках нужны какие-то знаки помимо букв — убедитесь, чтобы они были. Для абзацев наличие прописных и строчных букв, цифр, знаков препинания и т.д. — обязательно. Лучше использовать рыбу, содержащую все интересующие вас знаки.

Количество шрифтов на сайте и их параметров на странице

Чтобы вставить шрифт на страницу, его сперва надо сконвертировать в понятный для браузеров формат. Потом css для него правильно написать. Хорошо если шрифт взят из Гугл Фонтс, он сразу даёт готовое к применению. А если шрифт не оттуда, то делать это будет верстальщик.

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

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

То же можно сказать о размере, цвете и межстрочном расстоянии. Примите за правило, что, например, в блоках с основным текстом цвет — тёмно-серый, размер 16, межстрочное 22. В заголовках размер 36, цвет чёрный. Будет просто прекрасно, если вы, помимо PSD-файлов, на словах передадите это верстальщику. Тогда будет можно один раз и для всех страниц записать правила для такого типа элементов.

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

Нет, ну конечно, если вы считаете, что на одной странице нужно делать текст цвета #222, на второй в таком же блоке #333, а на третьей снова #222, но разрядка не 22, а 23, потому что такова ваша гениальная дизайнерская задумка, и вы настаиваете, чтобы это было именно так, а верстальщик просто не хочет работать, то так тому и быть!

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

А рабочее время верстальщика тоже стоит денег. Расскажите лично заказчику о своей гениальной дизайнерской мысли и о том, сколько дополнительно он за это заплатит. Думаю, он не очень обрадуется. Экономьте время своих коллег и бюджет проекта, когда есть такая возможность. Это прямая обязанность дизайнера, помните об этом.

Отображение

Абзац

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

Чем мельче надпись, тем выше шанс охренеть от результата.

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

Какие это шрифты? Ну, во-первых так называемые “безопасные” или web-safe шрифты. Те самые, которые уже “встроены”, т.е. “стандартные”:

Как сообщает w3schools, “безопасных шрифтов” всего 13 штук:

Georgia
Palatino Linotype
Times New Roman
Arial, Arial Black
Comic Sans MS
Impact
Lucida Sans Unicode
Tahoma
Trebuchet MS
Verdana
Courier New
Lucida Console

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

Тут, скорее, плохому танцору яйца мешают.

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

Шрифты гарнитуры «PT Sans»

Технически он выверен даже лучше встроенных в Windows. К тому же он бесплатен для использования на Web. В отличие от Myriad Pro, качество отображения которого в низком разрешении тоже высоко, но за его использование на сайте надо, мало кто знает, платить! Фактически этого никто, конечно не делает, но я бы всё равно не рекомендовал без лицензии встраивать его на страницы. Сегодня за это не ловят, а завтра начнут. Вы ж знаете, в какое время и в какой стране живём.

Кроме того, мне нравится, как технически выполнены шрифты гарнитуры Ubuntu. (Ubuntu — это не только семейство операционных систем, но также и семейство шрифтов!) Даже на маленьком кегле они сохраняют чрезвычайную чёткость. И к тому же использование их совершенно бесплатно. Однако сам шрифт весьма “шутливый”, что ли, поэтому он будет “в тему” далеко не во всяком дизайне. Однако уже как раз это оставим на выбор дизайнера в соответствии с его вкусами.

Пример надписи шрифтом из гарнитуры «Ubuntu»

Наверное, практически все бесплатные кириллические шрифты с толковым хинтингом собраны в библиотеке “Гугл Фонтс”. Их мало, вот они и держатся вместе. Если слева выбрать в меню Script пункт Cyrillic, то мы увидим всего-навсего 55 шрифтов. Но даже из них не все имеют хороший хинтинг, в частности, декоративные, не рассчитанные на отображение в маленьком размере. Поэтому не поленитесь переключиться на вкладку Paragraph, выбрать там размер шрифта, который предполагается использовать в дизайне, посмотреть на результат и решить, насколько он вас удовлетворяет. Если вы используете Mac, то не поленитесь проделать это под Windows, чтобы увидеть, как это будет отображаться именно на Винде.

Если же вы выбрали какой-то другой шрифт для абзацев, не из библиотеки Гугла, то тем более обязательно проверьте, как он будет отображаться на веб-странице, а также все ли знаки имеются в шрифте, есть ли там кириллица, какие-то другие символы, если таковые нужны. Сделайте тестовую страницу с этим шрифтом и посмотрите, как она выглядит в разных ОС (в Windows надо проверить обязательно) и разных браузерах (хотя бы в самых популярных — Chrome, Firefox, IE).

Заголовки

Для заголовков выбор шрифта не такой строгий. Так как размер шрифта в заголовке обыкновенно бывает бОльших размеров, чем в абзаце, у растеризатора куда больше пространства, чтобы отобразить символ корректно. Поэтому здесь допустимо использовать и шрифты, не имеющие хинтинга. Специалисты-шрифтовики утверждают, что хинтинг для символов не нужен при размере 60 и более пунктов. Я же не столь категоричен и считаю, что обычно шрифт без хинтинга уже примерно при 24 пикселях в высоту выглядит сносно, после 36 разницу найдут только эстеты с лупой. Тем не менее бывают случаи, когда даже в довольно большом размере шрифт выглядит парашно, особенно если в его символах много тонких штрихов.

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

Примеры

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

Шрифт UniSansThinCAPS в размере 18 пикселей в Фотошопе. Ну, вроде, неплохо.

Он же, но на веб-странице в Google Chrome под Windows 8.1. Жутковато.

Он же в Firefox. Уже не так плохо, хотя и хуже, чем в Фотошопе.

Он же в размере 11 пикселей в Фотошопе. Так себе, если честно.

Он же, в Хроме. Страшненько, но хотя бы читаемо.

Он же в Firefox. Провал! Читать невозможно.

А вот фрагмент дизайна другого сайта. Здесь использованы шрифты Cuprum (48 пикселей) для заголовка и PT Sans (16 пикселей) для абзаца.

Фрагмент дизайна в Фотошопе

Результат в Хроме

Оно же в Firefox

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

Я не говорю, что UniSans плохой, а PT Sans и Cuprum — хорошие. Просто UniSans для использования на веб-странице не предназначен.

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

Список web-safe шрифтов
Шрифты PT Sans, PT Serif и PT Mono на сайте их авторов
Законность использования Myriad Pro
Семейство шрифтов Ubuntu на своём официальном сайте
Гугл Фонтс

 

You can leave a comment with «Facebook»: Не забывайте оставлять комментарии при помощи «ВКонтакте»:

Где вы ищете шрифты?

Аня Данилова

Екатерина!

Есть агрегаторы шрифтов, то есть сайты, на которых представлены шрифты разных компаний. Самый крупный их них — Майфонтс. При большом желании на Майфонтсе можно найти практически всё. Ещё там есть самые популярные шрифты крупных шрифтовых компаний: Гельветика, Прагматика, ДИН и другие. Есть подборки бестселлеров, новинок и акций на шрифты.

Майфонтс

Минус Майфонтса в том, что это шрифтовая свалка: на сайте тысячи шрифтов, и на один хороший шрифт приходится десять шрифтов ненадлежащего качества. Поэтому я бы советовала ходить туда, когда есть точный запрос для поиска. Например, вам для сайта нужен акцидентный шрифт с большим контрастом для заголовков с поддержкой кириллицы. Эти данные можно указать в расширенном поиске, тогда система покажет подходящие результаты: Шрифты ФФ Карина и Тривиа вполне подходят под описание дисплейных и с большим контрастом Правда, даже по самым конкретным тегам всё равно часто выпадает фигня. Например, по этому же запросу акцидентных шрифтов с большим контрастом выпали и такие шрифты: Шрифты Сандей Ивнинг и Ареко 4Ф — хоть и акцидентные, но уж точно не с большим контрастом Такое происходит, потому что теги выставляют и создатели шрифта, и пользователи, и никто их особо не модерирует. Поэтому польза таких тегов, на мой взгляд, невелика. Я ищу шрифты на сайтах с более высоким порогом входа, а значит, с меньшим выбором шрифтов. Сайтов с качественными шрифтами, да ещё и чтобы с кириллицей, не так много.

Как отличить хороший шрифт, подборка советов

Тайп.тудей — это коллекция шрифтов, которая собрана Ильёй Рудерманом и Юрией Остроменским. На сайте представлено не больше пятидесяти шрифтов, но все они хорошего качества и с кириллицей. Сайт Тайп. тудей

Тайп.тудей

Ещё всегда советую смотреть шрифты у компании Тайпотек: кириллица есть во многих шрифтах, и все шрифты хорошо сделаны. Использовать такие шрифты в проектах всегда приятно. Примеры текстовых антикв с кириллицей на сайте Тайпотек

Тайпотек

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

Фонтстенд Об аренде шрифтов

P. P. S. Это был субботний совет о шрифте в дизайне. Хотите знать всё о выборе шрифтов для проекта, о подборе шрифтовых пар, о каллиграфии, летеринге и создании собственных шрифтов? Присылайте вопросы.

Часто задаваемые вопросы (FAQ) — Латинские, кириллические и греческие шрифты

Вот некоторые из наиболее часто задаваемых вопросов о латинских, кириллических и греческих шрифтах SIL. По вопросам, связанным с конкретным шрифтом, обращайтесь на веб-сайт отдельного шрифтового проекта. Общие вопросы о шрифтах SIL см. в FAQ по шрифтам SIL и в FAQ по открытой лицензии на шрифты SIL (OFL-FAQ).

Вы поставляете клавиатуру со шрифтами?

Нет. Наши шрифты для латиницы, кириллицы и греческого языка не включают никаких утилит для клавиатуры. Если вы не можете использовать встроенные клавиатуры или методы ввода операционной системы, вам необходимо установить их для символов языка, который вы хотите использовать. Keyman от SIL предоставляет клавиатуры для более чем 2000 языков и работает на всех основных настольных и мобильных платформах. Информацию о других параметрах клавиатуры см. в обзоре на странице Обзор систем клавиатуры (ScriptSource).

Как набирать символы IPA?

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

Я не могу найти букву «о с правым хуком» в шрифте. Где это находится?

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

Какие функции OpenType есть в шрифтах и ​​как их использовать?

Большинство возможностей шрифтов OpenType (расположение диакритических знаков, формирование лигатур) автоматически активируются в приложениях, поддерживающих OpenType. Чтобы узнать, какие функции шрифтов могут выбираться пользователем, см. страницу Features для отдельных семейств шрифтов (например, функции шрифтов Charis SIL). Сведения об управлении функциями OpenType в конкретных приложениях см. в разделе Использование функций шрифтов. Чтобы узнать, как указать функции OpenType на веб-страницах, см. Использование шрифтов SIL на веб-страницах.

Как использовать одно- и двухэтажную букву «а» курсивом?

Существует функция OpenType — Slant Italic Specials (ss05) — позволяющая выделить курсивом двухэтажную букву «a».

Почему мои диакритические знаки расположены неправильно?

Это может быть вызвано тремя причинами:

• Отсутствие поддержки OpenType. Приложение, которое вы используете, не поддерживает OpenType или вы используете символы из области частного использования (PUA) в приложении OpenType. Для этой ситуации нет решения.

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

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

Почему некоторые из моих диакритических знаков сталкиваются с соседними буквами?

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

Почему межстрочный интервал меньше, чем у других шрифтов?

Эти шрифты содержат символы с несколькими расположенными друг над другом диакритическими знаками, для которых требуется более широкий межстрочный интервал (например, U+1EA8 Ẩ). Чтобы избежать проблем с диакритическими знаками, которые накладываются на другие строки или обрезаются, мы установили межстрочный интервал по умолчанию больше, чем во многих других шрифтах.

Вы можете решить эту проблему, отрегулировав межстрочный интервал в приложении. Например, в Microsoft Word выберите Format / Paragraph и установите межстрочный интервал, чтобы использовать параметр Exactly и значение, более подходящее для ваших нужд. Например, если размер шрифта составляет 12 пунктов, выберите межстрочный интервал Ровно 13 пунктов. Это даст более плотный межстрочный интервал. Вы можете увеличить или уменьшить значение в зависимости от того, сколько диакритических знаков вам нужно сложить. На веб-страницах вы можете явно установить свойство line-height .

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

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

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

FAQ по старым версиям шрифтов остается доступным на Latin, Cyrillic, и Greek Fonts — FAQ v5. Пожалуйста, поймите, что информация на этой странице может быть устаревшей, неактуальной или неверной для текущих операционных систем и приложений! Предоставляется только в помощь пользователям более старых версий.

Латексных шрифтов Кириллические шрифты с левым шрифтом — TeX

спросил 7 лет, 7 месяцев назад

Изменено 7 лет, 7 месяцев назад

Просмотрено 1к раз

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

 \documentclass[10pt,a5paper,draft]{книга}
\usepackage[T2A]{шрифт}
\usepackage[utf8x]{inputenc}
\usepackage[русский, английский]{babel}
\начать{документ}
    Какой-то осмысленный текст1.
    Какой-то осмысленный текст2.
\конец{документ}
 

Теперь это два одинаковых шрифта, но я хочу, чтобы они были разными. Я знаю, что могу использовать xetex для использования разных шрифтов, но мне нужен latex , поэтому я обнаружил, что могу использовать шрифты lh . Но я не знаю, как их включить.

• шрифты
• кириллица

14

Думаю, это то, что вам нужно:

 \documentclass[10pt,a5paper,draft]{книга}
\usepackage[T2A]{шрифт}
\usepackage[utf8x]{inputenc}
\usepackage[русский, английский]{babel}
\начать{документ}
\rmсемья
Какой-то осмысленный текст1.
\sffсемья
Какой-то осмысленный текст2.
\ttfamily
Какой-то осмысленный текст3.
\конец{документ}
 

Производит

6

Вы можете использовать шрифты lh , добавив \usepackage{lh-lcy} , но вы также должны отметить места, где должен использоваться русский язык.

 \documentclass[10pt,a5paper,черновик]{книга}
\usepackage[T2A]{шрифт}
\usepackage[utf8]{inputenc}
\usepackage[английский,русский]{babel}
\usepackage{lh-lcy}
\начать{документ}
Какой-то осмысленный текст1.
Какой-то осмысленный текст2. 
\конец{документ}
 

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

 \documentclass[10pt,a5paper,draft]{книга}
\usepackage[T2A]{шрифт}
\usepackage[utf8]{inputenc}
\usepackage[русский,английский]{babel}
\usepackage{lh-lcy}
\начать{документ}
Какой-то текст на английском.
\begin{otherlanguage*}{русский}
Какой-то осмысленный текст1.
Какой-то осмысленный текст2.
\end{другой язык*}
\конец{документ}
 

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

 \documentclass{статья}
\usepackage[T2A]{шрифт}
\usepackage[utf8]{inputenc}
\начать{документ}
\noindent Какой-то осмысленный текст1.\\ % Шрифт Computer Modern
\fontfamily{fdr}\selectfont Какой-то осмысленный текст2.
No related posts.