3 заметки с тегом

типографика

Повышаем визуальную привлекательность текста

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

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

Читайте также:
Где дизайнеру найти бесплатные шрифты для проектов

Выделяем абзацы

Сплошные простыни текста трудно читать. Они рассеивают внимание читателя и мешают понять смысл написанного. Чтобы такого не случалось, разделите текст на абзацы.

Полотно текста слева читать трудно, справа же он разбит на аккуратные абзацы
  1. Чтобы отделить абзацы один от другого, добавьте между ними дополнительное пространство или втяжку.
  2. Начало абзаца можно выделить абзацным отступом (красной строкой). Но если абзац следует сразу после заголовка, красная строка не нужна.

Выбор выключки (выравнивания строк в абзаце) зависит от предпочтений дизайнера, редакционных стандартов или правил из брендбука заказчика.

О выключке

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

Четыре варианта выключки

Закрываем «коридоры»

Случается, что при вёрстке абзацев, пробелы или дыры в тексте встают друг над другом или по диагонали в двух или нескольких строках. Получаются «коридоры», которые портят вид текста. Избавиться от них можно кропотливой работой с кернингом или переносами.

Здесь ещё и пробелы в тексте конские

Работаем с кернингом и интерлиньяжем

Кернинг — изменение расстояния между парами символов в строке. Работать с кернингом без опыта трудно — все символы даже одного шрифта имеют разную геометрию и ширину, по-разному заполняют пространство.

Изменение расстояния между символами на уровне абзаца или большого массива текста называется трекингом.

Наработать навыки кернинга помогают инструменты вроде KERNTYPE a kerning game

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

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

Интерлиньяж рассчитывается от базовой линии строки, поэтому его значение всегда больше значения выбранного кегля. Межстрочное расстояние в 120–150% размера шрифта считается самым комфортным для чтения.

Удаляем лишние пробелы

По ходу создания и переработки текста автором неминуемо возникают лишние пробелы. Это и двойные пробелы, из-за которых в тексте появляются дыры, и пробелы между словами и следующими за ними знаками препинания.

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

Например, чтобы избавиться от пробела между словом и запятой, в поле «Найти» введите без кавычек « ,», а в поле заменить — «,».

Приводим в порядок кавычки

При вёрстке текстов дизайнер сталкивается с цитатами, прямой речью, названиями разных изданий. Все они заключаются в кавычки.
В типографике встречается несколько видов кавычек, среди них «ёлочки» и „лапки“.
В России стандартом оформления печатного текста считаются кавычки «ёлочки».
Если же требуется оформить цитату внутри цитаты, то используются оба типа кавычек. «Ёлочками» выделяется внешняя цитата, „лапками“ — внутренняя.

Например: «„Как это скучно!“ — воскликнул я невольно» (Лермонтов).

Убираем висячие предлоги и союзы

Одинокие короткие слова — союзы, предлоги, частицы, остающиеся в конце строки, выглядят сиротливо и портят общий вид текста. Кроме того, предлог или союз привязан к следующему за ним слову по смыслу. И если предлог висит в конце строки, читателю приходится невольно запинаться на нём.

Поэтому висячие предлоги всегда переносятся на новую строку.

Разбираемся с дефисами и тире

Хотя дефис и тире графически выглядят, как просто горизонтальные чёрточки, назначение у них разное. Поэтому путать их при оформлении текста нельзя.

Дефис используется для:

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

Дефис не отделяется от слов, с которыми используется. Исключение — случаи, когда в перечислении ко второй части составного слова присоединяются две первые части (например: фото- и видеоматериалы).

В типографике используется два типа тире.

Короткое тире (n-dash). Называется так, потому что его ширина равна ширине буквы N.
Используется только в диапазонах чисел (например: 5–10 классы, в 2007–2018 годах). Пробелами не отбивается.

Длинное тире (m-dash). Названо так, потому что его ширина равна ширине буквы M. Используется для:

  • разделения подлежащего и сказуемого, если они оба — существительные в именительном падеже;
  • замены сказуемого или обоих главных членов предложения в неполных предложениях;
  • обозначения прямой речи.

Длинное тире всегда отбивается пробелами и на новую строку не переносится.

Поправить кавычки, убрать лишние пробелы и заменить дефис на тире быстро помогают онлайн инструменты, например, этот Типограф

Убираем лишние переносы

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

Напомню, слова переносятся по слогам и разделяются дефисами. Дефис остаётся в конце строки.

Переносы полезны при оформлении текста, но злоупотреблять ими не стоит. Используйте 3–4 переноса в тексте одной колонки и не более двух — при вёрстке книжной полосы.

Работаем с разрядкой

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

Однако опасно и лепить буквы друг к другу, чтобы вместить в одну строку как можно больше слов, — страдает удобочитаемость.

Вместе с тем, разрядка в 5–15% не повредит словам набранным капителью (прописными буквами).

Нормальная, слишком узкая и слишком широкая разрядка строчных + два варианта разрядки прописных — обычная и 10%


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

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

30 августа   Графический дизайн   типографика

Где дизайнеру найти бесплатные шрифты для проектов

Поиск новых шрифтов — головная боль каждого дизайнера. Я предпочитаю приобретать шрифты для проектов, но это не всегда возможно и нужно. Случается, что купленный крутой шрифт может не устроить заказчика. В итоге деньги потрачены, а шрифт лежит на диске без дела. Не стоит забывать и о бюджетных ограничениях. Так что, остаётся искать способы получить качественные шрифты бесплатно. И такие способы есть.

Google Fonts

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

Будет полезно:
Лучшие сочетания шрифтов

Магазины шрифтов

Шрифтовые магазины нередко разрешают скачивать отдельные шрифты бесплатно. Я уже рассказывал, как быстро найти бесплатные кириллические шрифты на MyFonts.com.

N.B. Гарнитура — набор из нескольких стилистически единых шрифтов в разных начертаниях.

Несложно найти бесплатные гарнитуры с поддержкой кириллицы на Fonts.com.

Немного бесплатной кириллицы есть в магазине Fontshop. Зайдите в раздел Free fonts, в опциях поиска задайте форматы Open Type и True Type и выберите русский язык. Или воспользуйтесь моими настройками.

Каждую неделю магазин Creative Market выкладывает шесть товаров для бесплатного скачивания. Среди них часто попадаются шрифты. Кириллица встречается крайне редко, нужно отслеживать.

Бесплатные сборники

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

Fontspace
Font Squirrel
Dafont

Сообщества дизайнеров

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

Искать бесплатную кириллицу на Behance
Искать бесплатную кириллицу на Dribbble
Искать бесплатную кириллицу на DeviantArt

Сайты издателей

Шрифтовые издательства, студии и дизайнеры делятся бесплатными гарнитурами и на собственных сайтах.

Кириллица от Fontfabric
Общедоступные кириллические шрифты ПараТайп
«Проект бесплатных шрифтов» Ивана Гладких
Сайт 4th Februaru Сергея Ткаченко
Бесплатные шрифты Михаила Панфилова

P.S. Создатели шрифта разрешают пользоваться им в личных и (или) коммерческих целях. Чтобы избежать проблем с авторскими правами, прочитайте текст лицензии до того, как начнёте использовать шрифт.

24 августа   Графический дизайн   типографика   шрифты

Текст про тексты. Как я готовлю материалы к публикации

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

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

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

Лексический мусор, вроде стоп-слов и воды, удаляю с помощью сервиса Главред. Относиться к нему можно как угодно, но для меня он определенно работает.

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

Итоговую проверку на орфографию доверяю Орфографу — сюда я помещаю текст целиком, а не отдельными фразами.

В финале помещаю исправленный массив текста в Типограф, который удаляет двойные пробелы, меняет дефис на длинное тире и правильно расставляет кавычки.

2017   контент   Контент-маркетинг   текст   типографика