Бентон Современный, тематическое исследование по ст-Режиссер Отзывчивый веб-типографики

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

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

Benton Modern Formal version 1
Бентон современной формальной версии.( Просмотр большой version 2 )

Бентон Современный Брошюра website 3 (проект я был вовлечен в) является прекрасным примером для демонстрации, как большая семейного типа могут быть использованы для улучшения разборчивости и читаемости через точки останова, в то время както же время вызывая эмоции и обеспечение приятный опыт.Мы будем исследовать идеи, введенные, чтобы раздвинуть границы типографского дизайна в Интернете и получить практические, тоже с упором на гибкой веб-типографики .

Во-первых, Основы веб-Отзывчивый Typography

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

Если вы заинтересованы в получении дополнительной информации о общей верстки для веб, и как подходить к определенным вопросам, many __38 | | 4__9 __13 | ресурсов | exist__9 __44 | | 5__9 чтобы помочьВы .

Кроме того, мой “ Отзывчивый Typography 6 ” разговора и глава Smashing Книга 4 7 , в котором я предлагаю повторного “ traditional” правила типографики и перевод их на язык CSS, должны помочь кикстарта любой стремящийся веб типограф, чтобы улучшить их игру Типография .

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

  • Обеспечение различных размеров шрифта для различных чтения distances, в настоящее время достижимой путем обнаружения форм-фактор устройства, используяmedia запросов.В долгосрочной перспективе, это, вероятно, не является идеальным —, то есть до тех пор, techniques__2 расстояние обнаружения чтение | | __13 8 не стал более реальным.В то же время, использование Размер Calculator 9 по Ник Sherman 10 и Крис Lewis 11 рассчитать физическийили воспринимается размер шрифта, когда факторинга в расстоянии чтения .
  • Поддержание совершенные пропорции в paragraph с буквой расстояние, расстояние между словом и свойств высоты строки для каждой точки. Всемирный Типография в demo 12 по Тим Brown 13 из Ницца Веб Type 14 является очень полезным инструментом, который можетпомочь вам экспериментировать с и настроить пункт пропорции соответственно .
  • Создать hierarchy использованием либо типографская шкала ( Модульная Scale 15 является полезным инструментом Тим Браун и Скотт Kellum __69 | 16 | __3) или отличаетсястили в то же размер шрифта — Например, прописные для h2, капители за h3 и курсив для h4 подзаголовков.Для получения дополнительных возможностей и идей на стайлинга подзаголовков, может я предлагаю вам прочитать __84 | Установка Подзаголовки С CSS __75 | 17 ” и исследовать примеры подзаголовков, установленных с CSS 18 .
  • Для небольших экранов, отступа абзацев и отдельная страница sections с пробелами.Для больших экранов, использование блочных пунктов и отдельных разделов страницы с графическими элементами (линии, формы, цвета) .
  • Использование сортовой fonts нормализовать оказания разных плотностей элементов изображения.Сорта шрифтов очень тонкие веса шрифта, используемые для компенсации различных чернил и бумаги качеств, а также для различных плотностей пикселей на экране.Этот метод подробно описан в iA __13 | 19 ‘ы статья “ Новый сайт с чувствительным Typography __19 | 20 .” Короче говоря, используются легкие сортадля низких точек на дюйм экранами и более тяжелых сортов для высоких DPI экранов, в то время как градиентные шрифты также компенсировать направлении различных суб-пикселей, между портретной и альбомной на мобильных и планшетных устройств .
  • Посмотрите на типа семей, которые имеют несколько оптических sizes 21 , и использовать соответствующие стили для основного текста, мелкого текста и отображения размеров.Например, Шрифт Bureau __35 | 22 , компания за современной семьи Бентон, делает многие семьи, как это с широким стилистическим палитры .
  • Использование различных widths в соответствии с шириной экрана (посмотреть, что происходит с подзаголовков на Бентон website 23 при изменении размера окна браузера).Например, использовать сгущенное шрифт для небольших экранов и более широкий шрифт для больших экранов настольных, так же, как на сайт брошюры для Input __52 | 24 (опять же, изменить размер окна).В случае с проектом Бентон, мы устанавливаем различные ширины шрифта вручную для каждого останова, но есть также решение для автоматической перекачки с помощью Шрифт-To-Width 25 (Шерман и Льюис), чтопринимает преимущество нескольких семей ширина типа, чтобы соответствовать части текста уютно в своих контейнерах .

    Вот еще один совет: если вы собираетесь использовать Грузию или Verdana на больших экранах, замените их Грузия Pro сгущенное или Verdana Pro Condensed 26 на мобильных экранах.Причина, почему ГрузияЗагущенные ширины Pro и Pro, Verdana хорошо работать при малых размерах, потому что они не очень конденсируется и, следовательно, все еще может быть читать удобно .

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

Шоу Не Tell

Webtype 27 поручил нам создать сайт Брошюра для Бентон Modern вскоре после Индра Kupferschmid 28 видел мою беседу о отзывчивый веб-типографики в Smashing конференциив Оксфорде.Резюме должно было демонстрации того, что может быть достигнуто typographically с универсальным типом семьи в сочетании с отзывчивым веб-типографики, используя в качестве много отзывчивых методы, как это возможно, по существу, внедрение в практику элементы, представленные и продемонстрировал в моей беседы.С Индра Kupferschmid в качестве главного ученого типа и Ник Шерман как бортовой директора по обеспечению качества, было, конечно, не будет никаких проблем с экспериментировать и расширять границы .

С самого начала мы хотели, чтобы пользователь опыт семейного типа путем разработки, а не только через полную страницу копии тела.Это, как говорится, в поиске подходящего метафоры, чтобы использовать, мы в конце концов остановились на создании две отличительные конструкций __49 | | в formal__9 __26 | 29 | и __30 в expressive __32 | | 30__9 ,Оба полностью реагировать, используя один и тот же HTML, и для всех намерений и целей демонстрации преимуществ разделения структуры от представления, так что не забудьте изменить размер браузера и проверить HTML и CSS .

Обучение О Typeface

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

  1. Во-первых, мы проверили все стили в больших и малых размеров, растяжения и сжатия во все стороны возможно.Мы использовали Чтение края оптического sizes __45 | | 31__9 (предназначенный для 9- 14-пиксельных размеров шрифта) в качестве подзаголовков, а также отображать оптических размеров (предназначен для заголовков) для основного текста.Мы хотели посмотреть, что может пойти не так, и вызов, предназначенный для использования каждого стиля.Тем не менее, решение, которое мы остановились на по-прежнему в значительной степени в соответствии с предполагаемым использованием для каждого оптического размера .
  2. Далее мы проверили, как различные стили себя в узкие колонки по сравнению с более широкими блоками текста.Комбинированные и обоснованные Вер левому краю.Плотно расположенные против слабо расстоянии .
  3. Наконец, мы проанализировали все глифы один за другим в поисках маленьких сокровищ.Помимо амперсанд — которая всегда очевидным выбором — еще один хороший кандидат был в верхнем регистре R .
An early stage prototype 32
Ранней стадии прототипа.( Просмотр большой version 33 )

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

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

.columns p {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}
.columns p + p {
   text-indent: 1.5rem;
}

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

@media only screen and (min-height: 25em) {

   @media only screen and (min-width: 40em) and (max-width: 59.9375em) {
      -webkit-columns: 2;
      -moz-columns: 2;
      columns: 2;
      -webkit-column-gap: 2.7em;
      -moz-column-gap: 2.7em;
      column-gap: 2.7em;
   }

   @media only screen and (min-width: 60em) {
      -webkit-columns: 3;
      -moz-columns: 3;
      columns: 3;
      -webkit-column-gap: 2.7em;
      -moz-column-gap: 2.7em;
      column-gap: 2.7em;
   }
} 

Проектирование Content

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

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

Срезы немного скучно, хотя. Иерархия и расположение subhead, интро пункт и колонны были быстро установлены с помощью правила объяснялось ранее, но что-то еще не хватает.Через некотороепроб и ошибок, мы решили отделить различные разделы с пунктирными границами, чтобы еще больше подчеркнуть мелкие детали в дизайне современного серии Бентон, и мы ввели знак параграфа § 6 (Alt на Mac), чтобы отметить разделы.Тем не менее, по-прежнему, что не был достаточно хорош, так что мы снова просмотров многочисленные глифы, чтобы найти подходящих кандидатов и для других разделов.Мы закончили с помощью § для “ О ” • для “ Оптические Размеры, ” курсивом я для “ Как использовать ” для “ Бонус Features” и * для “ Пары .” Некоторые изэти символы редко используется в веб-дизайне, так вводя их в качестве украшения чувствовал естественную .

Plenty of little details 35
Много мелких деталей.( Просмотр большой version 36 )

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

Первая версия спаривания образцов был установлен в Pinterest __23 | 37 -inspired колонны, как с остальными секциями.Тем не менее, мы имели необходимость изменить это — хотя бы немного — потому этот раздел не о Benton Modern, но и о его товарищей. Бентон Современный RE fonts 38 действительно здорово при небольших размерах, так представляя, как пар контрастных большие заголовки смысл.Выбор Индры спариваний работал очень хорошо, без многих дополнительных настроек.Только области, которые требуют особого внимания были нестандартные размеры для каждого headline, особенно если мы хотели заголовки, чтобы изменить размер с экраном .

Viewport ширина гладкого типа Scaling

Только единицы CSS, которые поддерживают плавный масштабирование vw (1% от ширины окна просмотра), vh (1% от высоты окна просмотра), vmax (1% от длинной стороны) и vmin(1% от короткой стороны).В результате CSS для одного заголовка состоит из трех деклараций шрифта не — значения в пикселях корень | ems__4 Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.