Для дизайнеров тип настройки — это обычная и важная задача. Принимая во внимание текст, который мы устанавливаем, мы должны обеспечить его удобочитаемость и удобочитаемость . Кроме того, мы должны предоставить визуальные подсказки, которые подчеркивают отношения между и среди текста. При этом мы придаем тексту целый ряд качеств, поощряющих и позволяющих читателю либо быстро переходить к конкретному фрагменту информации, либо удобно переваривать большие разделы текста.
Для хорошего дизайнера настройка текста становится второй натурой, но наличие быстрого контрольного списка для ознакомления, чтобы убедиться, что основы покрыты, может быть полезным, особенно для начинающих новичков в этой области. Это мой список, используемый в качестве набора общих руководящих принципов:
1. Примените не более трех шрифтов на дизайн (или страницу)
Настройка не более трех гарнитур (или цифровых шрифтов) для дизайна — это отличное базовое правило. Применение и установка текста с большим разнообразием шрифтов (даже если они похожи) создает чувство разобщенности; читатели получают представление о том, что связанные, если не одни и те же типы текста (например, абзацы основного текста) не связаны между собой. Использование большего количества похожих шрифтов может обойти эту разобщенность, но читатель все же заметит — даже если подсознательно — странность. Даже если они не в состоянии описать и вызвать возмущение, эффект может остаться.
Причина, по которой «или страница» в этом правиле заключается в предоставлении художественной свободы. Веб-сайт Джейсона Санта-Марии хорошо иллюстрирует это с его творчески разнообразными дизайнами и стилями, которые выражают его сообщения в блоге, в то время как его сайт в целом сохраняет идеальное единство.
2. Установите заголовки большими и привлекательными вверху страницы.
Раньше был удивительный страх устанавливать большой текст в Интернете. Объемная копия, установленная на 10 пикселей (и даже ниже!), Казалась безудержной, а заголовки редко обрабатывались чем-либо, кроме чуть большего размера шрифта. Заголовки являются одними из самых первых строк текста, читаемых глазом при переходе на новую страницу, и они необходимы для обозначения разделов в отрывках. Как таковые, изящные заголовки с размером и стилем, которых они заслуживают, чтобы пригласить читателя и обеспечить достаточные, но ненавязчивые подписи для заголовков более низкого уровня, чтобы направлять читателя.
3. Размер тела копия 14px +
Это связанное и, возможно, самое важное практическое правило: предоставьте основной текст того размера, который необходим для удобного чтения на экране. Конечно, большое количество других факторов влияют и на разборчивость и читаемость текста и особенно более точно устанавливают основную копию, но размер остается критическим.
Помните, что не многие из нас имеют видение 20–20; хорошее значение по умолчанию — 14 пикселей.
4. Обеспечить хороший контраст текста с фоном
Увеличение размера шрифта — верный способ сделать ваш текст более разборчивым, но разборчивость (и, как следствие, читаемость) будет уменьшена из-за плохого контраста между текстом и фоном, на котором он лежит.
Общепринятым стандартом является размещение темного текста на светлом фоне или наоборот. Абсолютно избегайте столкновения цветов или едва заметного серого на белом фоне.
Особую осторожность необходимо применять к светлому тексту на темном фоне, потому что он не имеет такой же контрастности (даже если вначале может показаться так), как это делает его двоюродный брат: увеличьте отслеживание, измерения и ведение соответственно.
5. Применяйте стресс и осторожность
Это частично и редакционный принцип, частично типографский: не засоряйте текст лишними подчеркиваниями, жирным шрифтом и курсивом; применять акцент и подчеркивает экономно точно для дополнительного и преднамеренного акцента.
Следует отметить, что избегайте чрезмерно длинных гиперссылок с подчеркиванием, особенно на шрифтах с засечками и, тем более, при меньших размерах. text-decoration : underline; умолчанию text-decoration : underline; прорежет глифы по убыванию (главным образом, g, j, p, q и y) и сделает их более трудными для распознавания. Удобное решение — не устанавливать текстовое оформление и вместо этого использовать border-bottom : 1px; или только при наведении мыши ( a :hover ).
6. Не устанавливайте непрерывный текст заглавными буквами
Асцендеры и спуски существуют по уважительной причине: они позволяют нам легко идентифицировать слова. Слово, которое установлено в верхнем и нижнем регистре, более узнаваемо, чем одно и то же слово, заданное полностью в верхнем регистре из-за однородности высоты и базовой линии слова. Например, контраст:
«РЕЗУЛЬТАТЫ АНАЛИЗОВ ЗАКОНОДАТЕЛЬСТВА МОГУТ БЫТЬ ПРОТИВОРЕЧНЫМИ, НО ОДНО ЯСНО: ТЕКСТ, УСТАНАВЛИВАЕМЫЙ КАПИТАЛОМ, ТРУДНО ПРОЧИТАТЬ, ЧЕМ ТЕКСТ УСТАНОВЛЕН В ВЕРХНЕМ И НИЖНЕМ РЕЖИМЕ. ЭТО НЕ МОЖЕТ БЫТЬ ОСОБЕННО ВАЖНЫМ В СЛУЧАЕ ИНДИВИДУАЛЬНЫХ СЛОВ, НО ЭТО ДЛЯ БОЛЬШИХ КОЛИЧЕСТВ ТЕКСТА. ТОГДА СЛИШКОМ, ТАКЖЕ БОЛЬШАЯ РАЗНИЦА В КОЛИЧЕСТВЕ ПРОСТРАНСТВА.
с:
«Результаты анализа разборчивости могут быть противоречивыми, но ясно одно: текст, набранный заглавными буквами, труднее читать, чем текст, набранный в верхнем и нижнем регистре. Это может быть не особенно важно в случае отдельных слов, но это касается большого количества текста. Кроме того, есть также большая разница в количестве места.
— Hochuli, J. 2008, Detail in Typography , 3-е издание, Hyphen Press, Лондон, с. 24.
Если вам необходимо задать более длинные строки текста полностью в верхнем регистре вместе с обычной копией основного текста, рассмотрите возможность установки их с более широким начальным font-variant : small-caps; в маленьких заглавных буквах ( font-variant : small-caps; ).
7. Дайте тип пространства для дыхания; установить достаточные меры и ведущие
Ведя прямо (без каламбура) с конца последнего правила, убедитесь, что в вашем тексте достаточно места для дыхания; предоставьте ему необходимое пространство как по вертикали, так и по горизонтали, чтобы обеспечить хороший, четкий контраст для удобочитаемости и читабельности.
Убедитесь, что строки не слишком короткие, требующие резких быстрых штрихов глаза, чтобы проследить до каждой следующей строки, но также не слишком длинные, чтобы потеряться при достижении конца строки и затем переходить к следующей. Идя рука об руку с длиной строки, ведите: обеспечьте достаточно места между строками, но не слишком много, чтобы разорвать текст на части.
8. Остерегайтесь шрифтов, не предназначенных для использования на экране
Расширение за пределы основных веб-безопасных шрифтов является достойной работой, но выбирайте только качественные гарнитуры, которые соответствуют среде, с которой вы работаете. В мире фантастическое изобилие шрифтов, из которых только подмножество подходит для настройки основного текста, а еще меньшее подмножество было оптимизировано или разработано специально для использования в Интернете.
Ищите хорошие таблицы подсказок и тестируйте свой шрифт меньшего размера (10px, 12px, 14px) в различных браузерах и операционных системах, чтобы оценить, насколько хорошо различные механизмы рендеринга шрифтов отображают шрифт.
9. Убедитесь, что ресурсы веб-шрифта размещены и кэшированы
При использовании ресурсов @font-face webfont размер страницы будет увеличиваться — агенту пользователя (главным образом браузеру) потребуется загрузить шрифт для текста, который будет отображаться с ним. Одним из способов уменьшить этот размер загрузки является подстановка шрифта: удалите ненужные глифы для символов, которые вы никогда не будете использовать (например, на английском веб-сайте мало что нужно для кириллических символов и наоборот). Во-вторых, пользовательские агенты предлагают кэшировать ресурс на определенный период времени, чтобы последующие посещения не приводили к повторной загрузке шрифта.
10. Не используйте Comic Sans
Больше личной записки и разочарования. А если серьезно, зачем вам использовать этот чрезмерно и довольно непривлекательный комический шрифт, когда есть так много других на выбор, включая свободно лицензированные, такие как Comic Jens .
Это мой список. Что твое?