Лучшие свободные моноширинные шрифты с поддержкой кириллицы / Хабр

В 2011 году была переведена хорошая статья „Лучшие шрифты для программирования“. Теперь представляется список самых удачных шрифтов для кода на момент июня 2014 года.
Хотя я и уверен, что многих устраивает Courier New, используемый по умолчанию в Windows во многих редакторах. Но, как человек любящий типографику, настаиваю обратить внимание на одну из гарнитур из этой статьи. Хороший шрифт — это прекрасно!

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

PT Mono

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

Обладает очень качественной кириллицей. Но в остальном имеет несколько недостатков. Символ «минус» ниже символа «плюс», и не оцентрован относительно знака «равно», т. е. «-=» будет смотреться не красиво. Все скобки располагаются низко, хотя такой подход прослеживается во многих шрифтах.
PT Mono — личный выбор автора поста.
Можно скачать с ЖЖ разработчиков.

Нормальное начертание

Более темное начертание

Droid Sans Mono

Семейство Droid разработано корпорацией добра для мобильных устройств. Доступен в Google Fonts, но эта версия имеет существенный недостаток — неперечеркнутый ноль. Версию с перечеркнутым, а также нулем с точкой, можно скачать на стороннем сайте.
Отличается довольно сносной кириллицей. Хорошо подходит для любого кода. Я уже несколько лет использую именно его. Однако шрифт всё же имеет небольшие недостатки.

DejaVu Sans Mono

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

Cousine

Гарнитура от автора Droid Sans, созданная для разработчиков. Можно скачать с Google Fonts.
Кириллица на уровне DejaVu. Остальное симпатичное и читабельное.

Нормальное начертание

Более темное начертание

Ubuntu Mono

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

Fira Mono

Для использования в Firefox OS организация Mozilla разработала семейство шрифтов Fira. На Хабре есть обзор гарнитуры.
Кириллица на достаточно хорошем уровне, но не будет слишком сильно радовать глаз искушенного зрителя. Для кода подходит хорошо.

Inconsolata

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

P. S. Волшебный архив со всеми представленными шрифтами на Яндекс Диске или на Google Docs.
P. P. S. Относительно лёгкий способ определить качество кириллицы в шрифте.

Лучшие шрифты в фигме

02.07.2022

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

Интерфейс работы со шрифтами

Стилевое исполнение как основа системы шрифтов

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

Особо стоит рассмотреть систему шрифтов, которые в Фигме являются достаточно красивыми. Каждый из них имеет свою стилистику, что позволяет легко придавать определенные свойства конкретному текстовому объекту. Широкие возможности приложения позволяют web-дизайнеру использовать такие параметры:

  • Начертание и размер шрифта.

  • Межстрочный интервал.

  • Расстояние между абзацами.

  • Отступ красной строки.

  • Кернинг или интервал между буквами.

  • Зачеркивание и подчеркивание.

  • Тип написания: строчные буквы (lowercase), прописные буквы (uppercase).

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

Особенности шрифтов в Figma

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

Четкая геометрия улучшает восприятия текста

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

Выбор стиля

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

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

  • Наличие или отсутствие фирменных шрифтов, разработанных под конкретный бренд (logo).

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

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

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

Классическая 8-пиксельная сетка

Важно подчеркнуть, что такую систему можно свободно применять для самых разных сайтов вне зависимости от типа. Для расчетов используются простые математические расчеты: умножение, сложение, деление и вычитание. Чтобы перемещать объекты по сетке используют комбинацию Shift+стрелочки. При помощи такой системы можно легко масштабировать свой дизайн.

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

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

Каждый может легко скачать дополнительные шрифты

Самые популярные шрифты в программе Фигма

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

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

Пример шрифта Playfair Display

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

Пример шрифта Gilroy.

3. Gotham Pro. Универсальный шрифт, который можно использовать в web-дизайне для оформления самых разных сетевых ресурсов. Особая стилистика позволяет ему отлично смотреться в самых разных композиционных решениях.

Шрифт Gotham Pro

4. Stolzl. Особый шрифт, который подходит к легким и «воздушным» композициям, а также сайтам для разных молодежных тематик. Относится к категории гротескных, имеет 6 начертаний и имеет свыше 50 языков.

Шрифт Stolzl

5. P22Underground. Это наиболее простой, но строгий стиль в категории «без засечек». Чаще всего его применяют в разных2 композиционных макетах, особенно при хаотичном расположении дизайнерских элементов.

Шрифт P22Underground

Особенности выбора шрифтов в Фигме

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

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

Особенности иконочных шрифтов

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

Выводы

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

An error has occurred. This application may no longer respond until reloaded. Reload 🗙

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


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

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

PT Моно

Разработано в России при поддержке Федерального агентства по печати и массовым коммуникациям Российской Федерации. На сайте разработчиков можно найти более подробное описание.
Имеет очень качественную кириллицу. Но в остальном есть несколько недостатков. Знак минус находится ниже знака плюс, и не центрирован относительно знака равенства, то есть «-=» будет смотреться не красиво. Все скобки низкие, хотя такой подход прослеживается во многих шрифтах.
PT Mono — личный выбор автора поста.
Можно скачать у разработчиков ЖЖ.

Обычный стиль

Темный стиль

Droid sans mono

Семейство Droid было разработано Goodness Corporation для мобильных устройств. Доступен на Google Fonts, но у этой версии есть существенный недостаток — разархивированный ноль. Версию с перечеркнутым, а также нулем с точкой можно скачать на стороннем сайте.
Имеет довольно сносную кириллицу. Подходит для любого кода. Я использую его уже несколько лет. Тем не менее, шрифт все же имеет небольшие недостатки.

ДежаВю Санс Моно

У него есть вики, вы можете скачать ее оттуда.
Плохая кириллица (но бывает и хуже). В остальном ярких минусов у него нет. Но и выделиться тоже нечем.

Кузина

Гарнитура от Droid Sans, предназначенная для разработчиков. Можно скачать с Google Fonts.
Кириллица на уровне Дежавю. В остальном красиво и читабельно.

Обычный стиль

Темный стиль

Ubuntu моно

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

Фира моно

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

Автор записи

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

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