23 шрифта для документов на замену Arial и Times New Roman — Дизайн на vc.ru
{«id»:13960,»url»:»\/distributions\/13960\/click?bit=1&hash=5a66902d4ef807c2f12c01d0517253c795e30ffb23e978780172082d6e405c9d»,»title»:»\u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438 \u0432\u0441\u0451 \u0435\u0449\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 qwerty? \u0415\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0435\u0435″,»buttonText»:»\u041a\u0430\u043a\u043e\u0435?»,»imageUuid»:»c04eba06-036a-5455-b12e-57035f11403c»}
Привет, это команда «Логомашины». Рассказываем, что делать, если заблокированные шрифты были вашими фирменными, и все документы заполнялись Times New Roman или Arial.
21 451 просмотров
День для всех, кто каждый день пользуется шрифтами Monotype, начался не радостно: компания закрыла доступ к своей библиотеке для российских пользователей. И если блокировка Times New Roman вызывает только облегчение, то с Arial всё обстоит сложнее — этот шрифт используется в документах сотен компаний.
Мы подобрали 23 шрифта, которые можно использовать вместо Arial, если его удалят даже из уже установленных программ: простые, бесплатные и читабельные.
Если Arial — один из фирменных шрифтов вашей компании, о его замене лучше задуматься уже сейчас. Главное при выборе нового шрифта — не забудьте обратить внимание на то, как выглядят цифры.
Calibri
Candara
Commisioner
Constantia
Franklin Gothic
Georgia
IBM Plex
Inter
Lucida Sans
Manrope
Mulish
Noto Sans
Nunito
Outfit
Poppins
Raleway
Roboto
Rubik
Segoe UI
Ubuntu
Отдельно рекомендуем установить шрифты петербургской шрифтовой студии Paratype: их не заблокируют.
Golos Text
Literata
PT Astra
Вместо вывода делимся тремя универсальными правилами типографики, которые будут полезны и недизайнерам:
- Делайте заголовки в два раза больше основного текста
Так читателю будет проще понять, что в вашей информации важное, а что второстепенное.
- Если хотите сделать текст контрастным — пропустите одно начертание
Лучше сочетать тонкое начертание с полужирным, а регулярное — с жирным.
- Чем важнее текст, тем стандартнее шрифт
Не усложняйте витиеватыми шрифтами то, что несёт ключевой смысл текста.
***
Мы осознаём кризис, с которым все столкнулись, и хотим сделать дизайн доступнее для российских компаний.
В апреле дарим скидку 50 000₽ на все услуги Логомашины первым десяти компаниям, которые обратятся в студию.
Вы можете разработать логотип, фирменный стиль, название или полноценный брендинг для вашего проекта.
Оставьте заявку на сайте — https://logomachine.ru/maysale, вам позвонят наши менеджеры и сделают скидку.
Типографика: что это, основные термины и понятия
В 1984 году исследователи из Microsoft и MIT провели эксперимент и выяснили, что хорошо оформленный текст люди читают охотнее и быстрее. Так работает типографика в дизайне: правильно подобранные шрифт, цвет и контраст «цепляют» внимание и лучше доносят мысль.
- Что такое типографика
- Основные термины типографики
- Характеристики текстов
- Правила классической типографики в дизайне
- Полезные материалы по типографике
Так выглядели две версии текста, которые предложили участникам эксперимента в 1984 году: с «хорошей» (слева) и «плохой» (справа) типографикой
Что такое типографика
Типографика — это всё, что касается оформления текста в дизайне: шрифты, размер, цвет и начертание букв. Главная цель — объединить визуальную и текстовую составляющую в единое целое.
Материал по теме:
Виды шрифтов: как выбрать лучший вариант для дизайна
Основные термины типографики
Уникальный способ начертания букв, цифр и символов: по форме, пропорциям, расстоянию между элементами.
Так выглядит один из самых популярных шрифтов конца 90-х — Times New Roman:
строгий, классический:с засечками и тщательно выверенной симметрией
А это — Comic Sans: неформальный, без засечек и как будто написанный небрежным почерком.
Иногда компании создают свои шрифты, чтобы стать более узнаваемыми и выделить свои продукты на фоне конкурентов. В Яндексе используют собственный шрифт — Yandex Sans.
Так выглядит текст, набранный Yandex Sans
Yandex Sans одинаково хорошо читается на больших мониторах и мобильных устройствах, гармонично выглядит в названиях интерфейсов и текстах статей.
В зависимости от ситуации используют разные начертания и толщину шрифта, например для самых мелких надписей и разных ОС.
Он немного похож на Arial, но имеет свой лаконичный, нейтральный, но узнаваемый стиль, который помогает донести информацию, не отвлекая внимание.
Шрифт Arial
Сам Arial, к слову, был создан в 80-х по заказу компании Microsoft для ОС Windows. Это быстро сделало его одним из самых популярных и узнаваемых шрифтов.
Гарнитура
Группа шрифтов, которые объединены одной стилистикой, например Courier или Georgia.
Шрифт Courier
Шрифт Georgia
Есть две основные группы гарнитур:
- С засечками — например Times (см. выше) или Antiqua. Эти шрифты используют, когда хотят придать тексту более весомый и официальный тон: в книгах, новостных изданиях или объявлениях в общественных местах.
Шрифт Antiqua
- Без засечек — такие как Arial (см. выше) или Calibri. Такие шрифты часто используют на веб-сайтах, в онлайн-сервисах и приложениях: они облегчают восприятие текста на разных носителях, помогают передать практичность и современность.
Шрифт Calibri
Высота букв шрифта, которую измеряют в pt (punkt, точка). 1 pt равен 1/72 дюйма, или 0,352 мм. Самый популярный размер, которым обычно набирают тексты для объявлений и веб-документы, — это 12-й кегль. Такой текст удобно читать с небольшого расстояния. Эта статья как раз написана 12-м кеглем.
Интерлиньяж
Расстояние между строками, которое также измеряется в типографских пунктах. Оптимальный интерлиньяж — это кегль + ⅕. Например, для текста, набранного 12-м кеглем, расстояние между строк обычно выставляют в 16 pt.
Кернинг
Расстояние между буквами. Как правило, оно выставляется автоматически в зависимости от выбранного шрифта. Но иногда при вёрстке кернинг увеличивают, чтобы текст лучше читался, или уменьшают — если этого требует дизайн-макет.
Трекинг
Пробелы между фрагментами текста: словами, строками или абзацами. Их также можно уменьшить или увеличить, если нужно сделать текст плотнее или наоборот.
Рубрикация
Внутреннее деление текста: на главы, части, разделы или смысловые блоки с подзаголовками.
Графема
Это основная единица текста — буква, цифра, знак препинания или математический символ. Её можно безошибочно отличить по уникальной форме независимо от шрифта или начертания. Например, «а» и «б» — это разные графемы, а «а» и «а» — одинаковые.
Это графическое изображение графемы в конкретном шрифте.
Разные глифы для буквы «А» в гарнитуре Zapfino
Прописные и строчные буквы
Строчные — или маленькие — буквы стандартного размера, которыми набирают основную часть текста.Прописные — они же заглавные — это большие буквы, с которых начинают предложения, названия и имена. Их также используют в аббревиатурах.
Иногда прописные и строчные буквы в шрифте выглядят одинаково и отличаются только размером — то есть у них один и тот же глиф. Одно из начертаний в гарнитуре называется капитель.
Так выглядят прописные и строчные буквы, а также капитель.
Леттеринг
Авторское начертание букв и целого текста, которое выглядит как рисунок и образует единую композицию. Его часто используют в иллюстрациях, вывесках, дизайне упаковок, интерьерных постерах. Технически леттеринг объединяет графический рисунок и типографику, а в его основе лежит каллиграфия — искусство красивого письма от руки, при помощи пера, кисти или специальных маркеров.
Пример леттеринга
Полоса
Всё пространство, занятое текстом и изображениями. В случае с книгами и СМИ это вся страница, за исключением полей.
Характеристики текстов
Типографика в графическом дизайне помогает тексту справиться со своей задачей лучше: быть понятней, проще для восприятия и не раздражать. Вот какие характеристики шрифтового оформления текста для этого используют:● Удобочитаемость: насколько легко воспринимается текст, хорошо ли различимы буквы и другие символы, можно ли быстро прочитать текст «по диагонали».
За это отвечают шрифт, кегль, расстояние между буквами и строками, контраст.
● Заметность: насколько хорошо различим текст на фоне страницы, привлекает ли внимание и не теряется ли на фоне других визуальных элементов даже при слабом освещении. В этом также помогут шрифт и контраст, а ещё — размер букв, полужирное начертание, цвет и другие акценты. При этом важно соблюдать пропорции и подбирать цветовые сочетания в соответствии с фоном и другой графикой: фото, рисунками, логотипами. Иногда выделяют не весь текст, а отдельный, самый важный фрагмент.
На сайте Apple все элементы хорошо заметны, при этом в центре внимания — новая модель смартфона
● Выравнивание: расположение текста относительно сторон страницы — по левому или правому краю, по центру или по ширине. В типографике веб-дизайна чаще всего используют выравнивание по левому краю: в большинстве языков текст читают слева направо, поэтому такое выравнивание интуитивно привычно и понятно.
Выравнивание по ширине используют в книгах, информационных постерах, а также в СМИ, где текст разбит на колонки.
Гораздо реже встречается выравнивание по центру или правому краю. Как правило, такое шрифтовое оформление бывает в рекламных баннерах, постерах или на упаковке, где это оправданно с точки зрения композиции и дизайна.
Текст на странице сайта «Бюро Горбунова» размещён в несколько колонок с выравниванием справа. Это упорядочивает разрозненные фрагменты текста и задаёт направление взгляду, позволяя бегло ухватить суть
- Стиль: идея и её визуальное воплощение в типографике. Например, для текста, который посвящён средневековой культуре, можно выбрать готический шрифт с элементами леттеринга для первых букв каждой главы или абзаца.
Сайт МХТ им. А. П. Чехова выполнен в стилистике модерна 1910-х, включая фирменный шрифт и визуальные элементы. Все афиши и другие графические материалы театра оформлены так же
● Контраст: то, за счёт чего текст выделяется на фоне и в сравнении с другой графикой, — например цвет или полужирное начертание.
Правила классической типографики в дизайне
Классическая типографика — это основы, которые помогают определиться с правильным оформлением текста.
Современная типографика во многом опирается именно на них, адаптируя под новые технологии и тренды. Примерно как современная живопись опирается на базовые правила классической.Вот базовые принципы типографики:
● Использовать не более трёх шрифтов. Чем меньше текст, тем меньше шрифтов допустимо, иначе внимание читателя рассеивается и содержание текста может ускользнуть. При этом все шрифты должны быть объединены стилистически, а ещё лучше — быть из одной гарнитуры. Так текст выглядит цельным и гармоничным, а разные фрагменты или продукты объединяются визуально. Это актуально и для веб-ресурсов, и для онлайн-сервисов или приложений — в том числе в рамках одной экосистемы.
Обилие шрифтов, которые не сочетаются между собой, создаёт впечатление визуального мусора
● Придерживаться единой размерной сетки в шрифтовом оформлении. Это касается и кегля, и интерлиньяжа, и кернинга: их в рамках одного текста допустимо варьировать в пределах 1 pt, иначе он будет выглядеть неоднородным и сложным для восприятия.
● Соблюдать оптимальную длину строки. Лучше, если она будет не длиннее 600 pt — иначе будет сложно сфокусироваться и дочитать текст до конца. Слишком короткие строки тоже нежелательны, если только это не список или плакат со слоганами и призывами к действию.
● Разбивать текст на блоки и абзацы. Это нужно по тем же причинам, что и в предыдущем пункте: чтобы удержать внимание читателя, придать тексту логичную структуру и последовательно донести его смысл. Строго говоря, это скорее задача редактора, чем дизайнера или верстальщика. Но иногда текст приходится разбивать на блоки чисто из соображений композиции.
● Выставлять интерлиньяж больше, чем кегль. Расстояние между строками должно быть в полтора раза больше, чем буквы. Например, для 14-го кегля интерлиньяж лучше выставить в 21 pt. Так текст будет выглядеть цельным и собранным, при этом буквы будут достаточно легко читаемы.
● Выбирать шрифт в соответствии с общим дизайном и концепцией. Если это сайт для технологичного продукта или онлайн-сервиса, не стоит набирать текст при помощи Times New Roman или Book Antiqua.
Здесь подойдут лаконичные шрифты без засечек.
● Не злоупотреблять акцентами. Даже если нужно сделать акцент и привлечь особое внимание к тексту, набирать его заглавными буквами или слишком большим кеглем — не лучшая идея: это придаёт излишне эмоциональное звучание, вызывает отторжение и беспокойство.
Сейчас не так просто найти примеры визуально перегруженных сайтов, но ещё в начале двухтысячных многие веб-страницы выглядели примерно так
● Располагать текст равномерно по всей полосе. На странице не должно быть больших пустых пространств или, наоборот, слишком плотно заполненных текстом и графикой. Это вредит композиции, а значит — гармоничному восприятию текста. Чтобы этого добиться, можно менять расстояния и размеры букв и строк.
Полезные материалы по типографике
Ян Чихольд, «Новая типографика».Руководство для современного дизайнера: фундаментальный труд по типографике, который создавался как пособие для оформления печатных текстов, но актуален и для веб-дизайна.
Джеймс Феличи, «Типографика: шрифт, вёрстка, дизайн».
Руководство по типографике в современном графическом и веб-дизайне, которое не ограничивается шрифтами и размерами в тексте.
Роберт Брингхёрст, «Основы стиля в типографике».
Всё о том, как структурировать текст, придавать ему выразительность и гармоничность.
Эмиль Рудер, «Типографика. Руководство по оформлению».
Глубокий анализ того, как устроено оформление текста и каким правилам нужно следовать в первую очередь.
Эрик Шпикерман, «О шрифте».
Для тех, кто хочет изучить особенности разных шрифтов, их применение и сочетания.
Ян Чихольд, «Образцы шрифтов».
Исследование о том, как устроены шрифты, идеальные формы и пропорции букв.
Владимир Ефимов, «Великие шрифты».
Ещё один полезный справочник по типографике, где основное внимание уделяется кириллическим шрифтам.
Основы типографики также можно освоить на курсе Практикума «Графический дизайнер». Он подходит для новичков, которые хотят освоить новую профессию, и тех, кто уже обладает базовыми навыками и хочет развиваться в своей области.
Зарабатывайте с помощью творчества — уметь рисовать не обязательно
Пройдите бесплатную вводную часть курса «Графический дизайнер», чтобы попробовать себя в профессии
Статью подготовили:
Поделиться
Читать также:
Что такое скетчинг
Перейти в статью
Дизайн-мышление: пять шагов, которые помогут создать успешный продукт
Перейти в статью
Типографика — Бренд-гид
EB Garamond + Open Sans
Видимо, мы достигли большой высоты в атмосфере, потому что небо было мертвенно-черным, а звезды перестали мерцать. По той же иллюзии, которая поднимает горизонт моря до уровня зрителя на склоне холма, темное облако под ним расплывалось, и машина, казалось, парила посреди огромной темной сферы, верхняя половина которой была усыпана серебро. Глядя вниз, в темную бездну внизу, я мог видеть красноватый свет, струящийся сквозь трещину в облаках.
Используйте EB Garamond + Open Sans
Поместите этот код в вашего документа или шаблона:
googleapis.com/css?family=EB+Garamond :400,400i,700|Open+Sans:400,400i,700" rel="stylesheet">
Укажите шрифт в CSS:
семейство шрифтов: 'EB Garamond', Georgia, 'Times New Roman', Times , с засечками;
семейство шрифтов: «Open Sans», «Helvetica Neue», «Segoe UI», Helvetica, Arial, без засечек;
Playfair + Roboto
Очевидно, мы достигли большой высоты в атмосфере, потому что небо было мертвенно-черным, а звезды перестали мерцать. По той же иллюзии, которая поднимает горизонт моря до уровня зрителя на склоне холма, темное облако под ним расплывалось, и машина, казалось, парила посреди огромной темной сферы, верхняя половина которой была усыпана серебро. Глядя вниз, в темную бездну внизу, я мог видеть красноватый свет, струящийся сквозь трещину в облаках.
Используйте Playfair + Roboto
Поместите этот код в вашего документа или шаблона:
Укажите шрифт в CSS:
семейство шрифтов: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
семейство шрифтов: «Roboto», «Helvetica Neue», «Segoe UI», Helvetica, Arial, без засечек;
Merriweather + Open Sans
Очевидно, мы достигли большой высоты в атмосфере, потому что небо было мертвенно-черным, а звезды перестали мерцать.
По той же иллюзии, которая поднимает горизонт моря до уровня зрителя на склоне холма, темное облако под ним расплывалось, и машина, казалось, парила посреди огромной темной сферы, верхняя половина которой была усыпана серебро. Глядя вниз, в темную бездну внизу, я мог видеть красноватый свет, струящийся сквозь трещину в облаках.
Используйте Merriweather + Open Sans
Поместите этот код в вашего документа или шаблона:
Укажите шрифт в CSS:
семейство шрифтов: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
семейство шрифтов: «Open Sans», «Helvetica Neue», «Segoe UI», Helvetica, Arial, без засечек;
Open Sans + Georgia
Очевидно, мы достигли большой высоты в атмосфере, потому что небо было мертвенно-черным, а звезды перестали мерцать. По той же иллюзии, которая поднимает горизонт моря до уровня зрителя на склоне холма, темное облако под ним расплывалось, и машина, казалось, парила посреди огромной темной сферы, верхняя половина которой была усыпана серебро.
Глядя вниз, в темную бездну внизу, я мог видеть красноватый свет, струящийся сквозь трещину в облаках.
Используйте Open Sans + Georgia
Поместите этот код в вашего документа или шаблона:
Укажите шрифт в CSS:
семейство шрифтов: 'Open Sans', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
семейство шрифтов: Georgia, Times New Roman, Times, с засечками;
Шрифты — SUNY Cortland
- Дом
- Офисы
- Офис маркетинга
- Руководство по фирменному стилю
- Шрифты/гарнитуры
В университете есть два официальных шрифта, которые можно загрузить для использования в кампусе: Agenda (без засечек) и Utopia (с засечками).
Инструкции по доступу к ним, а также вторичным шрифтам и заменителям приложений, в которых их нет, приведены ниже.
Университетские шрифты должны использоваться на одежде и товарах, заказанных академическими отделами и офисами.
За дополнительной помощью по шрифтам обращайтесь в отдел маркетинга.
Основные шрифты
Agenda
Agenda – это шрифт без засечек, то есть он имеет более простой дизайн без расширяющихся завитушек в конце штрихов каждой буквы.
- Шрифт без засечек идеально подходит для подзаголовков, основного текста и подписей.
- Повестку дня можно загрузить на вкладке «Техническая помощь» в myRedDragon.
Образец :
Utopia
Utopia — это шрифт с засечками, то есть он имеет небольшие декоративные элементы, называемые «засечками». » в конце штрихов каждой буквы.
- Шрифт с засечками идеально подходит для заголовков, подзаголовков или основного текста.
