10 правил веб-типографики, которые должен знать каждый дизайнер
Вы можете включить в свой веб-дизайн множество элементов, которые вызовут интерес и удержат внимание ваших посетителей. К ним относятся изображения, видео и даже звук. Однако наиболее важной частью почти каждого веб-сайта является контент, который посетители читают, чтобы получить информацию, которую они читают.
Если вы хотите, чтобы эту информацию было легче читать, она была визуально интересной, и чтобы этот текст дополнял общий дизайн веб-сайта, вы должны понимать типографику. Это искусство и умение сделать письменное слово одновременно функциональным и эстетически приятным.
Если вы хотите научиться использовать типографику в своих интересах, ознакомьтесь с этими 10 правилами, которые должен помнить каждый дизайнер.
1 Прекратите использовать LoremIpsum после первоначального процесса проектирования
Если контент — это главное, почему ему не уделяется серьезное внимание в процессе веб-дизайна? Используя поддельный контент в качестве заполнителя, веб-дизайнеры отводят контенту второстепенную роль. Это верный признак того, что приоритеты дизайна не в порядке. Это не так проблематично на ранних этапах, например, когда вы делаете макеты различных макетов страниц. Однако после того, как вы сузили круг вопросов, важно работать с реальным веб-контентом при создании окончательного дизайна. Это гарантирует, что то, что говорится на конкретной веб-странице, имеет такое же значение, как макет и визуальные элементы.
В дополнение к этому наличие фактического текста имеет значение с точки зрения дизайна и макета. Вы же не хотите оказаться в ситуации, когда вы полностью спроектировали веб-страницу только для того, чтобы узнать, что она не работает с реальным содержимым. Вот почему крайне важно как можно скорее получить фактический текст от вашего клиента автора контента.
2 Сделать текст без засечек
Текст с засечками абсолютно красив. Это отличные шрифты для печати и для больших печатных приложений, таких как заголовки, заголовки и подзаголовки. К сожалению, на экране засечки плохо масштабируются, когда речь идет о небольших дисплеях контента, таких как блоки текста. Засечки, которые хорошо смотрятся в большом размере, затрудняют чтение текста, когда шрифт становится меньше. Из-за этого рекомендуется сохранять засечки для большого текста и полагаться на гротески, когда удобочитаемость может быть проблемой. А еще лучше используйте чистый, гладкий, современный вид шрифтов без шрифтов и сохраните засечки для печатного станка. Таким образом, вам никогда не придется иметь дело с ухудшением читабельности в пользу использования красивого шрифта.
3 Подумайте об умных кавычках и других символах на ранних этапах процесса проектирования
Скорее всего, вы посещали веб-сайт, на котором некоторые символы не отображались должным образом. Иногда их заменяют вопросом или строкой странно выглядящих символов. В других случаях их просто нет. Это часто происходит с умными или «кудрявыми» кавычками. Часто это результат создания текста в MS Word или другом пакете, а затем переноса на веб-страницу. Вещи просто не переводятся так, как хотелось бы. символ, двухбайтовые символы и другие символы, взятые из стороннего контента.
Чтобы избежать этой проблемы в окончательном дизайне, у вас есть несколько вариантов. Во-первых, вы можете изменить свой контент, чтобы избавиться от этих символов. Это работает, если вы хотите изменить символы на естественный язык. Вы также можете использовать HTML, чтобы убедиться, что символы отображаются правильно, а не просто копировать и вставлять. Что бы вы ни решили, обязательно протестируйте веб-страницу во всех возможных браузерах. То, что может решить проблему с символами в одном браузере, может совершенно не работать в другом.
Если вы развили хорошие навыки CSS, ваши посетители должны иметь возможность перемещаться по страницам вашего сайта абсолютно беспрепятственно. Если вы правильно создадите свои таблицы стилей, у вас даже может быть несколько версий одной и той же страницы, при этом сохраняя преемственность, когда дело доходит до типографики. Конечно, вам не нужно использовать много хитростей. Хороший CSS может помочь вам избежать небольших, но распространенных проблем, таких как изменение гарнитуры и размера шрифта от одной страницы к другой.
Почему последовательная типографика так необходима? Использование CSS для поддержания последовательной типографики придает вашему веб-сайту профессиональный и четкий вид. Это также означает, что вам не нужно думать о типографике при разработке каждой страницы. Вместо этого вы просто используете соответствующую таблицу стилей. Если вы решите на конкретной странице, что вы собираетесь нарушить норму и сделать что-то другое с типографикой, чтобы создать эффект или привлечь к чему-то внимание, это будет больше выделяться благодаря вашему использованию CSS.
5 Важны как микро-, так и макротипографика
Микротипографика относится к деталям типографики, связанным с удобочитаемостью. Например, расстояние является проблемой, связанной с микротипографикой, а также масштабированием и контрастностью. Все корректировки, которые вы вносите, чтобы гарантировать, что блок текста читается на любом устройстве или в любом браузере, связаны с микротипографикой.
Макротипографика связана с тем, как ваш выбор типографики связан с вашим общим дизайном. Это относится к эстетике.
Хорошая типографика учитывает как микро-, так и макротипографику. Вы когда-нибудь посещали веб-сайт, на котором использовался очень аккуратно выглядящий нестандартный шрифт, который к тому же было практически невозможно прочитать? Вот что бывает, когда внимание уделяется макротипографике, а не микротипографике.
6 Знайте содержание, а также дизайн
Как вы знаете, хороший сайт имеет поток. Частью этого является удобочитаемость контента, который находится на странице. Мы уже обсуждали, как на это влияют такие вещи, как засечки, и мы обсуждали, что фиктивный текст не может заменить реальный текст, когда дело доходит до более поздних этапов дизайна. Мы еще не закончили. Контент действительно король. После того, как окончательный дизайн, включая контент, готов, вы должны прочитать веб-страницу.
Когда вы читаете контент после того, как ваш дизайн закончен, вы можете определить, есть ли проблемы с пробелами или разрывами строк. Это может сделать контент запутанным или даже непреднамеренно изменить смысл контента. Устранение этих проблем с помощью нескольких приемов типографики может гарантировать, что ваш конечный продукт точно передает то, что вы или ваш клиент намереваетесь.
7 Поймите важность иерархии
Иерархия — это дорожная карта, которую вы даете людям, которые посещают ваш сайт. Вы можете использовать изображения, видео, цвет и (конечно) типографику для создания этой иерархии.
Это просто вопрос направления посетителя от первой вещи, которую вы хотите, чтобы он увидел, к следующей и так далее. С типографикой вы можете использовать размер, изменения шрифта и интервалы, чтобы помочь определить иерархию, которой должны следовать пользователи. На самом деле, если у вас есть страница, которая не конвертируется, вы можете поиграть с типографикой, чтобы увидеть, помогут ли какие-либо внесенные вами изменения направить посетителей к кнопке призыва к действию.
8 Будьте изобретательны, но осторожны с цветом
Самый простой способ убедиться, что у вас никогда не возникнет проблем с читабельностью из-за проблем с цветом шрифта и цветом фона, — это использовать самые контрастные цвета из возможных, черный и белый. К сожалению, это может сделать довольно скучный дизайн.
Не бойтесь использовать цвета. На самом деле, не бойтесь использовать цветовые комбинации, которые не кажутся вам подходящими. Иногда достаточно просто стать на один-два тона светлее или темнее. Затем ваша типографика превращается из нечитаемой в совершенно различимую и действительно классно выглядящую.
Проблемы с центрированным текстом многочисленны. Прежде всего, это может сделать ваши веб-страницы похожими на плохо оформленные листовки. В дополнение к этому вы почти всегда сталкиваетесь со странными полями и текстом, который выглядит так, как будто это стихотворение или заметки из старого рок-альбома. Хотя можно использовать центрированный текст для заголовков, обычно лучше вообще его избегать. Придерживайтесь левого скорректированного текста, и вашим читателям будет намного легче читать ваш контент.
10 Подумайте, как выглядит ваш текст в увеличенном виде
Независимо от того, используют ли они большой и указательный пальцы или нажимают кнопку масштабирования, люди будут увеличивать ваш текст. Иногда они делают это, чтобы компенсировать меньший экран. В других случаях они просто делают это, потому что им трудно читать ваш текст в нормальном размере.
Было бы здорово, если бы каждый мог просматривать ваш текст так, как предполагалось, но с учетом того, что бумерам часто требуется дополнительная помощь, чтобы увидеть текст, это просто невозможно. Будьте осторожны, чтобы не использовать шрифт, который портится при увеличении.
Полезные инструменты и ресурсы
Вот несколько полезных инструментов и ресурсов, которые помогут вам сделать больше с типографикой:
- FontFace Ninja: Эта утилита помогает вам идентифицировать шрифты, которые вы найдете в Интернете. Это отличный инструмент, когда вы сталкиваетесь со шрифтом, который действительно бросается в глаза. Этот подключаемый модуль Chrome поможет вам идентифицировать, найти и приобрести любой имеющийся в продаже шрифт, который вы видите на любом веб-сайте.
- TypePlate: это полноценный фреймворк типографики, который идеально подходит для веб-дизайнеров. TypePlate может обрабатывать буквицу, блочные кавычки, масштабирование, цвета и множество других задач, связанных с типографикой.
- Модульная шкала: это шкала, позволяющая определить идеальный шрифт и размер шрифта. Это также поможет вам создать баланс между размером шрифта ваших заголовков и заголовков и шрифтом, который вы выбираете для своего текста.
- TIFF: Этот инструмент позволяет вам использовать два разных шрифта. Затем он отображает для вас различия между каждым из двух шрифтов. Он даже позволяет сравнивать разные буквы и цифры из одного шрифта в другой.
- TypeWolf: Используйте этот веб-сайт, чтобы узнать о некоторых из самых крутых шрифтов и самых вдохновляющих примерах типографики в Интернете. Это отличный источник вдохновения, а также информации.
- Почему шрифты имеют значение, Сара Хайндман: Это отличная книга, посвященная важности шрифтов и тому, как типографика может влиять на состояние ума. Это отличная книга для людей, увлеченных типографикой, а также для людей, которым может потребоваться убеждение в важности выбора правильного типа работы.
Вывод
Надеюсь, эта статья побудит веб-дизайнеров задуматься о типографике, а также найти способы более эффективного и креативного использования шрифта в своих проектах.