Понимание написания типографики для Интернета

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

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

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

Измерьте свои параграфы

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

Теперь, это может показаться чем-то вроде натяжения для некоторых более широких макетов. Особенно, если ваш дизайн изменчив и предназначен для адаптации по мере того, как пользователь изменяет размеры своего окна браузера. Вы всегда можете установить CSS Максимальная ширина собственность на ваш основной контент div. Поля кодирования и размеры шрифта в масштабируемых единицах (процентах, ems), а не в пикселях, позволят обеспечить такую ​​гибкость в любом макете.

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

Ведущий объяснил

При разработке, наряду с вашим пунктом измерения, вы должны также учитывать идею ведущий. Слово произносится “ledd-ки”, такие как свинец, используемый в карандашах. Это название происходит от более ранних дней механического набора текста, когда полосы текста были помещены между строками текста.

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

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

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

Используйте натуральные размеры шрифта

Есть еще несколько сайтов, которые предпочитают использовать шрифты с размерами меньше среднего. 11px-12px может показаться гораздо больше “профессиональный профессионал” для бизнес макетов. Но эти размеры не помогают большинству посетителей, которые ищут конкретную информацию.

Обычно веб-браузеры по умолчанию используют 16px, если вы не применяете никаких правил CSS. Даже это может показаться немного маленьким, если у вас есть дополнительное место в макете для размещения текста большего размера. Большие размеры шрифта выглядят лучше, и их гораздо легче найти для относительных ключевых слов. Шрифты с засечками не часто выбираются в качестве материала абзаца, но вы все равно можете избежать неприятностей. Я предлагаю использовать намного больший размер текста для шрифтов на основе засечек, чтобы улучшить читаемость и привлечь внимание.

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

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

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

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

Стиль на основе контекста

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

Многие веб-дизайнеры никогда не использовали CSS-свойство text-indent. Вы задаете значение для отступа первой строки любого абзаца, на который нацелено это правило. Единицы следуют стандартным параметрам текста, таким как пиксели, точки, ems, проценты ... Это, конечно, не тенденция, которую вы найдете в большинстве блогов. Но он обеспечивает хороший ритм страницы при чтении больших блоков текста.

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

Игра с интервалом букв

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

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

Я часто использую несколько пикселей / точек между буквами в заголовках со всеми прописными буквами. Это разбивает отдельные символы с некоторым дополнительным пространством, а также выглядит как очень определенный “заголовок” смотреть. Отрицательный интервал букв также отлично работает в правильном контексте. Я обычно придерживаюсь меньших единиц, может быть -0,03em или -0,1em максимум.

Комбинирование и подбор шрифтов

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

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

Кроме того, шрифты без засечек более чистые и их легче объединять в предложениях. Это не значит, что шрифты с засечками не будут работать в абзацах. На самом деле есть много хороших примеров! Но малоизвестная концепция, называемая x-height, крайне важна для определения сложности шрифта. Посмотрев на основную пару слов, вы поймете, как такие шрифты будут “вписаться” друг с другом.

Стоит также отметить важность пространства между этими различными элементами. Скорее всего, вы будете использовать 2 или 3 разных стиля заголовков, поэтому каждый из них будет выглядеть по-разному. Я склонен держать свои элементы h2 / h3 немного ближе к следующему блоку абзаца, так как это подразумевает наличие корреляции между контентом.

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

Заключение

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

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

Больше…

Вот больше постов, связанных с типографикой:

• Витрина веб-дизайна с красивой типографикой
• Лучшая типография для современных сайтов
• Краткое руководство по типографике: учись и будь вдохновлен