Главная → Вебдизайн → by

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

Имея возможность устанавливать разборчивыми копия тело абсолютной необходимостью, и мы прошли долгий путь с веб-типографики с рассвета веб-дизайна.Тем не менее, я чувствую, что мы позволили отсутствие разнообразия до возникновения веб-шрифтов, чтобы ослабить наше творчество теперь, тысячи веб-шрифтов на нашем 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 ,в которой я предлагаю повторного “традиционные” правила типографики и перевод их на язык CSS, должны помочь кикстарта любой стремящийся веб типограф, чтобы улучшить их игру Типография .

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

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

Шоу Не Tell

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

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

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 для одного заголовка состоит из трех деклараций шрифта не — значения в пикселях Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Вебдизайн → by

Comments are closed.