Типографика

Как это начиналось

Эпоха типографики в печатном деле берёт отсчёт с начала XVI века. Первой книгой с признаками типографского оформления считается «Гипнэротома́хия Полифи́ла» изданная в типографии Альда Мануция в 1499 году. Заголовки, текст, иллюстрации, орнаменты — всё в ней было напечатано, а не нарисовано. Русская книга с типографским оформлением «Апостол», первая из датированных, напечатана Иваном Фёдоровым в 1564 году.

Рисунок 1. Страницы из книг «Гипнэротома́хия Полифи́ла» и «Апостол».

При желании можете поискать отснятые листы этих и других книг с 400-летней историей. Обратите внимание, с каким изяществом выглядят страницы и сегодня. И всё это — типографика.

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

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

Форматирование абзацев

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

Экспериментов у нас будет много, поэтому стоит внести изменения в шаблон. Для этого в рабочей папке откройте файл sample.htm. В конце элемента HEAD добавьте элемент STYLE с атрибутом type=text/css.

Между тегами STYLE в отдельных строках запишите свойства правила CSS для BODY:

  • background-colorwhite — цвет фона ?.
  • font-size130% — размер шрифта ?.
  • colorblack — цвет символов ?.

····STYLE
bodybackground-colorwhitefont-size130%colorblack
Здесь будете дописывать другие правила CSS.
····/STYLE
··/HEAD
...

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

Не забывайте о структурных отступах в коде HTML для блочных элементов и, в частности, для STYLE. Правила CSS в элементе STYLE элементы языка CSS. Поэтому для их записи и оформления структурных отступов имеются отдельные требования.

Выравнивание строк внутри абзаца

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

В папке task_02 создайте копию шаблона из рабочей папки. Переименуйте копию в align.htm а документу в нём смените название с шаблон на Выключка абзацев. Приготовьте экспериментальный полигон и откройте созданный файл в текстовом редакторе и браузере. Подготовьте документ для эксперимента.

  1. Создайте статью (элемент ARTICLE) в элементе BODY.
  2. Добавьте в статью заголовок H1: Выравнивание текста внутри абзацев.
  3. Перейдите на сайт Яндекс.Рефераты. Если вы ещё не знакомы с титульной статьёй, то прочтите её, чтобы не попасть впросак в будущем.

Создайте реферат на любую тему. Скопируйте пару абзацев без заголовка и подзаголовка. Создайте для них два элемента P в статье.

Создайте другой реферат и скопируйте из него ещё три абзаца. Для двух создайте элементы P после статьи. А текст третьего абзаца вставьте в самом конце перед закрывающим тегом BODY просто так, без элемента.

...
··BODY
····ARTICLE
······H1Заголовок сатьи/H1
······P
Текст первого абзаца в статье.
······/P
······P
Текст второго абзаца в статье.
······/P
····/ARTICLE
····P
Текст первого абзаца после статьи.
····/P
····P
Текст второго абзаца после статьи.
····/P
Текст третьего абзаца после статьи.
··/BODY

Теперь пришла пора узнать самую важную особенность CSS. Не так сложно запомнить 20-30 имён свойств (до конца года нам этого хватит), чтобы прочитать о них в справочнике. Но самое важное — уметь составлять селекторы. Они напрямую связаны со структурой кода HTML. С тем как вы её понимаете, как её пишите и как читаете.

Селектор элемента E. Применяется для всех E в любом месте кода ?.

В первом записанном правиле CSS имя элемента body и есть селектор элемента. В описании правила имеются сразу три свойства: размер шрифта, цвет символов и цвет фона. Так как body —  предок всех элементов на странице, то каскадное наследование изменило шрифт у всех элементов.

…по левому краю

Эксперимент с выравниваением строк абзаца по левому краю проведём не со всеми абзацами, а только из статьи. Для оформления абзацев, расположенных в отдельном элементе, применяется правило с контекстным селектором.

Контекстный селектор P E. Правило применяется для всех E в любом месте подструктуры P  ? .

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

Контекстный селектор P E. Правило применяется для всех E потомков P.

Создадим правило с контекстным селектором и добавим в него свойство text-align ?. Английское слово align заставляет браузер прижимать все строки абзаца к левой, правой, к обеим границам абзаца, или размещает их строго по центру между его границами. Как это работает?

Назначим свойству значение left для выравнивания строк по левому краю.

article ptext-alignleft

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

…по правому краю

Допишем ещё одно правило с теми же селектором и свойством. Но у свойства поменяем значение на right — выравнивание по правому краю.

article ptext-alignleft
article ptext-alignright

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

В коде CSS два правила с одинаковыми селекторами и свойствами. Браузер их применил с учётом каскадности: сначала первое, затем второе.

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

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

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

…по центру

У свойства align есть ещё одно значение: center. Раз выравнивание по правому краю не подходит, заменим его, но только во втором правиле для абзацев в статье.

article ptext-alignleft
article ptext-aligncenter

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

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

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

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

Выравнивание по центру не подходит к обычным абзацам основного текста. Изменим селектор второго правила для абзацев в статье. Снова посмотрим, как ведёт себя селектор элемента и переназначим правило заголовку. Замените aticle p на h1.

article ptext-alignleft
h1text-aligncenter

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

…по ширине

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

Создайте правило для всех абзацев в документе и задайте в нём значение свойства выравнивание по ширине.

article ptext-alignleft
h1text-aligncenter
ptext-alignjustify

Новое правило должно было изменить выравнивание во всех абзацах. Однако абзацы в статье ему не подчинились. Для них общее правило было отменено за счёт каскадности.

Для элемента главным считается то правило, селектор которого точнее указывает на его место в структуре.

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

На этом плюсы заканчиваются. Смотреть такой абзац приятно, но читать… Попробуйте изменять ширину окна браузера и наблюдать за поведением слов и, в частности, пробелов между ними в абзацах, выровненных по ширине. Для наглядности выделите мышкой по несколько пробелов в разных строках, удерживая нажатой клавишу Ctrl (эта возможность имеется только у браузеров Firefox).

Вытягивание строки от левой до правой границы осуществляется за счёт изменения ширины пробелов. В каждой строке они разные. При беглом чтении от строки к строке взгляд натыкается то на длинные, то на короткие пробелы. Ритм чтения сбивается и читатель быстро устаёт. Читать большие объёмы текста, выровненного по ширине, не очень комфортно.

…полная выключка

Для полной выключки в CSS есть свойство выравнивания только последней строки: text-align-last. ?

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

Добавьте это свойство в правило для всех абзацев и понаблюдайте за их поведением, изменяя ширину окна браузера.

article ptext-alignleft
h1text-aligncenter
ptext-alignjustifytext-align-lastjustify

Обратите внимание, что свойство выравнивания последней строки применилось и к абзацам в статье.

Подобное выравнивание используется крайне редко и только в профессиональной вёрстке. Но это свойство можно использовать несколько по другому.

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

Вы заметили, что текст самого последнего неразмеченного абзаца не реагирует на все изменения. Дело в том, что последний абзац не размечен тегами P.../P, поэтому правила, написанные для элементов P, к нему не относятся.

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

Последний абзац просто дописан в конец элемента BODY. Чтобы выделить его среди других, например, изменить цвет его текста на зелёный, свойство colorgreen нужно будет записать в правило для BODY. Неразмеченный абзац непременно должен позеленеть.

Самостоятельно проведите эксперимент и убедитесь в том, что любой текстовый абзац должен быть размечен каким-либо элементом HTML абзац с любой ролью: заголовок, цитата, пункт списка, обычный… Это повысит ваши возможности по контролю и управлению внешним видом текста.

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

Давайте исправим свою ошибку и создадим правило только для последнего абзаца. Поместите его в элемент P. А чтобы новое правило применилось только к нему и больше ни к каким другим, добавим ему атрибут id — идентификатор со значением track.

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

В коде не может быть более одного элемента с одинаковым значением идентификатора.

...
····P id=track
Текст последнего абзаца.
····/P
··/BODY

А теперь создадим правило только для этого абзаца. Селектор идентификатора состоит из английского знака номер # и имени идентификатора, записанных без пробела.

Селектор идентификатора #ID_name. Правило применяется только к единственному элементу в коде документа HTML, который имеет атрибут идентификатора со значением «ID_name» ?.

Создайте правило для абзаца с идентификатором id=track. Переместите свойство для выравнивания последней строки из правила для всех абзацев в новое правило и смените его значение на center. А выравнивание строк по ширине абзац получит по наследству за счёт каскадности стилей.

article ptext-alignleft
h1text-aligncenter
ptext-alignjustifytext-align-lastcenter

Неплохое оформление последнего абзаца в статье, в разделе и т. п.

Трекинг

Подведём итог. Пять разных приёмов форматирования. Когда и какой применять? Как бороться с их минусами?

Рис. 1. Выключки а — флаговые по левому и правому краям, б — выключка по центру, в — две выключки по формату обычная (слева) и полная (справа).

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

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

В русском языке средняя длина слова по разным вычислениям от 5 до 7 символов. Но чем длиннее слова, тем меньше их поместится в строке, и длина строк при выключке влево будет разни́ться. А при выключке по формату длина пробелов в разных строках будет существенно отличаться. Это не способствует беглому чтению и затрудняет его.

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

межсловный трекинг

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

Для того чтобы изменять ширину пробела между словами в правило нужно добавить свойство word-spacing ?. Английские слова word и spacing по-русски соответственно: слово и расстояние. В разных шрифтах форма и ширина одних и тех же букв разная. Вместе с ними и разная ширина пробела.

Новое значение пробелу можно задавать в статичных единицах измерения пикселах ("5px", "10px", "15px"), или в динамичных, ориентируясь на ширину прописной буквы "М": 1em = ширине прописной буквы М (".5em", "1em", "1.5em") ?.

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

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

ptext-alignjustifyword-spacing.3em

Поэкспериментируйте, меняя разные значения свойств word-spacing. Для наглядности выделите мышкой несколько пробелов, удерживая нажатой клавишу Ctrl (эта возможность имеется только у браузеров Firefox). Сравните поведение пробелов при изменении значений их ширины в абзацах с разным выравниванием.

Межбуквенный трекинг

Свойство letter-spacing ? — расстояние между буквами. Букв в строке достаточно много, поэтому изменение расстояния между ними даже на малое значение может существенно изменить длину текста в строке. А малое изменение расстояний между буквами редко бывает заметным для непрофессионального взгляда.

ptext-alignjustifyword-spacing.3emletter-spacing.01ex

Если между словами увеличивается ширина существующего пробела, то между буквами промежутка изначально нет. Поэтому для небольшого увеличения ширины строк в абзацах значения свойства letter-spacing нужно применять либо единичные (1-2-3 пиксела) в статичных единицах измерения или сотые, а то и тысячные доли в динамичных. Можно применять даже редко используемую динамичную единицу ex (она равна высоте прописной буквы "X") или проценты. "100%" = "1ex" = "высота (размер) шрифта".

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

Переносы

Переносы в HTML

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

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

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

Эксперимент будем проводить с элементом языка HTML WBR ? — мягкий перенос.

В первом абзаце в слове после каждого слога вставьте WBR. не<WBR>дис<WBR>цип<WBR>ли<WBR>ни<WBR>ро<WBR>ван<WBR>ность

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

Слово разбивается на слоги, но знак переноса не отображается. Элемент WBR можно заменить мнемоникой кода мягкого переноса. Перейдите на страницу списка мнемоник. Нажмите клавишу F3 или аккорд Ctrl + F и в поле ввода поиска начните набирать словосочетание Мягкий перенос. Код символа мягкий перенос: &#173;, но проще запомнить его мнемонику &shy;.

В другом абзаце в слове недисциплинированность после каждого слога вставьте мнемонику мягкого переноса: не&shy;дис&shy;цип&shy;ли&shy;ни&shy;ро&shy;ван&shy;ность.

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

Оба этих приёма поддерживаются всеми браузерами. Но вручную расставлять переносы в каждом слове весьма утомительно. Поэтому можно ограничиться лишь переносами очень длинных и просто длинных слов. А с короткими словами придётся мириться.

Переносы в CSS

Давайте снова потренируемся на двух абзацах. Выберите один абзац в статье, а другой за её пределами, но не тот, который с идентификатором. Чтобы правило применялось к произвольно расположенным элементам их нужно объединить в один класс. Добавим каждому атрибут class=... с одиноаковым значением wrap и оздадим для них отдельное правило с селектором класса.

Селектор класса .class_name. Правило применяется для всех элементов, имеющих атрибут класс со значением «class_name», расположенных в любом месте структуры кода и чтобы назначить им общее оформление ?.

В селекторе класса первым символом записывают точку и без пробела имя класса. В правило добавим свойство CSS hyphens. И снова идём в справочник. В нём всегда можно узнать подробные сведения как об элементах HTML, так и о свойствах CSS.

В таблице справочника (раздел Браузеры) после окончания статьи можно посмотреть, какие браузеры поддерживают выбранное свойство и как это нужно учитывать в записи кода CSS. Свойство hyphens в полном объёме пока поддерживает браузер Firefox.

Браузеры на базе ядра Chromium во главе с гугловским Chrome, понимают только свою версию свойства: -webkit-hyphens. Так же поступают и браузеры Microsoft System: Internet Explorer и Microsoft Edge. Их личное свойство называется -ms-hyphens. Поэтому в правило придётся записывать сразу три свойства. Никогда неизвестно, каким браузером будет пользоваться читатель.

article ptext-alignleft
h1text-aligncenter
ptext-alignjustify
ptracktext-alignjustifytext-aligncenter
pwrap-webkit-hyphensauto-ms-hyphensautohyphensauto

Теперь проверьте в Firefox. Браузер стал переносить слова, которые не помещаются в строке, хотя мы в них не добавляли элементы переноса. Так же ведёт себя и Internet Explorer с версии 11 и Microsoft Edge. А все браузеры семейства Chrome игнорируют свойство, записанное в правило. Дело в том, что они применяют его к абзацам и включают переносы, но пока только в операционных системах Android и Maс.

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

Есть ещё одна особенность применения переносов. В разных языках слова разбивают на слоги по-разному. Чтобы повысить доступность переносов, важно элементу добавлять атрибут lang=... ? с указанием, на каком языке написан текст.

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

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

Псевдоэлементы

Первая строка

В информационной структуре документа мы рассматривали абзац как систему элементов. И основной упор делали на семантические элементы. Речь шла о том, что абзац состоит из: предложений, а те – из словосочетаний, которые, в свою очередь из слов...

Но абзац можно разобрать и на несемантические элементы. Это отдельные символы, и строки. Строк может быть от одной до «сколько угодно». Все они похожи, кроме двух: первой и последней.

В CSS свойство для последней строки имеется. Программе легко выделить её среди остальных. Проверить каждую строку, с первого символа и искать последним символом конец абзаца. Если его нет, то это строка не последняя и переходить к следующей. А если есть, то применить к ней свойство text-align-last.

Для того, чтобы получить доступ к первой строке её решили считать отдельным элементом. Обычным элементом HTML она не является – трудно определить её границы. В зависимости от ширины рабочей области в ней может быть разное количество слов. Поэтому её назначили воображаемым элементом – псевдоэлементом. Элемента, вроде нет, но мы его видим.

Раз первая строка хоть и псевдо-, но элемент, то теперь её можно использовать в качестве селектора! Так как она существует не сама по себе, а только как часть абзаца, поэтому селектор будет выглядеть так: pfirst-line ?.

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

Первый символ

У абзаца есть ещё один псевдоэлемент – первый символ. В старинных рукописных книгах писцы первую строку рассказа или даже несколько строк писали отступив значительное место от левого края. И записывали первое слово со второй буквы. Позже, когда книга уже полностью была написана, художник рисовал пропущенные первые буквы. Красочная буква-рисунок имела даже своё имя собственное – буквица или инициал.

Псевдоэлемент буквицы pfirst-letter ? имеет больше оформительских возможностей. Создайте и с этим селектором правило для первых букв абзацев в статье и добавьте в него пару свойств: floatleft ? и font-size3.5em.

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

К Новогодним праздникам у вас будет контрольная работа – создать веб-страницу: Новогодняя открытка или визитная карточка. А пока набирайтесь опыта и готовьте материал: текст и изображения. Материала для публикации, как правило, должно быть раза в полтора больше. Всегда проще нажать клавишу Delete , чем дописывать недостающее. С изображениями так же. Проще сделать коллаж из нескольких непоместившихся, чем впопыхах искать недостающее.

Итог

Размер шрифта

Вы многое узнали про текст и не забыли для чего все перечисленные изменения и украшательства. Это всё для оптимального восприятие текста читателем. Но пока нет ответа на один из самых главных вопросов: Как выбирать размер шрифта?.

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

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

За 400 лет становления типографики с печатным текстом проводилось огромное количество экспериментов. Удачные, принятые читателями, закреплялись в виде правил и требований. Неудачные – терялись в веках. То же самое происходило и с размером шрифта.

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

В типографике устоялось правило: размер шрифта напрямую зависит от ширины строки и наоборот. В строке должно быть 65 ± 10 символов. Значения этих чисел не предельные, но если вы будете далеко заходить за их рамки, помните – читатель может просто не дочитать текст. И тогда ценность вашего труда будет стремиться к нулю.

Мы ещё вернёмся к абзацам, но уже на другом уровне. Далее мы будем рассматривать их уже не как набор букв или слов, а как оформительские элементы страницы.