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

Данил Фимушкин

Основы типографики для веб-дизайнера

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

Начнем с примеров типографики.

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

Так делать не надо

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

Попробуйте прочитать этот текст за 20 секунд.

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

Типографика

Определение типографики — оформление текста по средствам набора и верстки. Понятие «типографика» пришло из полиграфии.
На картинке литера, это металлический брусочек, на котором есть печатные пробельные элементы, которые делают оттиск на бумаге и получается соответствующая буква. Поэтому в определении «типографики» есть такие слова как «набор» и «верстка», они пришли из полиграфии.

Базовые определения в типографике

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

Леттеринг — создание декоративных шрифтов. Обычно в блокноте рисуется эскиз, потом переносится в иллюстратор, обводят шрифт с помощью кривых Безье, после чего получается аккуратная надпись.

Леттеринг для логотипа

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

Основные правила типографики

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

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

Чтобы набрать длинное тире на PC зажмите клавишу alt и на дополнительной цифровой клавиатуре (у вас блок справа) набери 0151, получится длинное тире. Короткое тире: alt + 0150.
Если забыли сочетание, то наберите в поисковике «длинное тире» найдите статью на википедии и скопируйте тире от туда.

Кавычки
Важно помнить, что в России принято использовать кавычки-ёлочки «». Чтобы их набрать используй alt + 0187. Некоторые используют в качестве кавычек удвоенный знак минут “, но лучше использовать кавычки-лапки “ ”: alt + 0147.
Комбинация клавиш Shift + 2 в кириллической раскладке клавиатуры вызывает на экран привычный всем знак “. Он обозначает совсем не кавычки (как принято считать), а секунды: 68° 13′ 22″ или дюймы: монитор с диагональю 17”.
В издании нужно использовать один рисунок кавычек, кроме «случаев „цитаты в цитате“».

Шрифты

Со знаками разобрались, теперь о понятии шрифта. Здесь я приведу только основные определения, как правильно использовать шрифты, читай в заметке про подбор шрифтов.
Шрифт — комплект литер, предназначенных для набора текста. Литера — та штука, про которую я рассказывал выше, металлический брусочек с буковкой. Грубо говоря шрифт — это комплект таких металлических буковок, предназначенных для работы текста.

Гарнитура — набор шрифтов, которые имеют единый стиль и оформление. Естественно у них должно быть схожее начертание. Например, гарнитура PT Sans состоит из различных начертаний шрифта: Bold, Italic и другие. Все начертания в совокупности, дают нам гарнитуру PT Sans.

Начертания шрифта — это графическая разновидность шрифта в пределах одной гарнитуры. Например, PT Sans имеет тонкое, жирное, полужирное и другие начертания. Обычно в Фотошопе оно пишется на английском.

Интерлиньяж — расстояние между базовыми линиями соседних строк.

Выключка (в жизни выравнивание) — способ расположения неполной набранной строки относительно вертикальных границ полосы набора. Вы наверняка видели в MS Word такие кнопочки (найти картинку выровнять). Называется выключка, потому что когда нужно было правильно расставить металлические литеры в них ставили пробельные металлические брусочки, чтобы их выключить. Поэтому назыавется “выключка”.

Выравнивание текста или выключка

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

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

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

Антиква и гротеск

Антиква — шрифты за засечками. Засечки — это горизонтальные полосочки сверху, снизу у букв. Они пришли из старых шрифтов, которые пошли со времен письма на камне. Антикву проще читать в книгах, засечки создают горизонтальные линии, которые как бы поддерживают шрифт на базовой линии и нам проще бегать взглядом для считывания предложений.
Гротеск, соответственно шрифт без засечек, появился недавно, в связи с так называемой шрифтовой революцией, когда засечки стали не нужны. Часто гротеск используется в веб-шрифтах, экранных штуках (на телефонах, например). Он проще из-за отсутствия засечек, его хорошо использовать для сплошного набора в интернете. В проектах можно использовать любой вариант, правильного и неправильного варианта тут нет. Нужно смотреть по ситуации, какой проект вы делаете и что более актуально для него.
На этом вводный курс по типографике для веб-дизайнера окончен
Запомнив только Антикву и Гротеск вы уже обойдете по знаниям многих дизайнеров. Не стойте на месте, изучайте типографику, это интересно и поможет делать крутые и аккуратные проекты.
Пишите в комментариях что нового узнали из этой статьи.

Типографика веб-дизайна: основные понятия и современные тренды

“Веб-дизайн — это 95% типографики”, — сказал основатель компании Information Architect Оливер Райхенштейн. Так оно и есть: без качественной типографики ваш сайт будет неудобным для восприятия. В этой статье разберем основные виды типографики и современные тренды. Поехали!

Что такое типографика и зачем она нужна

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

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

Основные правила типографики

Чем проще — тем лучше. Даже если появилось множество новых интересных шрифтов, эмодзи, анимаций — не нужно использовать все их сразу. Сайт будет аляпистым и совершенно не стильным.
Сайт должен быть читабельным. Если выбирать между оригинальностью идеи и удобством для посетителя — любой веб-дизайнер не раздумывая выберет второе.
Главное должно отличаться от второстепенного. Хорошая типографика сразу показывает, что тут самое важное, а что нет. Если элементы сайта спорят между собой и взгляд посетителя мечется, не зная, что выбрать — значит, типографика хромает.
Правило золотого сечения. Мы уже писали о нем в статье про основные правила веб-дизайна. Если кратко — это деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3, и так далее. Чаще всего по этому принципу определяется соотношение рекламных блоков и текста.
Текст важнее. Графика должна не перетягивать одеяло на себя и отвлекать от контента, а дополнять его и привлекать к нему внимание. Текстовая информация чаще важнее, чем картинки — а значит, графика должна быть на службе у контента, а не наоборот.
Помните о гармонии. Не только в музыке она есть, как пелось в одной известной песне. На сайте все должно быть выполнено приятно глазу, гармонично и естественно. Хотите проверить? Просто дайте оценить сайт любому знакомому: пусть посмотрит свежим взглядом и выскажет честное мнение.

Основные понятия типографики и как их применять

О шрифт, ты — мир!

История шрифтов в типографике заставляет задуматься. На заре веб-дизайна считалось крутым использовать необычные шрифты по принципу “чем чуднее — тем моднее”. Со временем появилась тенденция к упрощению: сейчас предпочтение отдается простым крупным шрифтам. И обязательно читаемым.

Приведем несколько основных правил использования шрифтов на сайте:

1. Не используйте слишком много шрифтов. Мы все понимаем — хочется сделать свой сайт поярче и поинтереснее, но пожалуйста, остановитесь на двух-трех. Слишком большое количество шрифтов выглядит непрофессионально и нечитабельно. Подумайте о посетителе — легко ему будет подстраиваться под хотелки дизайнера? Да и сочетать много шрифтов будет непросто — как правило, в итоге таких экспериментов получается сборная солянка.

Читать еще: Специальность гейм дизайнер

Например, хорошо сочетаются шрифты Georgia и Verdana — они визуально похожи и гармонично дополняют друг друга. Шрифты Baskerville и Impact, напротив, имеют разную ширину символов, и второй просто “убивает” первый.

2. Используйте стандартные шрифты. Если ваш веб-дизайнер — не суперпрофессионал, лучше не рисковать и выбрать знакомые всем true-шрифты, которые давно зарекомендовали себя. Это, например, системные Arial или Calibri, можно также использовать шрифты Google (это бесплатно) или Adobe Typekit (по подписке) или поюзать онлайн-конструкторы. Вариантов масса!

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

3. Буквы должны читаться! Есть некоторые шрифты, в которых отдельные буквы можно перепутать. Например, I и L в английской раскладке, “н” и “м”, “т” и “ш” — в русской. Особенно сложно бывает читателю, когда еще и расстояния между буквами маленькие. Остерегайтесь таких шрифтов!

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

Искусство цвета

1. Играйте на контрасте. Цвет текста и фона для него должны различаться. Серый на сереньком — так себе тренд. Чем больше бросается в глаза контраст — тем гарантированнее он привлечет внимание пользователей. Чем меньше шрифт, тем более он должен быть контрастным, и наоборот.

Какие цвета можно сочетать? Используйте базовые принципы сочетания цветов. В этой схеме нет черного и белого — они априори сочетаются с любым цветом. Наиболее контрастным, кстати, считается сочетание черного и желтого. Взять наш “Тинькоф-журнал” — они использовали это правило на все сто.

2. Смелее, детка! В моде техники градиента, дуплекс — использование двух цветов и их полутонов, трехмерные объемные изображения, картинки, нарисованные вручную и другие тренды веб-дизайна 2018 — ограничений практически нет. Все зависит от вкуса и чувства стиля вашего дизайнера.

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

Оформление текста

“Крылья, ноги, главное — хвост!” — если перефразировать фразу из культового мультика, то же самое можно сказать и о тексте. Цвет и шрифты, конечно, важны, но оформление текста все же играет главную роль в восприятии сайта посетителем. Рассмотрим современные тенденции оформления текста:

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

2. Форматируйте. Это незыблемое правило: если не хотите, чтобы ваш интересный и полезный текст превратился в одну большую простыню — ставьте заголовки и подзаголовки, не забывайте про маркированные списки. Обязательно выделяйте абзацы — сплошной текст читать просто невозможно. Считается, что оптимальная длина абзаца составляет 3-5 строк.

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

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

4. Ограничьте длину строки. Помните базовое правило типографики: текст важнее графики, особенности дизайна не могут диктовать условия верстке текста. Если дизайн вашего сайта предполагает длиннющую строку — проще поправить дизайн, чем заставить читателя дочитать ее до конца. Читабельность превыше всего!

Эксперты говорят, что оптимальное количество символов на строку — не более 60. Если меньше — читатель будет слишком быстро возвращаться в начало строки и сбивать ритм чтения. Если больше — сложно будет сосредоточиться на тексте: пока подойдешь к концу строки, забудешь о том, что написано в ее начале.

Внимание! Это правило актуально для текстов, которые читаются с ПК. Если речь идет о мобильном устройстве, длина строки должна составлять не более 30-40 символов — больше в экран просто не влезет. Ну вы поняли: адаптивный дизайн — наше все.

5. Следите за межстрочным интервалом. Чем он больше — тем больше воздуха в тексте, тем проще читателю пробираться через слова и символы. Обычно размер интервала должен быть на 30% больше высоты символов. Посмотрите, какая колоссальная разница между первым и вторым примером!

Тренды типографики последних лет

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

Крупная типографика

Пожалуй, самый главный тренд последних лет — крупная типографика. Давайте разберем, зачем она нужна:

привлекает и удерживает внимание посетителя. Сложно не заметить крупные шрифты, яркие цвета и особое расположение самого важного текста на странице. На сайте интернет-магазина, например, таким текстом будет призыв к действию, информация о скидках и поступлении новых коллекций. На новостном сайте — самая актуальная в данный момент статья. Большой текст — как неоновая надпись в небе: ну посмотри же на меня, прочитай меня, выбери меня, купи меня;
вызывает эмоции. Если написать одну и ту же фразу мелким и крупным шрифтом — посетитель стопроцентно отдаст предпочтение второму варианту. Вопрос еще и в том, как написать — если удастся воздействовать на чувства посетителя — велик шанс, что он вернется и станет вашим постоянным посетителем. Если за громким слоганом стоит личность создателя сайта — эффект может быть ошеломительным. Главное — не только сказать, но и кем это сказано;
позволяет определить главное. Все слышали про эффект баннерной слепоты — когда посетитель бегло сканирует взглядом текст, не задерживаясь на отдельных элементах. Крупный заголовок или рекламный баннер позволяет отделить зерна от плевел и остановить взгляд на самом главном. Заголовок помельче — информация второго уровня важности. Ну и так далее.

Большие шрифты

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

Сломанные сетки

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

Больше движения!

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

Понравилась статья? Обращайтесь в IDBI — мы знаем о типографике все и поможем разработать ваш сайт с учетом новых тенденций.

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

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

Шрифты

Типографика в веб-дизайне подчиняется определенным законам и правилам. Многие из них касаются шрифтов как основы формирования любого текстового контента. Правильный выбор в данном случае определяет концепцию проекта в целом влияет на восприятие ресурса пользователями.

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

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

Выравнивание

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

Хорошим вариантом для выравнивания является ориентация текста по левому краю. Такой формат уместен в 99% случаев.

Макро и микрографика

Макроуровень отвечает за общую структуру текста в пределах сайта, расположение относительно других элементов дизайна. Его цели глобальны — сделать текст целостным, гармоничным и в то же время «живым».

Микроуровень ответственен за область мельчайших деталей: интервалов, пробелов, отступов и т. д. Он формирует такое понятие как читабельность. Исключите его и текст превратиться в сплошное полотно из букв и знаков препинания.

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

Блоки текста

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

Читать еще: Обучение дизайнерскому делу

Начертание

Работая над типографикой, не обойтись без вариаций начертания букв. При умелом использовании эта возможность превращается в мощное акцентное оружие. Так, например, курсив придает тексту некую торжественность, жирное начертание указывает на важность информации, а свойство font-variant: small-caps придает определенной изысканности.

С засечками или без

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

Обратите внимание, что использование рубленого шрифта (Sans Serif) все же оправдано:

Когда читатели — дети.
При яркой акцентной цветовой палитре.
Если текст узкий или слишком маленький.

«>

Шрифты

Выравнивание

Макро и микрографика

Блоки текста

Начертание

С засечками или без

Обратите внимание, что использование рубленого шрифта (Sans Serif) все же оправдано:

Когда читатели — дети.
При яркой акцентной цветовой палитре.
Если текст узкий или слишком маленький.

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

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

Важность типографии в веб-дизайне

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

Они могут быть разными, в зависимости от направления портала, к примеру:

оформление подписки на рассылку;
чтение новых материалов;
поиск комментариев;
совершение покупки.

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

Главные правила типографики

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

Для сайта важна читабельность, поэтому следует создать удобство для пользователей.

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

Какие шрифты выбрать

Шрифты в типографике постоянно меняются. Раньше принято было использовать витиеватые символы, но сегодня желательно выбирать простоту и легкость.

Существуют некоторые особенности применения шрифтов:

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

Осторожности требуют готические и славянские шрифты, они могут оказаться неуместными.

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

Безопасные шрифты

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

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

Засечки

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

Оформление текста

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

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

Правила сочетаний шрифтов и готовые шрифтовые пары для сайта.

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

Если дело касается мобильных телефонов и планшетов, то этот показатель должен соответствовать 45 символам, остальное на экране не поместится. Главное создать адаптивный дизайн для успешной работы сайта.
Требуется отслеживать интервал между строк. Если он большой, то текст получится воздушным и удобным для читателей. Интервал следует делать на 30 % больше основного текста.

Макро- и микротипографика

Названия терминов говорят сами за себя:

макроуровень предназначается для постройки общей структуры статей и определяет размещение деталей относительно элементам дизайна;
микроуровень предназначен для мелких деталей, интервалов, пробелов и далее.

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

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

Все элементы в этом случае значимые:

Оптимальная длина строки

В строке для чтения текста должно быть 75 знаков, что значит 10 слов. Чем шире текстовая строчка, тем больше нужно делать интервал между строками.

Расстояние между строками должно быть больше, чем пробел между словами.

Выравнивание текста (вертикальное и горизонтальное)

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

Примеры хорошей и плохой типографики

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

Типографика считается субъективной, но существуют общие и явные признаки плохого качества и профессионального дизайна.

Верстка и композиция

Композиция гармонично сочетает все элементы и детали на странице. Она определяет расположение элементов друг с другом и объединяет их в единое целое. Правильная композиция помогает читателю разобраться в сути идеи и информации на портале.

Обычно посетители сайта смотрят на картинки, а затем на текст. Взгляд проходит сверху вниз и слева направо.

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

Визуальное восприятие

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

На этом изображении с визуальным восприятием все отлично:

На этой странице главным объектом является спикер, стоящий с правой стороны:

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

Читать еще: Второе высшее образование дизайнер

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

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

Типографика веб-дизайна постоянно меняется и расцветает. Сегодня есть обилие стилей и расцветок, деталей и визуализации. Это помогает эффективно воздействовать на гостей портала. Сейчас популярна крупная типографика.

Она обладает массой преимуществ перед другими:

Способна привлечь гостей и удержать на странице

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

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

Вызывает у посетителей сайта положительные эмоции

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

Помогает выделить главное

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

Если создатель сайта разберется в особенностях и принципах типографики и освоит стандартные приемы, то сможет воспроизвести эффективный и привлекательный дизайн!

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

Типографика в веб-дизайне: 10 полезных советов

Коммуникация играет в дизайне огромную роль. Очень важно создавать крепкую связь между веб-сайтом и непосредственно самим пользователем и затем помогать ему в достижении поставленных целей. Когда мы говорим о коммуникации в контексте веб-дизайна, обычно мы имеем в виду текст. Типографика является неотъемлемой частью данного процесса:

Более 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. Старайтесь не использовать мерцающий текст

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

Не используйте мерцающий текст!

Заключение

Типографика — это очень важная вещь. Делая правильный выбор, вы наделяете веб-сайт ясностью и четкостью. В то же время, неправильный выбор может привести к невнимательному прочтению текста, так как отвлекает все внимание на себя. Типографика должна быть читабельной, ясной и понятной.

Типографика должна уважительно относиться к контенту

Это подразумевает, что читатель никогда не должен испытывать дискомфорта при прочтении текста.

0 0 голоса

Рейтинг статьи