1. Не используйте причудливые шрифты
Если у вас недостаточно опыта и знаний, даже не пытайтесь использовать необычные, затейливые шрифты. Будьте проще.
2. Забудьте о Comic Sans
Представьте, что вы его вообще никогда не видели.
3. Не избегайте стандартных, дефолтных шрифтов
Серьёзно, если кто-то вам говорит, что стандартные шрифты - это скучно, он просто не разбирается в типографике. То, как будет выглядеть шрифт, зависит от того, как он будет набран. Times New Roman может выглядеть по-настоящему здорово. И главное: пусть лучше текст будет скучным, чем уродливым или нечитабельным.
OmegaTransFer / DepositphotosСмешиваем шрифты
4. Не используйте одновременно больше двух шрифтов
Экспериментировать с большим количеством шрифтов на начальном этапе не стоит. Двух вполне достаточно. Вы же не хотите превратить текст в разномастную ерунду, не так ли?
5. Смешивайте только контрастные шрифты
Гротеск со шрифтом с засечками, рукописный с модерном. Важно сохранить контраст. Два схожих шрифта рядом выглядят неряшливо.
6. Выбирайте шрифты с одинаковой высотой букв
Высота строчных букв без выносных элементов - это расстояние от базовой до верхней линии шрифта, иначе говоря - величина очка строчных. Выбирая шрифты, которые вы хотите использовать при оформлении совместно, нужно следить, чтобы высота их строчных букв была одинакова. Это поможет выдержать одинаковый уровень насыщенности абзаца. Кроме того, такой текст будет легче читаться.
Набираем текст
7. Размер шрифта
Размер текста в вебе не должен быть меньше 13 пикселей. На мой взгляд, лучший выбор - в пределах 14–18 px. Не слишком большой и в то же время удобочитаемый.
8. Выбирайте правильную длину строки
Не верьте разговорам, что правильную длину строки можно получить, умножив размер шрифта на два. Это ерунда. Просто постарайтесь удерживать длину строки в пределах 45–75 символов. ГОСТ для печатных изданий рекомендует длину в 60 символов, но это, конечно, труднодостижимый идеал в условиях веба. И всё же к нему стоит стремиться. Определяйте на глаз, не является ли строка слишком длинной или слишком короткой.
9. Интерлиньяж должен соответствовать размеру шрифта
Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Есть ещё один способ попроще: устанавливаем интерлиньяж, равный 125% размера шрифта.
Абзац
10. Выравнивайте по левой стороне
Если вы не уверены, какую выключку выбрать, выбирайте выключку влево: варианты «Вправо» и «По ширине» в вебе редко себя оправдывают. В неровном крае нет ничего плохого. Выключенный влево текст легче читать, так как глаз видит чёткое визуальное окончание каждой строки. Но по-русски такой текст удобно читать, если строка не слишком длинная. Поэтому, если ваша строка больше 60 символов, попробуйте расключенный набор. Только не забудьте расставить переносы и проверьте, всё ли выглядит хорошо: несколько переносов подряд определённо затруднят чтение.
11. Избегайте большого числа переносов
Вообще, переносов в вебе по возможности следует избегать. Попробуйте перенести слово на новую строку или чуть-чуть измените межбуквенное расстояние. Если знаков переноса слишком много, поменяйте размер шрифта или величину пробелов. А при выключке влево вообще не используйте перенос слов.
12. Без отступа
Не отделяйте отступом первый абзац от заголовка. Если вы отбиваете абзацы пустой строкой, не используйте абзацные отступы. Это избыточно и безвкусно. С другой стороны, текст вообще без отступов и отбивок будет сложнее восприниматься. В общем, выберите один из способов: или красную строку, или отбивку - и используйте его на протяжении всего текста.
13. Узкая колонка
Если вам нужно набрать небольшую колонку текста, попробуйте использовать узкий шрифт. Так текст будет не только смотреться лучше, но и легче читаться, так как в строку поместится больше символов.
14. Висячая пунктуация
За линию набора стоит выносить кавычки, скобки, дефисы, точки, запятые. Это всегда выглядит элегантно и помогает сохранить нужную форму абзаца.
15. «Вдовы» и «сироты»
Речь идёт о висячих строках. «Вдова» - это одно слово на целой строке в конце абзаца или очень короткая строка в конце текста или страницы. «Сирота» - это висячая строка, которая попадает на начало новой страницы или колонки. Их нужно избегать. Попробуйте уменьшить межбуквенное расстояние, перенести строку или отрегулируйте размер шрифта - в общем, не давайте «вдовам» и «сиротам» пробраться в свой текст.
16. Не злоупотребляйте пробелами
Чтобы начать новую строку, нажимайте Shift+Enter. Для начала нового абзаца нажмите Enter. Вот так всё просто.
Слова
17. Кернинг
Если вы неопытный дизайнер и у вас не намётан глаз на мельчайшие детали, не керните текст вручную.
18. Трекинг
Запомните: когда вы увеличиваете размер шрифта, расстояние между символами тоже увеличивается. Поэтому, если вы устанавливаете в тексте крупный заголовок, советуем пропорционально скорректировать расстояние между символами и словами.
19. Выделения в тексте
Выделить важную мысль или слово, на которое нужно обратить внимание, можно самыми разными способами. Не переусердствуйте с ними. Не стоит выделять целое предложение одними прописными - новичок не всегда может сделать это к месту. Просто используйте полужирное начертание шрифта.
20. Строчные без разрядки
Не стоит увеличивать расстояние между строчными. Причина проста: снижается удобочитаемость.
21. Прописные с разрядкой
Увеличивайте расстояние между прописными. В этом случае читабельность возрастает. Обычно хорошо работает увеличение межбуквенного пространства на 10%.
22. Не пишите всё заглавными
Не злоупотребляйте набором заглавными. Длина такого набора не должна превышать одну строку.
23. Не используйте капитель без надобности
Если в шрифт не включено специальное капительное начертание, не используйте его вообще.
Буквы
24. Не изменяйте ширину букв
Просто не делайте это. Пожалуйста.
Одна из самых часто встречающихся бед дизайна - это проблема с .
В этой статье мы расскажем о нескольких принципах правильной типографике и посоветуем, как вам избежать многих распространенных ошибок.
Статья не является книгой по типографике или искусству книгопечатания, это больше похоже на «быстрые советы по улучшению шрифтовой основы дизайна».
Правило 1. Чем меньше шрифтов, тем лучше
Одна из самых больших ошибок, которые делают дизайнеры, заключается в использовании слишком большого количества шрифтов и/или их стилей. Постарайтесь снизить их до двух или трех. То есть, основной текст должен быть одного шрифта и размера.
Выберите один для заголовков и придерживайтесь его, может быть, на крайний случай, еще один для подзаголовков. Не бойтесь, если шрифты будут оченьразличаться между собой. При использовании двух очень похожих шрифтов в дизайне, читатель может подумать, что вы просто сделали ошибку и случайно выбрали не тот шрифт при наборе.
Позаботьтесь о единстве цвета, плотности и т.д. или ваш текст будет выглядеть, как будто пьяные мухи разбежались по всей странице.
Правило 2. Следите за разрядкой
Будьте осторожны, чтобы не слишком скучковывать буквы. Если у вас возникли проблемы с нехваткой места для текста, то лучше уменьшите шрифт. Да это, возможно, добавит пространства между абзацами, но в этом нет ничего страшного, это даст некоторую передышку при чтении.
Правило 3. Правильное выравнивание
Пожалуйста, не выравнивайте все по центру (если это не специальный дизайнерский ход). Подумайте об использовании сетки. Ведь на странице все взаимосвязано. Используйте направляющие и размещайте согласно им объекты. Не раскидывайте объекты по углам страницы так как будто вы не смогли решить, где их разместить.
Правило 4. Поменьше декоративных шрифтов
У вас есть красивые декоративные шрифты? Замечательно! Но это совсем не означает, что необходимо использовать их для текста абзацев. За декоративными шрифтами, чаще всего стоит, история или они применяются в конкретном случае, например, для заголовка или названия. Часто, чем проще, тем лучше, поэтому такие шрифты как Helvetica так популярны.
Правило 5. Размер имеет значение
Это о размере букв текста;). Заголовки хороши, когда набраны жирным и большим шрифтом, но если вы будете использовать и в основном тексте слишком большие буквы, это удешевит его. Подумай об этом. Вы идете в хороший ресторан и часто бывает, что меню написано мелким шрифтом, это выглядит классно. (Только убедитесь, что шрифт не так мал, чтобы было трудно прочитать). Не бойтесь делать заголовки гораздо больше, чем основной текст.
Правило 6. Следите за читабельностью
Все что вы делаете, делается для того, чтобы это можно было прочесть. Темный текст на темном фоне – это не очень хорошая идея. Еще хуже, помещать мелкий текст над высококонтрастным фото. Помните, что надо избегать размещения текста над чем-либо.
Правило 7. Правильно подбирайте цвета
Какой цвет лучше всего подходит для шрифта? Как правило, верите вы в это или нет, черное или белое часто лучше всего. Если вы используете цвет отличный от разных оттенков серого, снижайте насыщенность. Ярко окрашенный шрифт может быть труден для чтения. Остерегайтесь сложных вибрирующих сочетаний, таких как красный на зеленом.
Правило 8. Подходящая группировка
Связанные части информации лучше объединять вместе. Это позволит сделать дизайн яснее. Например: посмотрите на постер фильма, все данные сгруппированы в привлекательные блоки. Они теперь могут рассматриваться как отдельный элемент дизайна. Примеры плохой группировки – откройте желтые страницы.
Правило 9. Достаточный интерлиньяж
Это расстояние между строками текста. Очень важно правильно подобрать этот интервал. Гораздо более приятно читать, когда есть место для отдыха глаз между строками. Как правило, стараются использовать интерлиньяж, по крайней мере, на 2 пункта больше, чем размер шрифта. Например: для максимального удобства чтения при 10pt для шрифта должны задать хотя бы 12pt.
Правило 10. Следите за кернингом
Кернинг – интервал между отдельными символами слова. Тут важно иметь опыт в определении плохого кернинга, так как часто программы, например, такие как Фотошоп, ошибаются в его расстановке. Это надо будет отрегулировать вручную, но главное не перестараться. Если вам не нравится межсимвольное расстояние, но вы не знаете, как это улучшить, выберите другой шрифт.
Попробуйте применять эти правила, когда работаете со шрифтом. Хорошо продуманные шрифтовые блоки должны хорошо выглядеть и без каких-либо изображений. В лучшем случае, ваша шрифтовая работа укрепляет положительное впечатление от дизайна. Она должна быть привлекательной и легкой для чтения
Типографика - это умение, искусство сделать текст не только красивым, но и удобным для чтения. Важно, чтобы в начертании букв отражался характер издания или определенный информационный посыл. Типографика - это умение принести визуальную гармонию в печатный текст или страницу сайта. Она не ограничивается лишь выбором шрифта контента, и выравнивания. Типографика - это искусство выразить смысл написанного не только через слова, но и через их отображение. Это очень интересная, глубокая и сложная дисциплина. В этой статье мы расскажем именно о ней.
Что такое типографика?
Чтобы или сайт, дизайнер использует текст, фотографии и графику, которые сделаны другими. Подобное разделение труда позволяет добиться наилучшего возможного результата за счет того, что работа ведется с материалами высокого качества. Дизайнер - это не фотограф и не автор текстов. Кроме того, ему даже не обязательно разбираться в компьютерной или HTML-верстке.
Универсальные специалисты - они существуют?
Совсем другой разговор, что во время полной компьютеризации заниматься даже непосредственно дизайном без знания такого инструмента, как компьютер, просто немыслимо, особенно учитывая, что и сайт, и печатная продукция изначально создаются с помощью программ.
Если вы хотите с помощью компьютера создать что-то, вам необходимо знание того, как это «что-то» можно создать. Кроме того, современное компьютерное обеспечение с каждым днем совершенствуется и предоставляет все более и более широкий спектр возможностей. И если вы не знакомы с этим спектром, то и проектировать на высоком уровне у вас вряд ли получится, так как не будет возможности создать продукт, способный конкурировать с лучшими образцами.
Разумеется, уровень владения компьютерными программами у графического дизайнера будет значительно превышать уровень обыкновенного пользователя. Графический дизайнер - это прежде всего художник. Однако между художником и «компьютерщиком» связь более чем ощутима: например, основы стиля в типографике и дизайнерские решения, которые создаются с помощью определенного программного обеспечения.
С кем работают графические дизайнеры?
Чтобы создать полноценный сайт, графическому дизайнеру необходимо сотрудничать как минимум с программистом. Особенно в том случае, если создается многоуровневый ресурс, который будет содержать множество интерактивных функций. Однако небольшой среднестатистический сайт способен сдать и один дизайнер, не нуждаясь в помощи web-мастера или программиста.
В жизни почти не встречается идеальная цепочка, состоящая из креативщика, дизайнера и верстальщика. Зачастую все эти три функции выполняет один-единственный человек, который имеет высшее художественное образование, знает большинство необходимых графических программ, дока в Интернете и компьютере, а также выдает оригинальные идеи, не затрачивая много сил. Кроме того, такой универсальный человек будет представлять себе оформление будущего журнала, все средства управления новой, еще не созданной страницы сайта, и какая именно реклама будет там располагаться.
Где готовят графических дизайнеров?
В профессии графического и web-дизайнера, как ни в какой другой, крайне важно даже не желание, а постоянное стремление воплощать свои идеи в жизнь - и это можно сказать с уверенностью.
В этой профессии многие знания добываются путем постоянной практики на рабочем месте. Необходимо нарисовать именно такую кнопку на страницу сайта - расшибусь, но сделаю. Возможно, именно поэтому графические дизайнеры зачастую достаточно быстро перестают учиться в классическом понимании этого слова, то есть ежедневно посещать институт или колледж. Их обучение происходит всю оставшуюся жизнь на рабочем месте, при решении повседневных задач.
Считается, что можно стать графическим дизайнером и вовсе не обучаясь в высшем или среднеспециальном учебном заведении. Достаточно многие годы постоянно заниматься ремеслом и искусством (известны и такие примеры). При этом человек усердно трудится и анализирует свои и чужие работы.
Правда, графические дизайнеры, имеющие огромный опыт при полном отсутствии профильного образования, существуют только в России. В иных условиях людям, которые хотят работать по этой специальности, необходимо высшее художественное образование, а также знание программного и технического обеспечения.
Разумеется, элементарные навыки работы с графическими программами вполне можно получить и самостоятельно, и на краткосрочных курсах, однако это поможет лишь залатать дыру, но не даст основательных познаний, которые можно получить в вузе.
Типографский дизайн: удобно для глаз. Читателя не заботит то, как разрабатывались буквы шрифта и как их перенесли на бумагу, - ему нужно, чтобы материал в газете легко читался.
Типографский дизайн - это искусство и процесс расположения типографских элементов на газетной странице. Типографский элемент - это то, что оставляет отпечаток типографской краски на бумаге, т.е. буквы алфавита и цифры, знаки пунктуации, линии, рамки, декоративные элементы и иллюстрации любых видов. принципы типографского дизайна базируются на двух неизменных факторах: линейность латинского алфавита и физиология аппарата чтения человека.
Проблемы передачи информации
При оформлении газеты дизайнер постоянно сталкивается с тремя проблемами.
Первая связана с механизмом чтения. Чтение - сложный навык, которому нужно учиться. С годами зрение человека слабеет, и для пожилых читателей процесс чтения должен быть как можно более облегчен.
Вторая проблема, тесно связанная с первой, - психология чтения. Столкнувшись с какими-либо сложностями при чтении, люди часто ищут альтернативу в радио- и теленовостях. Успешная деятельность газеты напрямую зависит от того, купят ли ее еще раз, однажды прочитав, а это, в свою очередь, всецело зависит от ее содержания. Поэтому содержание газеты, несомненно, важнее ее оформления, которое, по сути дела, является лишь "упаковкой" информации. Типографский дизайн же необходим для того, чтобы убедить потенциальных читателей в необходимости попробовать наш "продукт". И для осуществления этой цели он должен быть как можно более эффективным.
Третья проблема - экономичность типографского дизайна. Стоимость выпуска газеты не должна превышать стоимость продажи. Кроме того, часто игнорируется самый важный бюджетный фактор – время
Функциональный типографский дизайн.
Основное требование функционального типографского дизайна: каждый используемый элемент должен эффективно работать. Если элементы не выполняют необходимо-полезной работы - они не функциональны. Самое плохое - это дисфункциональность. Элемент, который не может привлечь читательского внимания, попусту отвлекает его, он лишний, и от него лучше избавиться. На любой напечатанной странице область, с которой начинается чтение, находится в верхнем левом углу. Натренированный глаз начинает читать страницу именно с этого места и должен быть привлечен чем-либо ярким, захватывающим внимание. В правом нижнем углу глаз заканчивает чтение страницы, и там находится конечная зона. Такая последовательность чтения обусловлена линейным расположением букв латинского алфавита.
Глаз читателя не должен следовать вдоль этой линии как бы прогуливаясь - его необходимо отвлекать в сторону от этой линии различными оптическими "магнитами", продуманно расположенными на странице, чтобы привлечь внимание читателя к каждому ее участку. Незадействованные правый верхний и левый нижний углы страницы особо нуждаются в "приманках".
12. Выбор и использование шрифтов
1. Одевайтесь по случаю
Выбор шрифта больше похож на выбор одежды, с которым мы сталкиваемся утром. Так же, как и в одежде, между шрифтами существует разграничение на стильные и экспрессивные шрифты в противоположность часто употребляемым и подходящим ко многим ситуациям, и наша задача состоит в том, чтобы найти верный баланс для каждого случая.
2. Познакомьтесь со своими семействами: классификация шрифтов
Следующая задача – создать некую структуру, в соответствии с которой мы могли бы классифицировать различные шрифты, с которыми мы сталкиваемся.
Шрифты можно разделить и подразделить на десятки категорий, но чтобы составить рабочее представление о большинстве типов, которые существуют на сегодняшний день, их можно разделить на 5 групп:шрифты без засечек (засечка – это маленькие перпендикулярные штрихи, которыми начинается и заканчивается основной штрих знака), две группы антиквенных шрифтов, т.е. с засечками, и одну совершенно отличающуюся от остальных (с большими, прямоугольными засечками).
Геометрические шрифты без засечек – это шрифты, которые базируются на строгих геометрических формах. Штрихи отдельных букв в этих шрифтах часто бывают равной толщины, и для их дизайна характерен минимализм типа «чем меньше – тем лучше».
Наилучшие качества этих шрифтов – чистота, современность, универсальность, наихудшие – холодность, безликость, скука.
Гуманистические гротески , дизайн которых происходит от рукописных образцов – такие безупречные и современно выглядящие, неизбежно сохраняют в своей основе нечто человеческое.
В этом суть гуманистических гротесков: в то время как геометрические гротески проектировались с целью быть простыми настолько, насколько это возможно, буквенные формы гуманистического шрифта в большинстве случаев имеют больше деталей, меньше однородности, и, как правило, в них используются штрихи разной толщины. Кроме всего прочего они происходят от человеческого почерка, что само по себе имеет индивидуальный характер. Эти шрифты одновременно и современные, и человечные, строгие, но в то же время эмоциональные. Минусы: они выглядят немного расплывчатыми и ненастоящими, подручные корпоративного лицемерия.
Старая антиква , также называются «венецианскими», это самые старые наши шрифты, результат многовекового поступательного развития наших каллиграфических форм. Их отличает малый контраст между самым широким и самым тонким штрихом, а также то, что овальные элементы их буквенных форм имеют наклон влево (как в каллиграфии). Их лучшие качества – то, что это классические, традиционные, легко читаемые шрифты
С наступлением эпохи Просвещения и вследствие попыток дизайнеров сделать буквенные формы более геометрическими, заостренными и виртуозными, чем непритязательные шрифты старого стиля, появляются шрифты переходные и шрифты нового стиля или классицистические . Переходные шрифты продемонстрировали скромное продвижение в этом направлении. Наилучшими качествами переходных антикв и нового стиля являются их строгость, стиль и динамика. Их главный недостаток в том, что они как бы ни тут и ни там – слишком экстравагантные и барочные, чтобы быть классическими, и слишком перегруженные, чтобы быть по-настоящему современными.
Брусковые шрифты вновь вошли в моду в последнее время. Брусковые шрифты обычно имеют такие же штрихи, как и гротески (т.е. простые формы с относительно малым контрастом между толстым и тонким штрихами), но с мощными прямоугольными засечками на концах основного штриха.
3. Как их смешивать и сочетать и – что более важно – нужно ли их смешивать и сочетать вообще. Чаще всего, бывает достаточно одной гарнитуры.
1. Шрифт с засечками
Засечка, небольшой выступ, короткий штрих у основания и в верхней части буквы или символа. Большая группа шрифтов с засечками включает в себя шрифты старого стиля, современного стиля и египетского стиля.
Старый стиль
Шрифты старого стиля основаны на технике письма клинописью. Засечки строчных букв всегда располагаются под углом, а все изогнутые линии буквенных форм имеют переход от толстого штриха к тонкому. Если провести линию через тонкие части закругленного штриха, то она всегда будет диагональной.
Шрифты старого стиля считаются лучшими для набора длинного текста. Во-первых, у них крайне мало отличительных особенностей, мешающих чтению. А во-вторых, глаз как бы цепляется за засечки, что облегчает сам процесс чтения.
Современный стиль
Еще их называет Modern. Внешний вид шрифтов современного стиля отличается некой отчужденностью. Здесь уже нет явного подражания клинописи. У таких шрифтов засечки горизонтальные и более тонкие, явно выраженный, контрастный переход от толстой линии к тонкой и очевидный вертикальный нажим.
Такие шрифты очень хорошо смотрятся при написании крупным кеглем. Однако, из-за резкого перехода от толстой линии к тонкой, такие шрифты не годятся для длительного чтения. Поэтому их лучше всего использовать для написания заголовков и логотипов.
Египетский стиль
Их отличительная особенность – едва заметный переход или контраст от более толстой линии к тонкой, а иногда и вообще его отсутствие. Также засечки строчных букв у таких шрифтов горизонтальные и толстые.
Поскольку штрихи у шрифтов египетского стиля более плотные и единообразные, то такой шрифт идеально подходит для длинных текстов. Но при этом следует учесть, что вся страница в целом будет выглядеть более темной. Этот стиль получил широкое распространение при наборе детских книжек.
2. Рубленый шрифт
В таких шрифтах нет засечек, практически нет нажима при переходе от более толстой линии к тонкой. Из-за этого они выглядят более единообразно по толщине. Считается, что шрифты с засечками более удобны для чтения. Однако, что касается веб-дизайна, то тут нет однозначного мнения. Это связано с техническими особенностями монитора.
3. Рукописный шрифт
Техника создания таких шрифтов включает в себя написание вручную специальной кисточкой или ручкой для каллиграфии. Рукописные шрифты не подходят для написания длинных текстов, особенно из одних прописных букв. Но они очень красиво смотрятся, набранные крупным кеглем. Так что, как декоративный элемент оформления они просто незаменимы.
К этой категории относятся большинство шрифтов, не попадающих в остальные категории. Декоративных шрифтов очень много и их количество увеличивается день ото дня. Из-за своей яркой экстравагантности такие шрифты стоит применять дозировано и аккуратно. Это могут быть логотипы, заголовки, надписи.
13. Классификация шрифтов Шрифты в современной типографике классифицированы и поделены на группы согласно их оформительским функциям и особенностям написания. Выделяют по рисунку: декоративные шрифты, предназначенные для украшения текста или изображения, в основном такие шрифты имитируют исторический или ретро-стиль написания, антиквенные шрифты, рубленые шрифты или гротески, всем знакомы дополнительные, новые маконтрасные, готические шрифты, рукописные и старославянские шрифты. По начертанию очка: насыщенность (светю, полужир, жир), плотность(норм, узки, широкие), постановка очка (прямые, курсив, наклонные) Подобное шрифтовое разнообразие позволяет дизайнерам использовать типографику во многих областях, где требуется стилизация под старину, или необходимость акцентировать внимание клиента на какой-либо одной детали изображения.
14. Современные тренды шрифтового дизайна. Добавление, простата и различимость, гламурные и трафаретные шрифты, возвращение дидо, использ класс шрифтов и их вариации, шрифты из предметов, супергарнитуры, ретро.
Коммуникация играет в дизайне огромную роль. Очень важно создавать крепкую связь между веб-сайтом и непосредственно самим пользователем и затем помогать ему в достижении поставленных целей. Когда мы говорим о коммуникации в контексте веб-дизайна, обычно мы имеем в виду текст. Типографика является неотъемлемой частью данного процесса:
Более 95% информации в Интернете хранится в письменном виде.
Хорошая типографика — это залог легкодоступной информации, в то время как при плохой типографике приходится прикладывать усилия для понимания текста. Как отмечает Оливер Райхенштайн в статье «Веб-дизайн на 95% состоит из типографики »:
Оптимизация типографики — это оптимизация читабельности, доступности, удобства использования (!) и достижение графического баланса в целом.
1. Используйте минимальное количество шрифтов
При использовании более 3 разных шрифтов ваш веб-сайт теряет структуру и выглядит непрофессионально. Помните, что злоупотребление размером и стилем шрифта может испортить любую разметку.
Чтобы предотвратить подобную ситуацию, старайтесь свести количество используемых шрифтов к минимуму.
В целом, сведите количество шрифтов к минимуму (двух более чем достаточно, часто хватит и одного) и придерживайтесь использования одних и тех же на всем веб-сайте. Если вы решите работать с более чем одним шрифтом, убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв. Взгляните на пример, приведенный чуть ниже. У комбинации Georgia и Verdana (слева) есть общие характеристики, что позволяет им гармонично сочетаться друг с другом. Возьмем для сравнения комбинацию Baskerville и Impact (справа). «Тяжеловесный» Impact подавляет своего «засечного» напарника.
Убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв
2. Старайтесь использовать стандартные шрифты
В сервисах со шрифтами (например, Google Web Fonts или Typekit) можно найти много интересных, которые добавят в ваш дизайн нечто новое и необычное. К тому же, ими очень легко пользоваться. Возьмем, к примеру, Google:
1. Выбираете любой шрифт. Скажем, Open Sans .
2. Генерируете код и вставляете его в
Своего HTML.
3. Готово!
Но что может пойти не так?
На самом деле, у этого метода есть одна серьезная проблема — пользователи привыкли к стандартным шрифтам и читают быстрее текст, написанный именно такими шрифтами.
Обычно наилучшим выходом будет использование системных шрифтов (Arial, Calibri, Trebuchet, etc.). Исключением может стать необходимость придерживаться каких-то шрифтов, которые задал сам клиент: например, для брендинга или для создания чего-то запоминающегося. Помните, что хорошая типографика влияет на прочтение текста, а не на визуальное восприятие шрифта.
3. Ограничьте длину строки
Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста. Выбирая ширину текста, вы должны ориентироваться не на ваш дизайн, а на ясность и четкость написанного. Обратите внимание на этот совет от Baymard Institute :
«Если вы хотите, чтобы вашему читателю было комфортно, каждая строка должна содержать не более 60 знаков. Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста».
Если строка слишком короткая, глазам придется часто менять фокус, что сбивает темп чтения. Если же строка слишком длинная, глазам читателя, наоборот, придется долго фокусироваться на написанном. Фото: Material Design
Что касается мобильных устройств, придерживайтесь диапазона в 30-40 знаков в строке. Ниже представлен пример двух сайтов, открытых на мобильных устройствах. На одном строка содержит от 50 до 75 символов (лучшее количество знаков в строке для печатного текста и разрешения компьютера), а на втором мы видим оптимальные 30-40 знаков.
В веб-дизайне можно достичь необходимого количества знаков, уменьшив ширину текстовых блоков с помощью em или пикселей.
4. Выбирайте гарнитуры, которые хорошо читаются в любом размере
Пользователи будут заходить на ваш сайт с разных устройств, у которых, соответственно, различается размер и разрешение. Большинство пользовательских интерфейсов используют текстовые элементы различной величины (кнопка «копировать», подписи полей, заголовки секций и т.д.). Необходимо выбирать гарнитуру, которая будет хорошо выглядеть, и оставаться читабельной в любом размере.
Roboto от Google
Убедитесь, что гарнитура, которую вы выбрали, легко читается на маленьких экранах! Старайтесь не использовать курсивные шрифты, например, Vivaldi (на изображении ниже): хоть они и выглядят красиво, понять написанное иногда бывает сложно.
Использование шрифта Vivaldi затруднит прочтение текста на маленьком экране
5. Используйте шрифты с четкими буквами
Многие шрифтовые гарнитуры созданы таким образом, что иногда бывает очень легко спутать похожие буквы, особенно «I» и «L», написанные латиницей (как на изображении ниже). В некоторых же буквы расположены так близко друг к другу, что сочетание «r» и «n» можно принять за букву «m». Поэтому, выбирая шрифт, протестируйте его в разных контекстах. Так вы сможете убедиться, что из-за шрифтовой гарнитуры у читателя не возникнет проблем с пониманием текста.
6. Избегайте капса
Текст, написанный капсом — или одними заглавными буквами — подходит для ситуации, где пользователь не вовлекается в процесс чтения (например, в аббревиатурах или логотипах). Но в других случаях не насилуйте ваших читателей текстом, написанным заглавными буквами. Как отмечает Майлз Тинкер в своей известной работе «Legibility of Print», такой текст читается гораздо медленнее текста, написанного строчными.
7. Не сводите межстрочное расстояние к минимуму
В типографике существует специальный термин для обозначения расстояния между строками — интерлиньяж (или межстрочный интервал). Увеличивая интерлиньяж, вы увеличиваете вертикальное пространство между строками, тем самым улучшая читабельность текста на экране. По правилам, для обеспечения читабельности текста интерлиньяж должен быть примерно на 30% больше, чем высота знака.
Правильное межстрочное расстояние способствует лучшей читабельности текста. Фото: Microsoft
По словам Дмитрия Фадеева, правильно подобранное расстояние между абзацами увеличивает понимание прочитанного на 20%. Умение дизайнера работать с белым пространством позволяет пользователям усваивать содержание текста целиком без упущения каких-либо деталей.
Слева: Текст написан практически вплотную. Справа: Правильное межстрочное расстояние способствует читабельности текста. Фото: Apple
8. Убедитесь, что у вас все в порядке с цветовым контрастом
Не используйте одни и те же или похожие по гамме цвета для текста и фона. Чем лучше виден текст, тем быстрее пользователи смогут прочитать его и уловить основные моменты. Консорциум Всемирной паутины советует использовать следующее соотношение для основного текста и текста изображения:
- Небольшие тексты должны иметь коэффициент контраста минимум 4,5:1 по отношению к фону.
- Большие тексты (от 14 размера полужирным шрифтом/от 18 размера и выше стандартным шрифтом) должны иметь коэффициент контраста минимум 3:1 по отношению к фону.
Этот текст не соответствует стандарту цветового контраста, поэтому его тяжело различить на фоне.
Этот текст соответствует стандарту цветового контраста, поэтому он читается легко.
Когда вы подобрали цветовую гамму, необходимо дать ваш текст для прочтения реальным пользователям и желательно на нескольких разных устройствах. Если в ходе тестирования выявятся какие-то трудности с распознаванием текста, то можете быть уверены, что в будущем многие пользователи могут столкнуться с такой же проблемой.
9. Старайтесь не использовать красный или зеленый цвет в тексте
Дальтонизм — явление довольно распространенное, особенно среди мужчин (8% мужского населения — дальтоники). Поэтому, помимо цвета, желательно использовать какие-то другие знаки для выделения важной информации. Также старайтесь не прибегать к красному и зеленому цвету, так как именно эти цвета чаще всего не распознаются дальтониками.
10. Старайтесь не использовать мерцающий текст
Информация, которая мигает или мерцает, может вызвать недомогание у восприимчивых к этому пользователей. Кроме недомогания, это также может вызвать раздражение у многих читателей, так как будет отвлекать их от процесса чтения.
Не используйте мерцающий текст!
Заключение
Типографика — это очень важная вещь. Делая правильный выбор, вы наделяете веб-сайт ясностью и четкостью. В то же время, неправильный выбор может привести к невнимательному прочтению текста, так как отвлекает все внимание на себя. Типографика должна быть читабельной, ясной и понятной.
Типографика должна уважительно относиться к контенту
Это подразумевает, что читатель никогда не должен испытывать дискомфорта при прочтении текста.
