Типографирование текста что это

Разбираемся в основах типографики за 10 минут

Креативный директор агентства Agima Григорий Коченов рассказал Нетологии об основах типографики, шрифтовых трендах, ключевых понятиях и правилах комбинирования шрифтов.

Креативный директор агентства Agima

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

Выравнивание текста

Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине.

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

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

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

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

Базовые правила

Типографьте текст перед публикацией. Используйте типограф Лебедева. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире.

Разбивайте текст на абзацы по смыслу. Смотрите, где по смыслу заканчивается одна мысль и начинается другая. Большинство дизайнеров придерживаются позиции: «Когда у нас есть текст, можно половину выкинуть и относиться к нему, как к рыбному тексту». Нет, так делать нельзя.

Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.

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

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

Источник

Рецепты хорошей типографики

Судя по результатам голосования, которое я проводил в своём блоге, большинство пользователей никак не типографируют тексты перед публикациями (НЛО не считается). Те, кто работают над текстами, в большинстве своём делают это вручную, поэтому я решил попробовать собрать воедино рецепты экранной типографики, дабы не забывать самому и напомнить другим. Не думаю, что статья будет новым для опытных верстальщиков. Новички узнают, профи исправят 🙂

Содержание

1. Дефисы, тире, минусы и другие палочки

Дефис (‐) — это символ U+2010 ( &#х2010; в HTML).

Цифровая черта (figure dash, ‒) — служит для разделения цифр в телефонных номерах. По своей сути это не минус, т.к. в номере телефона не производятся математические действия. Это символ U+2012 ( &#х2012; в HTML).

Правильное написание телефонных номеров:

Символ переноса (мягкий дефис, &shу; в HTML) — расставляется в словах между слогами, отображается лишь в том случае, если слово попадает на конец строки. Этим символом рекомендуется разбивать длинные слова, которые могут не поместиться в конце строки, а также составные части химических веществ.

Короткое тире (–, en dash, чёрточка шириной с букву «n», &ndаsh; ) и длинное тире (—, em dash, чёрточка шириной с букву «M», &mdаsh; ) — символы всем известны. Отмечу лишь, что в русской типографике рекомендуется использовать только длинное тире.

2. Кавычки и чёрточки

Кавычка («, U+0022, &#х0022; в HTML) — в Unicode имеет название «QUOTATION MARK». Не является ни кавычкой, ни знаком дюйма, ни знаком угловых секунд. Используется в программировании. Разрешается использовать только в том случае, если нет возможности заменить на другой знак. Соответственно любое употребление в тексте ошибочно.

Апостро́ф (‘, U+0027, &#х0027; в HTML) — на самом деле не является апострофом, в Unicode имеет название «APOSTROPHE», но его употребление в тексте также не рекомендуется. Этот знак не является знаком фута или знаком угловых минут. Используется в программировании.

UPD: Спасибо хабраюзеру Qbit за подробную справку:

>Почему кавычка — не кавычка, а апостроф — не апостроф?

По историческим причинам. Во времена телетайпов кодировки были маленькими, клавиатурные раскладки бедными. Один и тот же символ заменял открывающую английскую двойную кавычку, закрывающую английскую двойную кавычку, дюймы, etc. При переходе к Юникоду обратную совместимость не стали ломать, и клавиша рядом с Enter’ом по прежнему печатает этот «усреднённый» символ. А для правильных знаков введены самостоятельные code points. Популярность старого «искусственного» недосимвола вызвана тем, что он есть на клавиатурной раскладке, а правильных знаков — нет. Поэтому в быту (в аське, в постах, в SMS) используется «программистская кавычка». Но серьёзная типографика должна учитывать различия этих знаков — как разницу в семантике, так и во внешнем виде.

Например, в гарнитуре Times New Roman эти символы имеют совершенно разное начертание:
открывающая английская двойная кавычка: «две-шестёрки-вверху»
закрывающая английская двойная кавычка: «две-девятки-вверху»
дюймы: два наклонных штриха в виде клина (не закорючки)
«программистская кавычка»: два прямых клина, утолщённых сверху.

Французские кавычки («ёлочки», U+00AB и U+00BB, &lаquо; и &rаquо; в HTML) — традиционные кавычки в русской типографике.

Немецкие кавычки („лапки“, U+201E и U+201C, &bdquо; и &ldquо; в HTML) — традиционные вложенные кавычки, или кавычки второго рисунка.

Английские одинарные кавычки (‘ма́рровские’, U+2018 и U+2019, &lsquо; и &rsquо; в HTML) — используются филологами при составлении словарей (как показывает практика, используются не всегда). В обычных текстах не употребляются.

Знак ударения, аку́т (´, U+0301, &асutе; в HTML) — используется только в тех случаях, когда от ударения зависит смысл слова. Также употребляется с любыми словами в букварях. Символ ставится после ударной гласной.

Знаки минуты и секунды, фута и дюйма (′и ″, U+2032 и U+2033, &рrimе; и &Рrimе; в HTML) — употребляются только для обозначений угловых минут и секунд, в русской типографике футы и дюймы рекомендуется обозначать словами.

3. Скобки

4. Многоточие

Есть отличная статья: «Всё ли так просто с многоточием?». Правил и примеров употребления очень много, а в этой статье они достаточно освещены. Самое главное: используйте знак многоточия, а не три точки подряд. Обычная точка практически во всех шрифтах сделана жирнее и больше, чем точки в восклицательном или вопросительном знаке. Поэтому три точки по сравнению с многоточием смотрятся грязно и неряшливо.

5. Заголовки, списки

5.1. Заголовки

Верхний заголовок

Подзаголовок

Верхний заголовок.

Подзаголовок.

Основной текст.

5.2. Списки

Заключение

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

Источник

Статьи. Как и зачем типографировать тексты перед публикацией на сайте

Зачем всё это?

«Коммуницирует всё»©. И тексты вашего сайта — тоже. Ошибки плохо скажутся на продажах, потому как часть посетителей обладает настолько чувствительным восприятием, чтобы сложить плохое впечатление о компании нескольких ошибок в текстах. А как конкуренты будут рады…

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

Поэтому грамотно опубликованные (оттипографированные) тексты — это способ зарабатывать больше.

Позвольте, пожалуйста, рассказать вам, что значит применительно к размещению текста на сайте слово «безукоризненно».

Откройте, пожалуйста, любую [бумажную] книгу. Вы увидите профессионально подготовленный к печати текст.

Кто поможет?

Мы рекомендуем сервис typograf.ru, так как он лучше лебедевского аналога выполняет свою работу. При всём уважении.

Что надо сделать?

В Word или иной программе, где находится текст, добавьте, пожалуйста, по одной пустой строке между всеми абзацами. Или typograf.ru просто поставит знак разрыва строки между нашими абзацами. Нам же нужны полноценные абзацы — они начинаются с открывающего тега абзаца (

Выделяем всё. Копируем в буфер обмена.

Ворд с исходным документом не закрываем — он ещё пригодится.

Вставляем в окно текст. Ниже справа жмём кнопку «Типографировать». Видим в окне наш текст с кучей «лишних» символов. Это нашего текста с разметкой всех мест для обеспечения грамотности публикации.

Копируем его весь из этого окна.

Вставляем полученный код и выходим из режима редактирования кода — для этого ещё раз жмём кнопку «Source». Видим свой текст уже без странных знаков.

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

Заголовки бывают нескольких видов («уровней» на профжаргоне). Чаще всего их 6. Самый важный — первого уровня.

Чаще всего нам хватит заголовков только первого и второго уровней. Иногда может пригодиться ещё и третий.

Название материала разметим как заголовок первого уровня. Для этого выделяем текст и в выпадающем меню выберем «Heading 1».

Если есть подзаголовки и они равнозначны по смыслу — сделаем их заголовками второго уровня («Heading 2»). В Ворде подсмотрим, что было выделено жирным и курсивным шрифтом и, выделив соответствующие слова или фразы, назначим им жирное или курсивное начертание (точно так же, как в Ворде, просто выделив и нажав на соответствующие кнопки — ).

Всё;) Сохраняем текст и чувствуем удовлетворение от того, что наш текст опубликован по всем стандартам.

Поздравляю! Мы сделали мир чуть лучше, грамотно опубликовав свой текст;)

Спасибо и респект всем, кто дочитал до конца! 😉 Такие люди, как вы, делают мир лучше.

Источник

Что такое типографика и какие шрифты использовать на сайте

Как сделать текст более читабельным? Как подбирать шрифтовые пары? Какой шрифт выбрать для бизнеса и не ошибиться? Ответы на эти и другие важные вопросы в руководстве по типографике от Skillbox.

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

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

Что такое типографика

Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.

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

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

Как подбирать шрифты на сайт

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

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

Чтобы решить, какой шрифт выбрать для сайта, нужно знать, какие бывают семейства, что такое начертание и классификация.

Классификация шрифтов

Шрифты отличаются характером, внешним видом, стилем. Какие-то — статические, какие-то передают динамику. Но все эти различия видит опытный человек, а простой пользователь, скорее всего, не заметит.

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

Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.

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

Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.

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

Что такое гарнитура

Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.

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

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

Выбор размеров шрифта

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

Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.

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

Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.

Нормальный текст: 18px

Заголовок 4: 18х1,6 = 27px.

Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:

Заголовок 3: 27х1,6 = 40px.

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

Сочетание шрифтов

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

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

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

Самый простой способ подобрать пару шрифтов — просмотреть несколько, сравнить и проанализировать, какие пары подойдут.

Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.

Где брать шрифты

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

Бесплатные

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

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

Платные

Ищут в специальных магазинах или на сайтах владельцев — студий и дизайнеров.

Больше о типографике и шрифтах

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

Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:

Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Источник

— Это «Типограф»?
— Нет, это «Типограф»!

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

С одной стороны, ему хочется, чтобы сверстанный текст хорошо смотрелся в окне браузера. А для этого нужно вместо знаков дюйма поставить нормальные кавычки («елочки» и „лапки“), поубивать лишние пробелы, в нужных местах поменять дефисы на тире, неразрывным пробелом «привязать» все короткие союзы и предлоги к следующим за ними словам и произвести кучу других операций. С другой стороны, очень не хочется расставлять все эти значки, кавычки и неразрывные пробелы вручную.

Студия Лебедева первой в интернете заявила о важности применения экранной типографики при верстке материалов. С 2000 года тексты всех создаваемых Студией Лебедева сайтов приводятся в порядок при помощи программы «Типограф». С 2002 года программа бесплатно доступна на нашем сайте.

Подробнее о принципах экранной типографики можно прочитать в § 62 «Ководства».

Вам хочется чего-то особенного от «Типографа»? Напишите нам.

Авторы «Типографа»

Артемий Лебедев

всю жизнь мечтал использовать длинные тире на вебе. После нескольких лет мечтаний написал § 62 и заставил всех делать лишнюю работу. Вместе с Александром Петросяном написал версию «Типографа» на AppleScript.

Алексей Смычагин

написал свою программу, собрав все пожелания; прикрутил «Типограф» к вебу

Денис Авраамов

первый в студии поленился расставлять типографику руками и написал автоматический скрипт

Константин Жилин

Константин Томашевич

написал свою программу, которая расставляла типографику в системе администрирования театральных сайтов

Андрей Шитов

написал XML-веб-сервис и примеры его использования на нескольких языках

Владимир Токмаков

собрал большую порцию пожеланий и переписал «Типограф» заново

Сергей Москалев

прислал коллекцию правил обработки текста после сканирования

Источник