Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Типографика в веб-дизайне Категория: Веб-дизайн
Название: Типографика в веб-дизайне
Дата добавления: 30-06-2012
Раз просмотрено: 1256
Комментарии: 6
Рейтинг: * * * * * * · · · · (2 голоса)

Типографика в веб-дизайне

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

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

Красная строка или отступ после абзаца?

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

Красная строка и отступы после абзаца

Красная строка

Красная строка — это отступ до первой строки около одного em (если ваш размер шрифта 12px, то это составляет 12 пикселей). Красная строка широко применяется на многих сайтах, однако мало кто знает, что она не нужна у первого параграфа, так как он в любом случае выделяется и повторное выделение излишне.

Отступ после параграфа

Полный разрыв линии в 1 em (например, когда вы дважды нажимаете на клавишу Enter), как правило, более чем достаточно, чтобы отделить новый параграф. Однако, расстояние около 0,8 em будет ближе к идеалу.

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

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

Выравнивание текста слева и по ширине

Выравнивание по левому краю

При выравнивании текста по левому краю, линии ломаются естественно, в результате чего, образуется «рваный» край справа от колонки. Это, как правило, считается более удобным для чтения, потому что глазу легче отделить одну линию от другой, из-за разной длины. Кроме того, исследования показали, что читатели получают лучше воспринимают и запоминают текст, когда он выровнен по левому краю. Переносы не должны использоваться с текстом, который выравнивается по левому краю, потому что это противоречило бы всему смыслу «рванного» правого края.

Избегайте выравнивания по ширине в интернете

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

Но, к сожалению, в CSS нету переносов. Кроме JavaScript библиотек, которые занимаются управлением переносами и CSS3 свойства text-justify, в браузерах нет сложных способов управлением текстурой текстовых блоков. Это делает текст, выровненный по ширине в интернете восприимчивым к большим дырам в тексте.

Отсутствие выравнивания по ширине в веб-страницах, как правило, хорошее явление. При оптимальной длине строки для чтения (от 50 до 80 символов или 8 до 15 слов), задание строкам одной длины, без переносов, и тонкой манипуляции расстоянием между буквами, почти всегда приводит к непривлекательным промежуткам в тексте.

Один пробел после точки. Не два.

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

Один и два пробела после точки

Одного пробела после периода достаточно, чтобы обозначить конец предложения. Те, кто по-прежнему настроены скептически, подумайте над этим: начало нового предложения уже указывает точка, полный пробел и большая буква. Добавление еще одного пробела просто делает отверстие в тексте и прерывает процесс чтения. Наборщики на машинке, возможно, будут продолжать использовать два пробела после точки, но типограф не должен.

Используйте тире правильно

Большинство шрифтов оснащены по крайней мере, двумя тире: коротким тире (–, –, его ширина равна ширине строчной букве «n») и длинным тире (—, —, которое по ширине равно строчной букве «m»). Не путайте их с дефисом (-), который вовсе не является тире, а представляет собой знак препинания.

Дефис и тире

Дефис

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

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

Длинное и короткое тире

Длинное (обычное) тире используется как знак препинания в сложных предложениях. Практика использования двух дефисов вместо тире является пережитком времен пишущих машинок. Короткое тире используется для указания диапазона чисел (например, «7–10 дней»).

Используйте правильные математические символы

Иногда в спешке, мы используем неправильные знаки для математических символов. Например, как мы узнали выше, дефис не является знаком минус (−, −). Кроме того, ни латинская буква «x», ни звездочка (*) не являются верными символами умножения (×, ×).

Правильное деление не только добавляет элегантности типографии, но и является более легким для восприятия. Использование слеша в дроби (например, 1/2) не является таким же привлекательным, как ½ (½).

Правильное использование математических символов

Заключение

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

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

Это интересно: «Фиксированное меню быстрее в использовании».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Захаров Илья  •  2012-07-13 11:33:11
Отличный материал, прочитав обрадовался, что на моем сайте все правильно:)
Светлана  •  2012-10-29 17:18:47
Хорошая статья! Сразу зашла на свой сайт и проверила правильность написания текста! :)
Гость  •  2013-02-01 16:34:08
Говорится о том, что плохо использовать выравнивание по ширине, а на самой странице (этой странице) выравнивание по ширине. Чему верить?
Андрей  •  2013-02-01 16:38:17
Благодаря структуре макета сайта, средний блок с текстом получается широким, и поэтому, в нем можно безбоязненно использовать выравнивание по ширине, так как большие промежутки между словами не появятся.

В этом случае читаемость текста, выравненного по ширине, лучше и общий вид эстетичнее.
Гость  •  2013-05-15 13:01:52
Поэтому было бы правильнее написать "Избегайте выравнивания по ширине на сайтах с узкими блоками". Ибо как общий принцип это не вполне верно. На мой взгляд, когда выравнивание по ширине не используется там, где это возможно, текст выглядит неряшливо.
Артур  •  2013-07-15 01:50:46
Клевая статья! Спасибо!