Понимание Книгопечатания: Письмо Для Сети

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Больше..

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