95% веб-дизайна составляет типографика

http://informationarchitects.jp/the-web-is-all-about-typography-period/
  • Перевод
95% информации на вебе — текст. Вполне логично, что веб-дизайнер должен получить хорошую подготовку в основной дисциплине формирования письменной информации, иными словами: типографике.

Информационный дизайн это типографика


В 1969 году, Эмиль Рудер, знаменитый швейцарский типограф, написал о современных ему материалах для печати то, что мы могли бы легко сказать о наших современных веб-сайтах:

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


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

Макро-типографика (общая структура текста), в отличие от микро-типографики (детальные аспекты шрифта и интервалов), охватывает многие аспекты того, что мы сегодня называем «информационный дизайн». Если можно так выразиться, информационные дизайнеры сегодня делают работу, которая типографы делали 30 лет назад:

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


Оптимизация типографики — оптимизация читабельности, доступности, удобства использования (в оригинале — usability, прим. переводчика), общего графического баланса. Организация блоков текста и сочетание их с картинками — не это ли то, что графические дизайнеры, юзабилити-специалисты и информационные архитекторы делают? Так почему же нет достаточного внимания к теме?

Слишком мало шрифтов? Разрешение слишком низкие?


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

Довод о том, что у нас не хватает шрифтов в нашем распоряжении столь же плох, сколько не относится к делу: В эпоху итальянского Ренессанса типографы имели в наличии лишь один шрифт, что не помешало им создать гениальные работы:



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

Выбор шрифта — не типографика


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

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

Представьте текст как пользовательский интерфейс


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



Наиболее известные примеры веб-сайтов, которые рассматривают текст как интерфейс: google, ebay, craigslist, youtube, Flickr, Digg, reddit, del.icio.us. Трудно оспаривать, что рассмотрение текста как пользовательского интерфейса является условием для достижения успеха. Успешные веб-сайты смогли создать простой интерфейс и хорошую айдентику одновременно. Но это другой вопрос.
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 27
  • +2
    Можно под кат. Читаю с интересом. Продолжения в том же духе тоже хочется )
    • 0
      Хорошо, чуть позже попробую, вроде у автора есть вторая часть статьи ;)
      • 0
        Ещё от себя добавьте, пожалуйста, что желательно, чтобы текст измерялся в em, а то на ноутбуке замучали уже сайты со шрифтами в 12-14px, и таких очень много.
    • +4
      Пользы от статьи не много, лозунги конечно, но качественные. Необходимо сразу закреплять визуальными примерами, в этом случае советую ilovetypography.com
      • –2
        Лозунги, пусть и качественные, не несут знаний.

        Ещё не так давно повсюду были размещены изречения вроде «СССР — оплот мира!», «Слава труду!» и т.д. Много ли от них было пользы, кроме пропагандисткого промывания мозгов?
        • 0
          > Много ли от них было пользы
          очень много. и Ваши родители Вам это подтвердят.
      • +1
        Такое надо периодически перечитывать.
        • 0
          Subtraction — действительно шикарный пример.

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

          Пишите еще, это актуально и интересно!
          • +4
            ebay — плохой пример
            • +9
              Статья имеет декларативный характер в стиле «Ура, товарищи!» и, на мой взгляд, не содержит в себе практической ценности. Большая часть её недостатков обусловлена сомнительным качеством оригинала, но и перевод внёс ряд огрехов. В том числе, связанных с незнанием общепринятой в отрасли терминологии, что для автора статьи по типографике вряд ли можно считать приемлемым. Итак, замечания по тексту:

              При переводе слово typography упорно интерпретировуется как типографика, а typographer — типограф. Русская терминология шире английской и различает шрифтовиков, печатников и наборщиков, которых буржуи могут называть одним словом. Поскольку автор при переводе прикрылся общими терминами, такой перевод не раскрыл очевидной для англоязычного читателя проблематики.

              «В эпоху итальянского Ренессанса типографы имели в наличии лишь один шрифт».

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

              Если мы обратим внимание на разворот из старинной книги, приведённой выше, то легко сможем обнаружить как минимум три разных антиквенных шрифта: прямой светлый, наклонный и капитель.

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

              Призыв представить текст как интерфейс имеет не больше смысла, чем магический список топовых сайтов от Гугла до И-бэя, которые якобы ему следуют. Особенно, если учесть, что переводчик проигнорировал ключевое слово «unornamental sites» и ошибочно перевёл фразу «Treat text as a user interface».

              Что такое «активное белое пространство»? Что такое «дозированный цвет»? Таких терминов нет и не было, над переводом нужно было поработать более глубоко, а не пытаться на-гора выдать буквальный перевод.

              И неплохо бы указать ссылку на оригинал informationarchitects.jp/the-web-is-all-about-typography-period/

              Интересно было бы увидеть вторую часть статьи, т.к. источник, указанный мною выше был переведён полностью.
              • +1
                подпишусь под каждым Вашим словом.
                • 0
                  Пожалуй тоже (кроме слова «мыло» в конце первого абзаца).
                  • +1
                    «мыло» нужно читать как «было». подписывайтесь :-)
                • 0
                  Насчет незнания терминологии — это вы зря, я её знаю отлично. Но вы правы, что видимо перевод довольно таки быстрый и в некоторых деталях я, видно, оступился.
                  Вы так и не предложили своего варианта перевода фразы про типографов Ренессанса.
                  Хотелось бы узнать, как вы перевели бы то, что я перевел по вашему неверно.
                  Спасибо за комментарий, он очень важен для меня, так как я первый раз публикую перевод, поэтому для меня все эти замечания на вес золота.
                  А про ссылку на оригинал — я её указал, в специально предназначенном поле, это же перевод ;)
                  • 0
                    Вы уж извините, ничего личного. Выводы я делал на основе текста топика. То, что топик переводной — я на ночь глядя и не заметил.

                    Предложения по переводу направлю вам сегодня вечером в хабрапочту, на работе обстановка не располагает к обдумыванию таких деталей.
              • +2
                Информационный дизайн это типографика

                Чуть не забыл: между информационным дизайном и типографикой нельзя ставить знак равенства. Информационный дизайн — более широкое понятие и включает в себя, среди прочего и типографику.
                • 0
                  я согласен с подавляющей частью написанного, но вынужден констатировать весьма печальный факт: этот пост ничему не учит (кроме, пожалуй, любопытного, совершенно верного, но не раскрытого «Представьте текст как пользовательский интерфейс»)

                  очень надеюсь, что будущие посты-переводы будут содержать действительно ценную и познавательную информацию о веб-типографике и информационном дизайне.
                  • 0
                    Не учит, но заставляет заострить свое внимание на подобной проблеме. Так как проблема существует, и большинство дизайнеров неумело используют те преимущества, которые предоставляют им шрифты. Проблема кроется не только в головах, но еще и в прикладных программах, которые используются в работе. Пока шрифтами занимались только шрифтовики, печатники и типографы, не было проблем, которые появились с появлением компьютера. Если тот же фотошоп позволяет с десятыми долями пиксела варьировать межбуквенный интервал, то как это же применить в HTML? Ну объясните уж наконец дизайнерам, что браузер не может так точно отрендерить шрифт. Нет, им главное, чтобы на макете было все ровно, пусть для этого даже надо будет использовать шрифт в 14,52 пикселов.

                    А отключка… Меня всегда приводит в бешенство, когда я вижу это на сайтах. Особенно, когда между словами появляются «дырки». Я понимаю, что в газетах, журналах и книгах все смотрится замечательно, но на веб-страницах — просто убожески.

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

                    Второй аргумент не намного лучше. В начале качество печати наборными буквами было куда хуже, чем то, что мы видим на экране в наши дни. Что еще более важно, если обращаться с ними профессионально, экранные шрифты станут куда более хорошо читаемыми
                    Да, сначала было все плохо, но то, что мы видим в книге — всегда будет лучше, чем то, что увидим на экране. Во-первых, не стоит путать книжную типографику с компьютерной. То же самое сглаживание, размеры в пикселах и прочее — в книжной печати такого нет и никогда не будет. В XP (а на нем сейчас еще очень много юзеров сидит) отключено по умолчанию сглаживание, что уж тут говорить о том, что на мониторе шрифты смотрятся лучше… Куда уж там… До сих пор в распоряжении веб-технолога (не дизайнера) нет вменяемых опций для форматирования. Хотя уже в спецификации CSS 2 есть намеки на это, но использовать в повседневной работе это глупо, так как использование древних браузеров типа IE не даст никаких преимуществ в этом. Я говорю конечно не о параметрах абзаца и о размерах шрифта, а о более специфичных свойствах. Если они и заработают в большинстве браузеров, то это будет еще не скоро.
                    • +1
                      Хороший дизайнер не будет делать шрифт 14,52, поверьте, у нас тоже есть правила относительно размеров шрифтов. Но технологам несомненно бывает очень трудно передать задумку сухими средствами html+css.
                      Извините, но не отключка, а выключка. Эти «дырки» называют «реками» или «коридорами». А все из-за того, что на вебе выключка по формату (justify) недопустима, только флаговый набор. А из-за выключки при отсутствии переносов получаются коридоры, разрядки и прочие ужасы.
                      Со сглаживанием у Виндовс вообще не все хорошо. Хотите насладиться — ставьте Сафари и любуйтесь. Вот там шрифты великолепны. Стандартный рендеринг шрифтов хромает, особенно в крупных кеглях (появляются «зубцы»).
                      «Сначала»=«на заре типографики», сейчас, естественно, печатные издания намного красивее, чем экранные.
                      На счет CSS вы тоже правы, очень многих возможностей в них нет.

                      • 0
                        Точно выключка, спутал, спасибо.
                        • 0
                          А почему не использовать Justify вместе например с предварительно расставленными мягкими переносами (soft hyphen) и css hyphens: manual? Не везде, конечно, но для длинных статей на смартфонах, помоему, решение вполне неплохое. Вопрос поддержки можно оставить за кадром, это дело времени.
                    • +2
                      «Выбор шрифта — не типографика».

                      Я не согласен с этим пуктом. Выбор шрифта (а обычно набора шрифтов) обусловлен тем, что именно и в каких условиях будет подано, и часто именно на этом строится макет (потому что каждый шрифт даёт нам свои особые плотность, читаемость, акценты и прочие свойства).
                      • –1
                        Как же так «этот текст ничему не учит»? Учит. Начиная с первого абзаца (и кончая им). Дизайнер должен получить подготовку по многим дисциплинам и по типографике в том числе, иначе говоря. В этот момент дизайнер должен был встать и идти уже учиться, если он умудрился ещё этого не сделать.
                        • +2
                          Мне например очень нравится как оформлены статьи в Smashing Magazine.

                          На приведенном листе кстати я вижу минимум два шрифта :)
                          • 0
                            Люблю деловито-обстоятельный слог Рудера.
                            • 0
                              Да, и Брингхерст тоже хорошо пишет.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.