Комментарии 87
Гельветикаподобные шрифты по прежнему мастхев в дизайне, тот же прекрасный Inter или Golos продолжают традицию. Как дизайнер со стажем более чем 20 лет, до сих пор не могу понять в чем секрет этой формы, почему глазу так приятен этот шрифт. Также интересны шрифты Manrope, Onest. Roboto прекрасен своей универсальностью.
С автором полностью согласен, мало подобрать хороший шрифт, нужно также найти некую золотую середину в кернинге например (межбуквенный интервал). Чем больше размер шрифта в макете - тем меньше кернинг и наоборот. Межстрочный интервал, композиции, размещение на фоне - все это играет важную роль в читабельности.
А шрифты с засечками на мой взгляд тяжело читаются из-за тонких линий, порой проще применить брусковые шрифты - те же засечки только толщенные и обрубленные.
Это мое личное мнение, не претендую на объективность.
Полностью разделяю вашу любовь к Гельветике и её «потомкам»! Inter и Manrope — мои фавориты за баланс нейтральности и харизмы. А про кернинг — золотые слова: иногда пара пикселей разницы превращает хороший макет в идеальный.
Кстати, если вам нравятся брусковые шрифты с засечками, гляньте на IBM Plex Serif (моя недавняя находка): засечки есть, но за счёт плотности они не «теряются».
Стоит иметь в виду, что у Inter такая себе кириллица
https://type.today/ru/journal/neo#Inter
В интере перечисленные проблемы уже исправлены.
Это как так ? У шрифтов есть версии ? ) ни разу на google fonts или других ресурсах по выбору шрифтов не видел выбора версии одного шрифта.
Конечно есть, почему их не должно быть?
https://github.com/rsms/inter/releases
А шрифты с засечками на мой взгляд тяжело читаются из-за тонких линий, порой проще применить брусковые шрифты - те же засечки только толщенные и обрубленные.
Хм. Я люблю SIL Gentium на светлом фоне и Literata на тёмном (у Gentium какая-то ерунда то ли с кернингом, то ли антиалиасингом на тёмном фоне). Это брусковые или засечковые шрифты?
до сих пор не могу понять в чем секрет этой формы, почему глазу так приятен этот шрифт.
Пару лет назад нашёл для себя "идеальный шрифт" — семейство Rubik. Какие-то абсолютно безупречные линии и пропорции.
Тоже долго пытался "разобрать на запчасти" секрет этого шрифта, но всё ещё в процессе.
P.S. На радостях даже перевёл на него всё что можно на компе — начиная с интерфейса Винды и шрифта читалки, заканчивая всеми страницами в браузере.
Картинка в заголовке весит 4МБ. И что такое Headling???
Видимо, мозг в режиме «дизайнера по шрифтам» решил, что «Headling» — это какой-то новый термин между «heading» и «headline». (а вообще это был тест на внимательнось и вы его прошли :) )
А насчёт картинки — да, жирновата, хотелось сохранить чёткость. В следующий раз оптимизирую лучше.
Спасибо, что заметили оба момента — значит, внимательно читаете! 🙌
У меня одного все картинки на хабре в png-формате?
Даже те, которым png противопоказан (из-за чего одна заурядная картинка может весить как в былые времена компактная операционная система с небольшим набором софта и справочной системой))
А вы точно понимаете под "легаси-проблемами" то, что и все остальные?
Под «легаси-проблемами» я имел в виду не только устаревшие технологии, но и устоявшиеся привычки, стандарты и технические ограничения, которые тянутся из прошлого и мешают двигаться вперёд. Например, тот же Arial — он вроде бы нейтральный, но был выбран когда-то просто потому, что «влезал» в лицензионные рамки для Windows.
То есть речь не только про код из 90-х, а про всё наследие: от решений в UI до того, как мы воспринимаем «официальность» текста. Надеюсь, теперь стало яснее
Стало, спасибо. И раз уж вы отвечаете на комментарии, что в целом нехарактерно для корпоративных блогов, задам вопрос по теме статьи.
Задача: подобрать шрифт (или шрифты) для ресурса, посвященного фонетике. Иными словами, все шрифты должны поддерживать IPA Extensions unicode subset. Из доступных, в том числе платных, такие шрифты sans можно по пальцам пересчитать, serif - и того меньше. Times и Arial, как всегда, поддерживают все, что придумало человечество.
Что посоветуете в этой ситуации - готовится к легаси проблемам, разрабатывать свой шрифт, или просто взять Noto и не парится?
Заранее спасибо!
Хорошо, я попробую дать своё мнение, но оно, конечно, субъективно)
Во-первых, Noto — это надёжное «готовое» решение: поддерживает весь IPA-диапазон, регулярно обновляется, отлично отрисовывается и не придётся тратить время на тонкую доводку кернинга и hinting. Для фонетических ресурсов этого более чем достаточно.
Во-вторых, если вам важна узнаваемость, можно взять Noto в качестве основы и слегка его «подправить»: поиграть с letter-spacing, скорректировать x-height или форму «х», чтобы шрифт выглядел живее и лучше вписывался в дизайн. Небольшие правки, не требующие разработки с нуля.
Третий вариант — полностью свой шрифт, оправдан лишь в одном случае: когда у проекта действительно большой бюджет и жёсткие требования к уникальности. Тогда можно разрабатывать начертание с нуля и добавить в него все нужные IPA-символы. Но имейте в виду, что это долгий и дорогой путь.
Вывод таков что, для старта берите Noto и не парьтесь. Если в будущем появится необходимость «оживить» шрифт под бренд, доработайте его на основе open-source-версии.
Мы пришли к такому же выводу. Более того Noto - это в каком-то плане дальнейшее развитие Roboto, да и выглядит он на наш взгляд современнее Inter. Который, кстати, так до сих пор и не поборол некоторые досадные проблемки в отрисовке IPA Extensions.
Можем ли мы тогда сделать вывод, что для большинства "информационных" ресурсов, если не стоит задача сделать уникальный типографический брендинг, штифты Noto/Roboto/Inter будут идеальным универсальным решением?
И что вы скажете по поводу этого решения? Легаси?
body { font-family: -apple-system,BlinkMacSystemFont,Arial,sans-serif; }
Но Noto сделан из Open Sans, который был сделан из Droid Sans
Да, именно так. Для большинства инфо-проектов без потребности в уникальном брендинге Noto, Roboto и Inter — идеальный универсальный выбор: IPA, оптимизация под экраны и variable-font, быстрая загрузка и кроссплатформ. Это не «легаси», а industry standard.
Почему-то (конечно же, чисто случайно) TNR и Helvetica в статье представлены в ЧБ варианте, а Comic Sans - в цветном, причем не просто в цветном, а со случайно раскрашенными буквамт. Раскрасьте так же TNR или Helvetica - и их будет так же сложно читать.
Типичная манипуляция.
Как-то в Ворде искал что-то легко читаемое, но похожее на рукописный шрифт. При доброй сотне месных шрифтов подошёл только Комик. Остальное или типичные печатные буквы, или тяжело читаемое. А в Комике как раз отличный баланс читаемости и рукописности.
Конечно его не надо использовать везде, но из условно стандартных он бывает незаменим.
Итак, давайте сделаем резюме. Какой гарнитурой всё-таки следует верстать книги?
Раньше был выбор между Литературной и Обыкновенной новой. А как оно теперь?
Спасибо!
Я бы сказал, что для печати с засечками, для монитора без. А остальное дело болталогии вкуса. Да и даже засечки субъективны.
Какой засечной гарнитурой следует теперь верстать книги?
Той, на которую у вас есть права/средства ☺.
Существует несколько гарнитур, которые можно свободно использовать. Среди них Академическая, Елизаветинская, Журнальная, Лазурского, Латинская, Литературная, Обыкновенная новая, Школьная и многие другие.
Они свободно доступны как абстрактные картинки. Но их воплощения в виде конкретных шрифтовых файлов в основном очень даже платные.
Я назвал вам те гарнитуры, которые поставляются по свободной лицензии и могут быть подключены к LaTeX.
Вы подчеркнули, что коммерческие фирмы создали такие шрифты и запретили их использовать. Это правда. Однако вы забыли, что некоммерческие фирмы тоже создали такие шрифты — и разрешили использовать их так, как вы сами пожелаете.
Есть Обыкновенная старая — абсолютно свободная вещь. И просто самое то для учебников.
Мой фаворит DejaVu: нравится шрифт с засечками, раньше не любил, считал их старомодными и скучными. А теперь проникся, для печатного текста прям кайф.
Ещё когда «Компьютерра» была журналом, там кто-то высказался, что текст шрифтом с засечками прочитают быстро, но «по диагонали», а без засечек - медленно, но внимательно. Насколько соответствует действительности, неизвестно. У них шрифты были без засечек.
Насколько знаю, засечки созданы, чтобы физические чернила лучше пропечатывали края букв. Это актуально и для печатных машинок и для принтеров. Но для букв, состоящих из пикселей на экране, это не актуально. Для хороших фотопринтеров и больших шрифтов на плакатах тоже неактуально.
На Траянской колонне шрифт с засечками. Ни принтеров, ни печатных машинок, ни даже наборного шрифта тогда еще не существовало.
На самом деле актуально и для экранов, и для хороших принтеров. Чёрные буквы на белом фоне визуально немного сужаются. А белые буквы на чёрном фоне, наоборот, визуально расширяются. Соединения линий под острым углом визуально утолщаются, а острые кончики в зависимости от размера кегля имеют разную визуальную остроту.
Засечки это как рельсы для взгляда, их цель — делать строку. Вы спутали с ловушками для краски :)
Посмотрел оригинал про Кики и Бубу, там они в обратном порядке звучат в вопросе, если кого смутило тоже, могло ли это повлиять на результат
IBM используют строгий, рубленый шрифт в логотипе, основанный на классических гротесках (плюс их фирменные горизонтальные полосы). Это передает ассоциации с надежностью, серьезностью и технологичностью.
Ещё один пример, что мы все разные: для меня это ощущение регресса и отсталости
У них наверняка не всегда был такой логотип. А только после распространения терминалов. Где фокусировка острее, чем на телевизоре, и отдельные строки слишком заметны. Тогда это казалось суперсовременным, теперь - действительно ассоциируется больше с периодом до GUI. У компании НИКС тоже по этому принципу сделан логотип.
Разве Arial это не "клон" Гельветики, созданный что-бы не сталкиваться с какими-то правовыми ограничениями?
А что насчет читабельность "пиксельных" шрифтов? Они достаточно просты, без засечек, но встречал людей у которых идет кровь из глаз при их виде, а у кому-то норм.
И что еще насчет читабельности разных шрифтов, исходя из темной/светлой темы холста?
Я человек простой, если я могу прочитать "0ОоoOIl1" этот текст, значит шрифт хороший. Нет значит плохой.
А дизайнеру который решил использовать Roboto для показа генерируемых паролей, хочется выразить особую благодарность
Что за разрыв в букве S?
input condensed в браузере , по моим личным впечатлениям, нравится больше других
Times New Roman или Georgia... правда, такие шрифты не могут терпеть студенты
Странное и голословное утверждение.
Да Times всех бесит, т.к. ассоциируется с ужасными документами, паршивой вёрсткой и бюрократией, властью бесчисленных кабинетов.
Зато идеален как привычный шрифт для документов.
В свою очередь, в разных ОС и в разных тетрадях стовых редакторах (и даже в разных версиях одного офисного пакета) из коробки разные шрифты для стиля по умолчанию - и вот там порой возникает много вопросов, о чем думают авторы офисного пакета. Т.е. пакет осилили сделать, а документы, сдвоенные в нём, рвут глаза так, словно они пытались выиграть конкурс "садист года".
Ещё, конечно, в ту же номинацию конкурса нужно добавлять авторов документов, когда документ хорошо смотрится на, например, маке, но отвратно на Винде(или в парах линукс-винда, что сейчас актуальнее) Понимаю, что не барское дело свои документы проверять, но выглядит мерзко.
Раз мне пришлось иметь дело с коммерческим предложением от Студии Лебедева. Там мало что текст был написан в стиле "мы крутые, клиент по дефолту недостоин нас", так еще и на маке все было красиво (гарнитура взята не из массовых), а на Винде - прямо ужасно. Как они ожидали, что клиент (в России все же винда почти везде, как ни крути) решит с таким подходом закопать в заказ примерно 10х денег от цены той же работы по рынку - я так и не понял.
Зато идеален как привычный шрифт для документов.
Мысль не понял. Шрифт сам по себе, если отвлечься от истории и ассоциаций, технически превосходный. Великолепный шрифт.
Но, понимаете, нельзя жить в обществе и быть свободным от него. Этот дорогой и качественный шрифт используется в дешёвках, вот и ассоциации соответствующие. Такое много с чем случается, возьмите, скажем, гранёный стакан.
так еще и на маке все было красиво (гарнитура взята не из массовых), а на Винде - прямо ужасно.
Ну это недостаточная квалификация. Или нет?
Дизайнеров, делавших графики скорости чтения, я бы выгнал. Неужели сложно было написать названия шрифтов этими самыми шрифтами?
Да простят меня дизайнеры и типографы, но я люблю Comic Sans, поскольку использовал его в своём детстве. И сейчас, когда изредка встречаю этот шрифт, то на лице всплывает улыбка и окутывают тёплые воспоминания.
Легаси ещё и не такое бывает..)
SPJ (главный всея хаскеля) активно использует его в своих официальных презентациях. Как-то его даже спросили, почему:
This is a very funny question, why I use Comic Sans. So. All my talks use Comic Sans, and I frequently see little remarks, “Simon Peyton Jones, great talk about Haskell, but why did he use Comic Sans?” But nobody’s ever been able to tell me what’s wrong with it. I think it’s a nice, legible font, I like it. So until someone explains to me — I understand that it’s meant to be naff, but I don't care about naff stuff, it’s meant to be able to read it. So if you’ve got some rational reasons why I should not, then I’ll listen to them. But just being unfashionable, I don’t care.
Пример
Давно интуитивно сие понимал (что перечень кастомно установленных моноширинных шрифтов и демонстрирует)…
Спасибо! Я и не знал, что в букве S должен быть разрыв!
Программистов, я так понимаю, тута нет)
Мне теперь после статьи интересно узнать свой самый эффективный шрифт. Чтобы поставить его везде, особенно в читалке для книг. Но как это лучше всего узнать?
Хороший вопрос — и он, кстати, ближе к UX-эксперименту, чем к классическому «тесту на шрифт». Попробуйте — не просто читать, а перечитывать. Возьмите пару любимых отрывков из книг и перечитайте их через пару дней в разных шрифтах. Тот, что не ощущается «новым», не вызывает раздражения, не притягивает внимание к формам — скорее всего, ваш. Лично мой фаворит это Kazimir.
в разработке под ios ненавижу шрифт SF - их несколько вариаций, и кто-то додумался сделать системным шрифтом одну, а дизайнерам раздать другую. Отличаются только межсимвольным интервалом
Наоборот все правильно сделали - вот с чем чем, а со шрифтами Apple всегда умели работать (еще сам Джобс отслеживал это). Я в своё время намучался с CoreText, но результат до сих пор радует глаз.
что именно правильно сделали? В дизайне все тексты умещаются, а программисту или не влазит и расползается, или выкачивай вручную ту вариацию SF и добавляй кастомным шрифтом, потому что та вариация даже в систему не установлена по умолчанию.
Ну вообще, если текст влезает настолько впритирку, что несколько лишних пикселей ломают макет, то это брак дизайнера. Всегда должен быть запас.
А по существу нужно учитывать два момента:
1. SF есть в двух вариациях - Display и Text. Первая предназначена для текстов от 20pt и крупнее. Вторая для текстов мельче 20pt. Если в макетах они как-то препутаны (довольно частое явление), то это косяк дизайнера. В приложении ось должна переключать их автоматически.
2. По яблочным гайдлайнам предполагается настраивать трекинг в зависимости от кегля:
https://developer.apple.com/design/human-interface-guidelines/typography#Tracking-values
В макетах на это частенько забивают, потому что за каждой подписью не уследишь.
Просто должен быть небольшой запас места, который позволяет не думать о плюс-минус нескольких пикселях.
Интересно, а какое мнение будет о шрифтах для электронных книг? С одной стороны, это не бумажная печатная продукция, с другой стороны, это и не элементы интерфейса. И восприятие текста на электронных чернилах отличается от восприятия его на экранах других электронных устройств.
Огромное спасибо за статью и все комментарии, узнал для себя много новых шрифтов.
Прошелся контрольным текстом "IllnessO01" по системным шрифтам Windows 10 и нескольким из комментариев. Из шрифтов без засечек без проблем разделяются I (i) в верхнем регистре и l (L) в нижнем регистре лишь у нескольких шрифтов
семейство Bachnshrift
GOST (сюрприз, не знаю откуда он у меня взялся)
Trebuchet MS
Собственно, всё... У всех остальных одинаковая вертикальная палка.
Из комментариев нашлось много красивых шрифтов, попробовал Inter, Manrope, Onest, Roboto, Golos Text. Из них только Golos прошел визуальную проверку.
Ни в одном из шрифтов не обнаружил перечёркнутый 0. (поправка - Consoals с небольшими засечками)
PS: в винде 10, оказывается, отрубили возможность менять шрифт иконок на десктопе. Вот это поворот... Что-то там со стартовым меню были проблемы, поэтому только ампутация (сарказм).
Перечеркнутый ноль и I с засечками во многих шрифтах есть в виде альтернатив. То есть они отключены по дефолту, но их можно включить соответствующей опцией в графредакторе или CSS.
Из перечисленных точно знаю, что в Интере это (и многое другое) есть, остальные надо смотреть.
в винде 10, оказывается, отрубили возможность менять шрифт иконок на десктопе
С помощью .reg файла можно заменить системный шрифт Segoe UI на любой другой
Интересно. Очень долго подбирал шрифт для обложки книг. Думал, изучал литературу, опрашивал нейросети, дизайнеров. Вот надо было эту статью почитать, делов-то))))
Любители Самсунга не согласны с тем, что Комикс санс плохой шрифт ))
За всю немалую читательскую жизнь только один раз встретил шрифт, который действительно заставил затормозить. Уже не помню название, какой-то детектив автора из соцстраны, кажется, болгарина. Шрифт там был настолько уродливый, непривычный, что нормально читать стал только с третьей-четвёртой страницы.
В целом - по барабану. Большие тексты читаются по диагонали или вообще страницами, маленькие - экранами, если шрифт не рукописно-выпендрёжный, то разница непринципиальна.
самый главный вопрос - как найти самый подходящий шрифт для меня?
Почему одни шрифты читаются быстрее других и почему Comic Sans ненавидят