лучший шрифт для кода
10 лучших шрифтов для программирования, которые нужны разработчикам
Ищете лучшие программные шрифты? Итак, ваш поиск заканчивается здесь, так как этот список из 10 лучших шрифтов программирования познакомит вас с некоторыми из лучших доступных шрифтов для программирования.
1. Fira Code
С Fira Code вы получаете лучшую и улучшенную возможность сканирования кода, сопровождаемого лигатурами для функций стрелок, равенства и многого другого.
2. Input
Тем не менее, есть некоторые преимущества использования этого шрифта, такие как удобство чтения, легкое обнаружение опечаток и тонкое различие между стилями шрифта и кодом.
3. Source Code Pro
Source Code Pro поставляется с конструктивными особенностями и пропорциями Source Sans, однако он скручивает ширину глифов, чтобы поддерживать однородность по весам и глифам.
Разработанный специально для программирования, Source Code Pro легко читается и имеет одинаковую ширину, чтобы предотвратить разрыв слов. Он оснащен большими знаками препинания и заметными символами программирования, которые сделают ваш опыт программирования еще лучше.
4. DejaVu Sans Mono
Оснащенный большинством Unicode, программный шрифт DejaVu Sans Mono обеспечивает доступ к целому ряду специальных и математических символов, таких как операторы, стрелки, специальные алфавиты и т.д. Он является отличным выбором для языков, которым требуются специальные символы, такие как Agda.
Кроме того, режимы редактора в нем показывают символы без каких-либо изменений в подсветке синтаксиса и базовом файле.
5. Inconsolata-g
6. Menlo
Menlo является новейшим шрифтом по умолчанию для macOS Xcode, а терминал унаследован от DejaVu Sans Mono. он поставляется с легко читаемыми символами, которые имеют одинаковую ширину по всему весу, дабы предотвратить разрыв.
Это отличный выбор для тех, кто должен сидеть несколько часов и смотреть на программный код.
7. Anonymous Pro
Anonymous Pro разработан специально с учетом программирования. Эти четыре шрифта с фиксированной шириной имеют разные формы, чтобы легко различать контекст исходного кода.
8. Iosevka
Шрифт Iosevka поставляется с символами CJK двойной ширины, которые по умолчанию используют косую черту. Он оснащен лигатуры подходят для функциональных языков программирования таких как Haskell и Coq и т.д.
Его конструкция хорошо подходит как для терминалов, так и для варианта Iosevka Fixed. Кроме того, он также включает в себя функции OpenType, такие как варианты символов и стилистические наборы.
9. Hack
10. Ubuntu Mono
В Ubuntu Mono шрифты программирования поставляются с гладкой и привлекательной эстетикой. Они обеспечивают превосходную достоверность, помогая вам вначале ознакомиться со словами и символами, используя только форму, интервалы, толщину линий и т. Д. Он включает около 250 языков и 1200 символов.
Кроме того, шрифты имеют субпиксельный рендеринг и разборчивость.
Найдите лучший шрифт для программирования, следуя этому списку из 10 лучших программных шрифтов, которые сделают ваш опыт программирования лучше и перспективнее!
Красивые шрифты для написания кода
Перевод статьи «Awesome fonts to code».
Мы, программисты, проводим много времени за клавиатурой. Шрифты, которые мы при этом используем, влияют на наше мышление и продуктивность работы. И сейчас, когда в связи с дистанционной работой мы стали проводить еще больше времени, глядя в экран, стоит позаботиться о том, чтобы облегчить себе работу и повысить производительность.
В этой статье вы найдете список потрясающих шрифтов, благодаря которым ваш код станет еще элегантнее и лаконичнее (а вы — еще продуктивнее).
Примечание: это мой собственный список любимых моноширинных шрифтов. Не стесняйтесь добавлять в комментариях свои любимые шрифты для кодинга.
Fira Code Mono
Без этого классического шрифта любой список был бы неполным.
Source Code Pro
Этот шрифт от Adobe прекрасен. Он чистый и хрустящий.
Hasklig
Этот шрифт — ответвление Source Code Pro с добавлением красивых лигатур.
Anonymous Pro
Шрифт с фиксированной шириной для кодинга.
Fantasque
Крутой и освежающий шрифт. В нем есть рукописные элементы, например, лигатуры.
Jetbrains Mono
Это один из шрифтов от Jetbrains. В их IDE уже есть клевые абстрактные изображения. Этот шрифт немного крупноват, но все равно красив.
Monoid
Шрифт четкий и немного вытянутый в высоту. Но при этом он отлично выглядит даже на экранах с низким разрешением.
Cascadia Code
На самой первой моей машине стояла Windows. Я долго пользовался этой ОС и по работе (вот не надо поглядывать на меня с укоризной). В общем, этот шрифт был моим фаворитом в течение долгого времени. Недавно я увидел, что теперь у него открытый код, и эта новая встреча пробудила приятные воспоминания.
Этот шрифт тоже очень крут, но он платный. Сам я этим шрифтом для работы с кодом не пользовался, но применял его при оформлении сниппетов (на carbon.now.sh).
Также стоит упомянуть:
Вуаля, вы нечаянно изучили quickSort с использованием Haskell 😉
На этом статья Sendil Kumar N подошла к концу, но мы в редакции Techrocks решили дополнить ее парочкой шрифтов из другой статьи.
Inconsolata
Еще один бесплатный шрифт с лигатурами, созданный для прекрасного опыта кодинга. Это опенсорсная альтернатива шрифту Consolas.
Ubuntu Mono
Что в этом шрифте особенно хорошо, что вы можете запросто скачать его из Google Fonts.
Iosevka
Этот шрифт часто входит в списки «самых лучших шрифтов», так что мы решили тоже не отставать.
Лучшие шрифты для программирования
Статья написана в 2009 году, и с тех пор многое изменилось, в том числе появились некоторые альтернативные шрифты для программирования, например, Anonymous Pro.
Как разработчик и настоящий гик в области типографики, если речь идёт о шрифте, на который придётся глазеть целый день, то я буду выбирать очень тщательно. Когда я недавно заметил, что мой друг использует довольно невзрачный шрифт для консоли и в редакторе кода (он слишком ужасен, чтобы здесь упоминать), то у меня отвисла челюсть, а сердце на секунду перестало биться, и я понял, что мне пришло время написать эту статью.
Я выкладываю список из десяти моноширинных шрифтов, готовых к использованию. Некоторые из них идут в комплекте с современными операционными системами, но большинство можно бесплатно скачать из интернета. Отдельные, в том числе Consolas, являются частью коммерческого ПО.
Примечание о сглаживании шрифтов (anti-aliasing)
В прошлом приходилось выбирать либо маленький моношрифт, либо зубчатые края. Но современные операционные системы отлично справляются со сглаживанием, так что моноширинные гарнитуры хорошо выглядят при любом кегле. Это больше не 1990 год, так что дайте отдых своим уставшим глазам и увеличьте размер шрифта.
Если у вас остались какие-то сомнения, что сглаженные шрифты подходят для кодинга, обратите внимание, что даже многоуважаемый BBEdit, который много лет поставлялся в несглаженном наборе Monaco 9 в качестве дефолтного, спрыгнул с поезда. Приложение теперь идёт в комплекте со специально лицензированной версией Consolas от Ascender, увеличенного размера, со сглаживанием по умолчанию. Panic тоже содержит специальный сглаженный шрифт (Panic Sans, который на самом деле просто версия Deja Vu Sans Mono) в своём популярном приложении Coda.
Если не оговорено обратное, для иллюстраций здесь я использовал здесь кегль размером 15 пунктов с включенным сглаживанием, чтобы продемонстрировать его годность на больших размерах.
10. Courier
Все ОС идут в комплекте с какой-нибудь модификацией Courier (часто именуется Courier New). К сожалению, многие выбрали этот шрифт для консоли и редактора. Он делает своё дело, но при этом уныл и скучен, страдает от нехватки стиля и лоска. Я не рекомендую этот шрифт, если у вас есть хоть какая-то альтернатива — и, к счастью, она у вас есть. Если вы его всё-таки используйте, то хотя бы увеличьте размер и включите сглаживание.
Courier New
9. Andale Mono
Чуть лучше семейства Courier, шрифт Andale Mono тоже попадает в категорию дефолтных, поскольку поставляется с некоторыми системами. Вряд ли бы вы захотели скачать и использовать его, если бы он уже не был установлен. На мой вкус, межбуквенный интервал у него корявый, а буквы слишком широкие.
9. Andale Mono
8. Monaco
Monaco — моноширинный шрифт по умолчанию на Mac со времён System 6. Он вполне цельный, хорошая рабочая лошадка, которая действительно отлично выглядит при маленьком кегле с выключенным сглаживанием. Раньше мне нравился этот шрифт, когда мои глаза могли смотреть несколько часов на кегль размером 9 пунктов, но те времена прошли. Этот шрифт хорошо выглядит на 9 или 10 пунктах, но не очень радует на бóльших размерах со сглаживанием.
Насколько я знаю, получить Monaco можно только вместе с Mac OS, но есть другие варианты, так что читайте дальше.
Monaco
Monaco 9 пунктов, без сглаживания
7. Profont
Profont сделан по образцу Monaco и доступен для Mac, Windows и Linux (есть также модифицированная версия для Mac OS X под названием ProFontX, от другого автора). Они лучше всего смотрятся на маленьком кегле и представляют собой отличную альтернативу Monaco, если вы работаете не на «макинтоше». Profont и ProFontX предназначены для использования при размере 9 пунктов с выключенным сглаживанием.
Profont 9 пунктов, без сглаживания
6. Monofur
Monofur — уникальный моноширинный шрифт, который великолепно выглядит на любых размерах со сглаживанием. Это довольно забавный шрифт с индивидуальными очертаниями, смутно напоминающими графический интерфейс Sun OPEN LOOK, который работал на системах Solaris (SunOS) в конце 80-х. Если вы ищете нечто особенное, попробуйте этот шрифт, но не забудьте включить сглаживание даже на маленьком кегле.
Monofur
5. Proggy
Proggy — чистый моноширинный шрифт. Кажется, его особенно предпочитают пользователи Windows, хотя он нормально работает и на Mac. Это чёткий шрифт, который нужно использовать только на малых размерах без сглаживания.
Proggy Clean 15 пунктов (да, 15 пунктов), без сглаживания
4. Droid Sans Mono
Семейство Droid (доступно для скачивания здесь) специально создано для использования на маленьких экранах смартфонов, таких как Android, и опубликовано под лицензией Apache.
Droid Sans Mono отлично подходит для программирования. Он выполнен с особым вкусом и выделяется среди остальных моноширинных шрифтов в этом списке, но у него есть единственный крупный недостаток — неперечёркнутый ноль. Версия с поправленным нулём здесь — прим. пер.
Droid Sans Mono
3. Deja Vu Sans Mono
Семейство Deja Vu — одна из моих любимых бесплатных гарнитур, основанная на великолепном Vera Font. Шрифты Deja Vu дополнены широким набором символов, сохранив при этом знакомый вид Vera.
Эту гарнитуру я использовал много лет. Она отлично выглядит на любом размере с включенным сглаживанием.
Panic поставляет в комплекте со своим приложением Coda шрифт под названием Panic Sans, который основан на этом шрифте. Грубер сказал мне в письме, что при сравнении Panic Sans и Vera у первого «заметно более резкие знаки пунктуации», ну и похоже на то, что они ещё улучшили хинтинг некоторых символов.
Deja Vu Sans Mono
2. Consolas
Consolas неожиданно появился на моём маке, когда я установил Microsoft Office, а вместе с ним ещё целый комплект новых шрифтов от Microsoft.
Этот шрифт создал Лукас де Грут (Lucas de Groot) специально для Microsoft ClearType (здесь отличное описание с примерами всех новых шрифтов Microsoft). Consolas — коммерческий фонт, но он поставляется со многими продуктами Microsoft, и есть большая вероятность, что он уже установлен на вашей системе.
Вам настоятельно рекомендуется включить сглаживание для Consolas, потому что иначе он выглядит ужасно.
Очень жаль, что шрифт не бесплатный, иначе бы он заслуживал первого места в этом списке.
Consolas
1. Inconsolata
Inconsolata — мой любимый моноширинный шрифт, и он бесплатный. Когда я его обнаружил, то сразу заменил Deja Vu Sans Mono в качестве рабочего шрифта для программирования. Я использую его вообще повсюду, от окон консоли до редакторов кода. У него практически безупречный и в то же время оригинальный стиль, и он фантастически выглядит и на больших, и на маленьких размерах. Я использую эту гарнитуру, демонстрируя код на презентациях, и также в окнах консоли и TextMate для скринкастов PeepCode. Шрифт не поддерживает кириллицу — прим. пер.
Inconsolata разработан для использования со сглаживанием, но он удивительно чёткий на самых маленьких размерах. Большое спасибо Рафу Левину (Raph Levien) за создание этого шрифта и за то, что он бесплатный.
Inconsolata
11 лучших шрифтов для программирования
Много статей и сайтов сравнивают шрифты для программирования — всё это отличные ресурсы. Так зачем я опять поднимаю эту тему? Потому что сам всегда терялся в десятках шрифтов и не мог понять, какой лучше. Так что я опробовал много шрифтов и выбрал следующие для вас. Они довольно популярны и их легко получить. И самое главное, все эти шрифты бесплатны!
Я ранжировал шрифты по следующим показателям:
1. Hack
Hack — свободный шрифт, специально разработанный для исходного кода и основанный на проектах Bitstream Vera и DejaVu. 0O и 1lI чётко различимы, а шрифт в целом легко читается. Особенно мне понравился ноль с вертикальной прорезью.
2. DejaVu Sans Mono
3. Monaco
4. Source Code Pro
Source Code Pro разработан компанией Adobe. В целом текст выглядит чётче других шрифтов, не говоря уже о хорошей различимости символов.
5. Menlo
Menlo — новый шрифт по умолчанию в macOS для Xcode и Terminal. Это производная от DejaVu Sans Mono. Лично мне больше нравится Monaco, так как я давно использую OSX, но Menlo тоже хороший выбор для программирования.
Дополнение: Menlo больше не шрифт по умолчанию в macOS. В версии High Sierra шрифт по умолчанию изменили на San Francisco Mono, что тоже отличный выбор для программирования. Спасибо Ивану Кантарино и p13t3rm.
6. Consolas
7. Space Mono
8. FiraCode
Примечание: для активации лигатур в VSCode нужно добавить следующую строку.
9. Anonymous Pro
Мне нравится Anonymous Pro, потому что он даёт ощущение пишущей машинки. Кроме того, здесь символ более узкий, чем в Hack, так что он больше похож на знак.
10. IBM 3270
IBM 3270 основан на шрифте, который использовался в консоли IBM 3270, выпущенной IBM в 1971 году. Этот шрифт отлично подходит для программирования и выполнен в стиле ретро (хотя мне он не совсем привычен).
Обратите внимание, что этот шрифт относительно небольшой, поэтому предлагаю увеличить размер шрифта и уменьшить высоту строки, чтобы сделать его более читаемым на экране.
11. Droid Sans Mono
Droid Sans создан для Android и очень красив. Но самая большая проблема в том, что у него нет нуля с прорезью, поэтому 0 и O не различимы.
Дополнение: Для Droid Sans Mono созданы варианты, где есть ноль с перечёркиванием и точкой. Спасибо hawtre smith.
Спасибо за чтение! Надеюсь, эта статья поможет вам найти новый шрифт для IDE или консоли! Пожалуйста, порекомендуйте эту статью другим, если она вам понравилась!
Я получил отклики о других шрифтах для программирования. Да, все они замечательные, полностью согласен! Основная цель этой статьи — обеспечить начальную базу для тех, у кого мало опыта с разнообразными шрифтами, поэтому постараюсь сохранить минимальный список и не перегружать людей. Но спасибо всем за отзывы. С удовольствием попробую в повседневной работе шрифт, которые вы упомянули.
Нестандартные шрифты: как подключить и оптимизировать
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Выбираем формат шрифта
Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.