Типографика на Вебе

http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
  • Перевод
Типографика на Вебе прошла длинный путь с тех пор как Тим Бёрнерс-Ли нажал на рубильник в 1991-ом году. Давным-давно, во времена IE 1.0, выражение «хорошая типографика на Вебе» было, скорее, оксюмороном (сочетанием противоположных по значению слов). Многое успело измениться. У нас есть не только браузеры, которые умеют показывать картинки (ах!); у нас есть возможность оживлять наши веб-страницы, используя великолепную типографику.

image


Во-первых, следует заметить, что Типографика — это не только умение выбрать шрифт или отличить одну гарнитуру от другой. Как показали последние эксперименты, дресированные мартышки безошибочно распознают Гельветику в 90% случаев.

image

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

Контраст


Бледно-розовый текст на бледно-синем фоне может удачно смотреться на вашей футболке, но читается он плохо. Текст существует, чтобы его читали, так что убедитесь, что он достаточно хорошо контрастирует с фоном. Если вы сомневаетесь насчёт контраста, сделайте скриншот страницы и в любом графическом редакторе превратите его в изображение с градациями серого (grayscale). Вы легко увидите, хватает ли контраста. Как пишет Роберт Брингхёст, виртуозный типограф, типографика существует, чтобы проявлять уважение к содержимому. Следуем ли мы этому совету, проектируя веб-страницы так, что текст — само содержимое — трудно прочитать?

image

Лично мне не нравится читать длинные фрагменты инверсированного текста (например, светлый текст на тёмном фоне); часто ли мы видим, чтобы так оформлялись книги? Такой подход может быть очень уместен для коротких отрывков текста, но мне кажется, что читать подобный текст очень тяжело даже менее минуты.

Размер


С рождением Веб 2.0 я заметил довольно раздражающий тренд: мелкий шрифт. Я даже писал создателям сайтов и доброжелательно предлагал им увеличить размер шрифта по умолчанию. Я получал разные ответы — от «мужик, купи очки» до благодарных «спасибо, я даже никогда не задумывался, что шрифт у меня на сайте может быть слишком мелким для читателей». Я даже слышал следующий аргумент в защиту крошечного текста: «он соответствует моему минималистичному дизайну». Куда вероятнее, что он отражает маленькое кое-что другое. Если Супермен и Зоркий сокол — не единственные ваши читатели, то маленький шрифт просто не подходит.

image

Не делайте основной текст меньше, чем 12 px; если возможно — увеличивайте его. Помните: то, что выглядит разборчиво на 65’’ HD плазме, может выглядеть не так хорошо на ноутбуке с экраном в 13’’. Если у вас есть сомнения — увеличивайте текст. На ILT размер основного текста равен 16 px.

Иерархия


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

image

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

Пространство


Дайте шрифту дышать. Не бойтесь оставлять пустое пространство на страницах. Это свободное место (white space) поможет сосредоточиться на тексте — именно текст говорит громче всего, так что пусть его услышат. Далее, помните о CSS свойстве line-height; хорошее и проверенное правило — ставить интервал между строками как минимум в 140% от размера текста (помните, что я пишу о типографии на Вебе). Хорошие дизайнеры шрифта вкладывают неимоверные усилия в создание мелкого (микро) свободного места, которое живёт в самом шрифте. Они проводят бесчисленные часы, пытаясь достичь баланса между чёрнотой шрифта и пустым пространством, которое его окружает. Точно так же и мы должны потратить время и обдумать крупное (макро) пустое пространство — «пустоты», которые придают форму блокам текста.

image

Заключение


Помните: это не правила, а рекомендации. Тем не менее, следуйте им — контраст, размер, иерархия, и пространство — и качество вашей типографики поднимется, как суфле Гордона Рэмзи. Кстати, я пошутил насчёт мартышек.

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

Советую посмотреть и оригинал: в комментариях развернулась интересная дискуссия.
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 41
  • +26
    Как показали последние эксперименты, дресированные мартышки безошибочно распознают Гельветику в 90% случаев.
    На иллюстрации, следующей за этой фразою, изображён (по крайней мере, сейчас) орангутан, а вовсе не мартышка. Полагаю, что мартышки безошибочно распознали бы и это обстоятельство.
    • +2
      Это самка орангутана. Ее зовут Гельветика.
      • +6
        Самец это, наросты же.
        (Нет, я тоже не специалист по орангутанам)
        • +2
          У вас скролл коммента! =O

          • 0
            Видимо, это не у меня скролл коммента, а у Вас Internet Explorer :) Вижу такое только в нём, в других браузерах не наблюдаю.

            P.S.: Причиной тому двойной тег sup, употреблённый взамен font size, который почему-то не работает.
            • +1
              Не, это под оперой, надо бы написать в саппорт :)
              • 0
                А, ясно, десктопной Оперы как раз у меня не было, только мобильная, на ней всё норм тоже. Ну, причину я указал — можете забагрепортить.
                • 0
                  **Вернее Mini, а не мобильная.
        • +5
          Я кошку Гельветикой назвал =)
      • +2
        … например, заглавные буквы для заголовков...

        Ну вот, рекомендуют то, что делать нежелательно. :(
        Для аббревиатур допустимо, а для обычных слов — нет.
        • 0
          Ошибочка. Для аббревиатур нужно, а не допустимо.
          • +1
            > Ну вот, рекомендуют то, что делать нежелательно
            Обоснуйте.
            • +1
              Не хочу начинать холивар, но я не поддерживаю использование прописных букв там, где это не нужно.
              Здесь, например, всё сказано за меня.
              • +2
                Заглавные буквы трудно читать. А вот короткие заголовки, скажем до одного предложения и до пяти слов в нём, вполне себе можно оформлять таким образом.
                • 0
                  Вопрос в том, что в статье это указано как рекомендация, причем без характеристики длины заголовка. Я тоже считаю нежелательным набирать заголовок прописными, потому что это противоречит правилам русского языка, а ТАКЖЕ СБИВАЕТ с остального текста. Заголовки прекрасно выделяются кеглем. Исключением признаю заголовки обособленные от текста.
                  • 0
                    Можно сказать проще: строчные быстрее читаются глазом. Как вы и сказали, лучше просто задать им кегль покрупнее.
            • 0
              Это западная традиция
              • 0
                Западная традиция, насколько я помню, говорит о первой заглавной букве каждого слова в заголовке. Весь заголовок, согласно ей, заглавными писать не нужно.
              • 0
                Есть small caps, ими, я думаю, вполне можно оформлять короткие заголовки
              • +16
                Типографика на Вебе прошла длинный путь


                Вот вам график, где показано, какой путь прошла типографика в веб дизайне:

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

                  Есть подозрение, что этот график говорит вот о чём: с 1995 огромное количество людей, далёких от типографского дела получила возможность оформлять тексты. Не желая разбираться в истории вопроса, некоторые дизайнеры заявили, что Интернет — «терра нова», пользователи интернета — «хоминес интернети», и, вообще, надо срочно всё придумать заново.
                  • +1
                    К тому же этот график котируется по 2011 год в обоих случаях. Так что типографике на таком графике никогда не вырасти ни на сантиметр. Хитрый приём :)
                • +1
                  Ну вот, положили все картинки.
                  • +1
                    контраст, размер, иерархия, и размер

                    — имелось в виду «пространство»?
                    • +3
                      Пустой текст. Ни о чем
                      • +6
                        Уточнения насчет веб-типографии:

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

                        1) Вторая ошибка типографов — попытка подменить понятие «сделать так чтобы везде выглядело одинаково юзабельным» понятием «сделать так чтобы везде выглядело одинаково».

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

                        3) Красиво выглядящий текст != Удобочитаемый текст. Особенно это касается технических текстов, исходных кодов и прочих замечательных вещей, где структура должна визуально отслеживаться, зачастую даже в ущерб внешней красивости.

                        4) Попытка сделать текст слишком контрастно-выделяющимся. Люди иногда не только читают текст, но и вчитываются (см. выше про технические тексты), и очень нехорошо когда текст «бьет по глазам» уже после получаса вчитывания.
                        • +2
                          А можете смысл ошибок раскрыть? Иначе ощущение, что вы сделали надстройку в виде «правил» над пустяковыми проблемами.
                          0) Вы про хинтинги, клир-тайп и цветовые модели? И что, сделаю я как напечатанный в книжке, что плохого в этом будет?
                          1) Поясните примером, пожалуйста, неясно, о чем вы.
                          2) Верстка и дизайн — согласен, а типографика чем вам не угодила? Что конкретно вы имеете ввиду под типографикой? Я вот считаю, что смело могу делать как основной текст, так и заголовки одинаковыми и для FullHD, и для QVGA. В чём я неправ?
                          3) Если для меня красота это в первую очередь удобочитаемость, то Красиво выглядящий текст = Удобочитаемый текст. Хотя стоит отдавать себе отчет, что это вообще ненаучные понятия, и точных определений им не дать. Скорость чтения — другое дело, но она опять-же от привычки зависит.
                          • +1
                            0) Слишком разный носитель. Монитор также отличается от книги как надпись в книге от надписи например на асфальте.
                            1) О попытке сделать то, что будет одинакого выглядеть везде (на бумаге, на большом мониторе, на маленьком экранчике,...). Зачастую этим процессом настолько увлекаются, что забывают о главном — о хорошем восприятии.
                            2) Один и тот же шрифт может восприниматся очень по-разному на большом мониторе и на экранчике кпк. Многие шрифты, красиво смотрящиеся на мониторе практически не читаемы на кпк. А кпк-шные шрифты на большом мониторе могут смотреться кондово.
                            3) Если это так, то рад за вас. Только так считают не все. Более того, очень многие типографику «тестируют» на бредотекстах типа «lorem ipsum», яндекс.весна и пр. А они очень далеки от реального технического текста, в первую очередь за счет структуры.
                            • +2
                              Ок, спасибо )
                              0) Так и что? Я вижу проблему лишь в том, что монитор резко сужает возможности отображения и настройки цветности, но почему-же не стараться от этого сделать текст как в книге? Почему попытка сделать «чтобы текст на экране выглядел как напечатанный в книжке» — «чудовищная ошибка»? (хочется понять, в чём ошибка, в каких именно деталях)
                              1) В каком плане «выглядеть одинакого»? Я правильно понимаю: если мой текстовый слэб-сериф хорош в тексте в листовке, на мелком кпк все-равно лучше использовать читабельный гротеск? Вы об этом? То есть читабельность и читаемость важнее стиля и узнаваемости?
                              2) Серьёзно, вы можете привести пример шрифта, который по-разному выглядит на разном разрешении экрана? Мне казалось, технология рендеринга шрифта одинакова, независимо от экрана (если брать дисплеи стандартных разрешений от 256 цветов). Или вы о сочетании шрифт-формат? Вообще не в курсе, чтобы было разделение на кпкшные и не-кпкшные шрифты. Если говорить о спец-дисплеях, другое дело.
                              3) Полностью согласен, ситуацию надо менять, чем и занимаюсь )
                              • 0
                                0) Монитор вовсе не сужает возможности отображения, а скорее имеет свои специфические возможности и ограничения отображения. И их следует учитывать. Если их правильно учитывать текст на мониторе можно будет сделать читабельным без напряжения. О чем, собственно я и говорю. Поясню на очень простом примере. Что такое белый лист с точки зрения отображения — это поверхность автоматически адаптирующаяся под освещенность помещения, а что такое белый фон окна в мониторе — это по сути люминесцентная лампа размера 34x27 см которая фигачит вам прямо в глаза во всю мощь вне зависимости ни от чего (я например, очень часто убавляю яркость монитора, потому иначе глаза очень сильно устают уже через час).

                                1),2) Да, я именно об этом. Все-таки надо заботиться о глазах пользователя, пусть это даже и будет ценой некоторого «гротеска». Всте-таки в тексте самое главное, что его будут читать, а для этого текст должен быть читабельным. Кстати, «технология рендеринга шрифтов» тут не при чем. У монитора и маленького экранчика разный размер пикселя, а это накладывает отпечаток. Я уже не говорю о такой «интересной особенности» мобильных устройств, что информацию с их экрана будут пытаться читать при разных освещениях.

                                P.S.: Кстати, у меня только что был «живой пример» как ушлый народ пользуется связью типографики и читабельности текста: Еду я сегодня с работы в метро и вижу напротив меня висят в вагоне две рекламы. Казалось бы ничего интересного, но вспомнил о нашем разговоре про типографику и обратил на них внимание. На одной из них была сноска «со звездочкой» внизу из мелкого текста. У второй же просто была область некрупного текста скраю. Причем, если сравнивать чистые «размеры» первого и второго шрифтов, то видно что они особо по размеру не отличались. Однако в глаза сразу бросился «хитрый трюк» выполненный за счет «хитростей типографики»: Во второй рекламе кусок небольшого текста про «натуральность продукта» легко и ненапряжно читался даже не вставая со скамейки и не напрягая зрения, однако при этом в первой рекламе чтобы успешно прочесть мелкий текст внизу «стоимость сообщений уточняйте у оператора», надо было как минимум встать, подойти и прочитать в упор. Вот вам «волшебство типографики» в действии :)
                                • 0
                                  0) Это да, цветовые модели понятное дело. Мне просто интересно, в чём же разница. Вот я достал мелки, пошел и на асфальте гельветикой написал что-то о хорошем дне. Вот достал маркер, и написал футурой на стене какое-нибудь смешное замечание. Вот прогаю мобильный сайт, и ариал выбрал для основного текста. Вот делаю документ, и выбрал гарамонд для набора. А в чём разница, так и не смог понять.
                                  Может, в той детали, что в типографике цветность регулируется тонким изменением светлоты шрифта, а на мониторе — выбором именно цвета шрифта? Или в том, что на мониторах советуют черный делать в 10% яркости вместо 0%, а белый делать в 95% яркости, вместо 100%?
                                  2) О ppi — да. Если мы задаём размер шрифта не в пикселях, то выглядеть по-другому будет, вы правы. Важно, кстати, вот ещё что (как изменится типографика): формат кпк вертикальный и узкий, и с рекомендацией на читабельность интерлиньяж можно безболезненно уменьшать. А вот на крупных экранах строчки длиинные, интерлиньяж надо делать больше, как и шрифт.

                                  Просто к чему все мои вопросы были :) Если пишите «негативные» правила (т.е. ошибки), то поясняйте так-же позитивным примером, как следовало делать. Иначе неясно, что имеется ввиду под «не делай так»)
                        • +2
                          … (например, светлый текст на тёмном фоне); часто ли мы видим, чтобы так оформлялись книги? Такой подход может быть очень уместен для коротких отрывков текста, но мне кажется, что читать подобный текст очень тяжело даже менее минуты.

                          Это дело привычки и/или личных предпочтений. Книги не оформляются так совсем по другой причине — стоимость краски.
                          • 0
                            Ну наконец-то дельная статья именно по типографике, а не правилам оформления текста!
                            • +11
                              [grammar nazi mode]
                              Может все-таки «В вебе»? Мы ж не на деревне. Типографика, конечно, на страницах, но внутри сети.
                              [/grammar naz mode off]
                              • 0
                                Я даже подумал, что автор Мицгол, но не угадал.
                                • 0
                                  +1

                                  Между вариантами «на паутине» и «в паутине» выбор как бы очевиден.

                                  Хотя я не дизайнер и не типограф, так что не знаю — может это отраслевое арго? :) Ну типа как «осУжденный» у ментов, «клапанА» у бульдозеристов и «Алкоголь» (с ударением на первый слог) у врачей.
                                • +2
                                  Можно еще к этим четырем прописным истинам (которые в той или иной мере уже много раз были описаны на Хабре, ибо дальше вот таких вот аксиоматичных банальностей авторы зачастую не заходят… видимо, боятся делиться своим драгоценным опытом) стоило бы вспомнить еще десятка с три подобных важных правил. Например, о межстрочном расстоянии, о ширинах текстовых колонок, об отступах между заголовками и текстами, о кернинге и трекинге и многих прочих вещах. Поскольку в приведенных выше примерах ничего это не учтено, и потому они выглядят довольно уныло, несмотря на контраст, иерархию, размер и пространство. Текст — очень тонкая субстанция, его надо чувствовать. Четырьмя базисными правилами, которые должен знать даже непосвященный, текст не сделаешь идеальным.
                                  • 0
                                    Не хотите рассказать, как сделать текст идеальным? Или может ссылкой поделитесь или названием книги?
                                    • +1
                                      Извольте.
                                      www.eldesign.ru/book/typo/typo01
                                      Джеймс Феличи «Типографика: шрифт, верстка, дизайн»

                                      Стандарт де факто для любого, работающего с типографикой. Хоть и написана для принт-дизайнеров, процентов 80 пригодно и для веб-типографики. Читать в обязательном порядке от корки до корки. После прочтения вопросов о том, как сделать текст идеальным, останется меньше. А если и останутся, то по существу. И без банальностей.
                                      • 0
                                        Великолепная книга, все эти десятки вопросов в ней хорошо разжеваны с примерами и обоснуем. )
                                        Я считаю, ее (или подобные хорошие книги) должны прочитать все веб–дизайнеры/верстальщики.
                                  • 0
                                    «Заключение
                                    Помните: это не правила, а рекомендации.»

                                    Какой-то непоследовательный комментарий от переводчика под статьёй:
                                    «Однако эти простые правила не соблюдаются многими, и я не считаю лишним напомнить их тем, кто сегодня делает Веб.»

                                    Так всё-таки правила или рекомендации?

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