CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Гарнитура шрифта — это типографский термин, объединяющий набор шрифтов, которые отличаются по размеру, начертанию, наличию или отсутствию засечек на концах линий, по соотношению размера высоты прописных и строчных знаков, величине верхних и нижних выносных элементов, плотности, т.е. близких по характеру и отличительным знакам рисунка.
Интерлиньяж (происходит от фр. interligne; дословный перевод: «написанное между строк») — междустрочный пробел, расстояние между базовыми линиями соседних строк.
Засечки – небольшие элементы на концах штрихов букв.
Кегль (от нем. Kegel) — размер высоты буквы, включая нижние и верхние выносные элементы у этой буквы или знака.
Кернинг (англ. kerning) при наборе текста — избирательное изменение интервала между буквами в зависимости от их формы.
Шрифт (нем. Schrift ← schreiben — писать) — графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка. В узком типографском смысле шрифтом называется комплект типографских литер, предназначенных для набора текста
1. Правильный выбор шрифта
Нужно также заметить, что различные гарнитуры шрифтов могут по-разному влиять на настроение читателей. Как правило, шрифты с засечками лучше подходят для печатных материалов. Засечки помогают создать пространство между буквами, а также отделить один знак от другого. Часто, шрифты с засечками дают ощущение личного, они выражают уважение, интеллект и профессионализм. Для веб-страниц лучше подходят шрифты без засечек. Низкое разрешение экранов способствует тому, что засечки будут выглядеть размытыми и, в свою очередь, плохо восприниматься. Шрифты без засечек, как правило, выражают чувства рациональности, стильности, молодости и современности. Например, выбор засечек дает чувство профессионализма и авторитетной информации. Это часто можно увидеть в основных медиа-ресурсах, например New York Times (рисунок 1). В небольших блогах можно использовать шрифт без засечек с большой высотой строки. Это дает пользователям возможность быстро просматривать текст блога.
Рисунок 1. Сайт газеты «The New York Times»
Нужно всегда думать о том, какую информацию вы пытаетесь донести посетителю. Выбирая шрифт, нужно помнить, что счастливые сообщения должны сопровождаться легким, воздушным и мягкими формами шрифтов, в то время как сообщения каких-то более мрачных тем, например, Хэллоуин, лучше было бы сопровождать шрифтами с более жесткими краями.
Типографика, а чаще именно неразборчивая, может очень резать глаза. Существуют, конечно, некоторые исключения, когда можно использовать неразборчивые шрифты, например для акций ночного клуба.
Но все же, если у вас возникло желание использовать, такие шрифты, то от этой идеи лучше отказаться. Если желание все же достаточно велико, то эти шрифты нужно применять умерено. Например, в качестве заголовка (рисунок 2). Но потом основной текст должен быть более разборчивым. Это может помочь создать динамику в вашем сайте. И обязательно нужно помнить, что использование таких шрифтов должно быть достоинством дизайна, а не недостатком.
Одним из способов акцентирования внимания на чем то важном в тексте является выделение ключевых слов среди основного текста. Существуют несколько способов выделения ключевых слов: •Bold (жирный). Самый популярный метод акцентирования внимания. Как правило, жирным текстом выделяют заголовки или важные слова в тексте.
•Italics (наклонный). Курсивный текст плохо выглядит на экранах с маленьким разрешением. Не следует также применять курсив в формах. Однако он замечательно подходит для цитирования фраз или составления списка литературы или периодических изданий.
•Underlining (подчеркнутый). Использование подчеркнутого текста для выделения ключевых слов является плохой идеей. Сетевые правила говорят, что подчеркнутый текст является ссылкой, поэтому не используйте его без основания, если не хотите ввести посетителей в заблуждение.
•Цвет. Использование цвета для выделения также не является хорошей идеей. Акцентирование на тексте при помощи цветных слов было популярным в прошлом веке, в настоящее время профессиональные веб дизайнеры не используют данный метод выделения.
•Большие буквы. Никогда не используйте длинные предложения, написанные заглавными буквами. Это будет расценено как плохими манерами в оформлении страницы, а также понизит читабельность остального текста.
Очень важно для эффективного дизайна — в каких местах нужно размещать текст, и какие его размеры. Никто не хочет напрягать глаза, чтобы прочитать информацию или наблюдать на сайте неимоверно огромные слова. Целью создания хорошего дизайна является нахождение баланса. И первым шагом к этому будет выяснение, какая информация будет более важной.
Как правило, слова, на которые нужно обратить внимание, нужно сделать немного больше. Либо наоборот — незначительные должны быть меньшими. Все зависит от важности. Другими словами, нужно создать иерархию слов.
Что касается размещения шрифта, постарайтесь сделать его сбалансированным. Не нужно разбрасывать части текста по четырем углам. Это может значительно отвлечь пользователей.
Цвет – один из самых легких аспектов. Нужно выбирать цвет, с помощью которого текст будет выделяться из фона и оставаться читаемым.
Вашими помощниками будут контрастные цвета, а также использование эффектов, таких как strokes (обводка) и glows ( свечение). Это поможет сделать сайт более привлекательным и легким для чтения. Нужно выбрать цвет, который заставит людей остановиться и посмотреть, а информацию сделать доминирующей частью дизайна.
3.Расстояния
•Расстояние между строками (Line Spacing)
Критическая деталь при использовании шрифта в сети - установление оптимального промежутка между строками (рисунок 3). Вертикальная дистанция между строками оказывает большое влияние на четкость и стиль отображения текста. Оптимальным расстоянием между строками считается расстояние, не меньшее чем высота символа.
Рисунок 3. Расстояние между строками
При установлении расстояния между строками необходимо не забывать, что слишком большое расстояние также может негативно сказаться на общем восприятии текста
•Расстояние между буквами (Letter Spacing)
Как правило, в основном тексте использования CSS для изменения расстояния между символами (рисунок 4) не является хорошей идеей. Так как при этом, то что отобразит ваша страница при помощи FireFox, необязательно будет иметь тот же вид под Internet Explorer или Safari. Однако использование данного свойства для коротких заголовков в небольших колонках является достаточно эффективным для сохранения баланса страницы.
Рисунок 4. Текст, набранный с использованием различных расстояний между буквами и стороками Необходимо сказать, что при изменении расстояния между буквами в словах так же надо исходить из того, какой тип шрифта выбран.
•Расстояние между словами (Word Spacing)
Данное свойство изменять не рекомендуется, однако CSS предоставляет такую возможность. Необходимо запомнить, что здесь решающее влияние оказывают такие факторы, как тип шрифта, расстояние между символами в слове. Если вы увеличиваете или уменьшаете расстояние между словами, обязательно посмотрите, как будет смотреться ваш текст под различными браузерами.
4.Границы (Margin) и выравнивание (Alignment)
Границы оказывают удивительно большое влияние на общее восприятие страницы. Они помогают удерживать текст на различном расстоянии от смежных элементов, а также от границ браузера. Большие границы создают ощущение свободного пространства, в то время, как небольшие представляют более эстетический вид тексту. Используются два вида выравнивания: по левому и по правому краю. Выравнивание по правому краю используется очень редко и только для специфических целей. Одновременно выравнивание по левому и правому краю называют выравниванием по всей ширине листа (justify). Данное выравнивание является наиболее популярным в печатных изданиях, и используется в веб типографии. Единственной и существенной проблемой такого выравнивания является тот факт, что ни один из браузеров не умеет умело выполнять переносы такого вида текста. При выравнивании по ширине листа браузер увеличивает или уменьшает расстояния между словами в каждой строке, что существенно отражается на эстетическом виде общего текста. Использование выравнивания по ширине листа оправдано в широких колонках. В небольших колонках при незначительном количестве слов в каждой строке происходит достаточно большое искажение текста.
Заключение
Веб- типография добилась значительного прогресса за последние несколько лет. Появились новые виды отображения текста, такие как флэш-текст (замена одного текста на другой через определенный промежуток времени), увеличение текста при наведении на него и многие другие. Постепенно веб- типография начинает обретать свои характерные черты, основанные на специфике верстки статей, размещения их в Интернете, и отображение при помощи веб браузеров.
