Много людей, включая дизайнеров, думают, что typography состоит только из выбора шрифта, выбирая размер шрифта и должна ли она быть регулярными или полужирным шрифтом.Для большинства людей это заканчивается.Но есть гораздо больше для получения хорошей типографики и it’ S в деталях, что дизайнеры часто neglect.

Эти детали дают дизайнеру полный контроль, позволяя им создавать прекрасные и последовательные типографики в дизайне.В то время как эти данные могут быть применены в различных типах носителей, в этой статье we’ Re собираюсь сосредоточиться на том, как применять их на веб-дизайне с использованием CSS.Вот 8 простых способов вы можете использовать CSS, чтобы улучшить свои typography и, следовательно, общее удобство вашей designs.

1.Measure

Мера длины строки типа.Для reader’ глаз с, длинные или короткие линии может быть утомительно и отвлекает.Долго мера нарушает ритм, потому что читатель имеет трудное время найти следующую строку типа.Единственный раз, когда узкая мера приемлема с небольшим количеством текста.Для оптимальной читаемости вы хотите, чтобы меры, чтобы быть между 40-80 символов, включая пробелы. Для одного столбца дизайн 65 символов считается ideal.

Простой способ вычислить мера заключается в использовании Роберт Bringhurst’ с методом, который несколько типов размеров на 30.Таким образом, если тип размер 10px, умножая его на 30 получим меру 300px или около 65 символов в строке.Код будет выглядеть примерно так:

p {
	font-size: 10px;
	max-width: 300px;
}

I’ м при использовании точек потому что это делает математику легче, но это также работает с em’ s.

2.Leading

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

Многие факторы влияют на ведущие: гарнитура, размер, вес, дело, мера, wordspacing, и т.д. Чем больше мера, тем более ведущей необходима.Кроме того, чем больше размер шрифта, тем меньше ведущий не требуется.Хорошим правилом является создание ведущего 2-5pt больше, чем тип size, в зависимости от шрифта.Так что, если вы установите тип в 12pt, 15pt 16pt или ведущие должны хорошо работать на web.

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

body {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}

3.Висячие Quotes

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

Это достигается очень легко с помощью CSS цитату элемент:

blockquote {
	text-indent: -0.8em;
	font-size: 12px;
}

Отрицательный отступ будет варьироваться в зависимости от шрифта, размер шрифта и margins.

4.Вертикальная Rhythm

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

Чтобы сохранить вертикальный ритм в CSS, вы хотите, чтобы расстояние между элементами и линией интервал (ведущий) равным размеру базовый grid.Например, предположим, что you’ повторное использование 15px сетку базовых, а это означает, что есть 15px между каждой линии.Линия интервал будет 15px и расстояние между каждым пунктом также будет 15px.Вот пример:

body {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 15px;
}

p {
	margin-bottom: 15px;
}

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

5.Вдовы и Orphans

widow является короткая строка или одно слово в конце абзаца.Сирот является слово или короткая строка в начале или в конце колонны, которая отделена от остальной части абзаца.Вдовы и сироты создать неловкое тряпки, прервать reader’ с глаз …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров