Веб-типографика сегодня. Часть I

    Часть IЧасть IIЧасть IIIЧасть IVЧасть V — Часть VI

    Часть I



    Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

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

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

    Но давайте разберём всю эту ситуацию с самого начала.

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

    Times New Roman В качестве стандартного шрифта, как правило, использовался шрифт с засечками (Times), причём достаточно крупного кегля, чтобы на тогдашних мониторах текст читался легко с очень низким разрешением и сильными искажениями вследствие выпуклости поверхности экрана. В разных операционных системах этот шрифт был реализован по-разному.
    Лично мне кажется, что версия Microsoft, названная Times New Roman, которая вошла в состав операционных систем Windows (и поныне входит), оказалась наихудшей, так как мелкий текст (в HTML тэг и тем более ) оказывался практически нечитаемым.

    Жуть! И это любимый Самизнаетекем Times New RomanПри отсутствии антиалиасинга (алгоритма экранного сглаживания) засечки-серифы у букв слипались в какую-то невообразимую кашу, и практически невозможно было что-либо разобрать. Да и в крупных размерах ( и выше) шрифт выглядел весьма уродливо. Курсивные и жирные начертания у гарнитуры не отличались особым изяществом. Немногим лучше дело обстояло в системах Unix и MacOS. Наилучшим вариантом казалась реализация в ныне заброшенной системе BeOS, но здесь, скорее всего, сказалось наличие сглаживания шрифта. И сегодня там, где применяется Times New Roman, нередко получается нечто совсем невообразимое.

    Arial или НедоГельветика Впрочем, броузеры того времени позволяли принудительно выбрать в качестве шрифта по умолчанию любую установленную в системе гарнитуру. В Windows можно было использовать помимо антиквенного Таймса гротесковый шрифт Arial (в определённой степени — не самая удачная переделка легендарной Гельветики), моноширинный Courier и полурукописно-насмешливый ComicSans. Читаемо?И если Courier оказался весьма удачным вариантом для отображения программного кода (этот шрифт и поныне является фаворитом в программистской среде и используется по умолчанию в большинстве современных сред программирования), то Arial лишь немногим улучшал ситуацию по сравнению с Times New Roman. В системах Unix использовался шрифт Helvetica (более-менее близкий к оригинальному шрифту от Linotype). А у пользователей продукции Apple в ходу была гарнитура Geneva.

    С развитием языка HTML к середине 90х появилась возможность задавать не только размер, но и конкретную гарнитуру посредством параметра . Это повлекло за собой ну не то что бы революцию, но уж точно повсеместное увлечение насильственным использованием конкретного шрифта. Впрочем, дизайнеры, которые стали писать что-то вроде , быстро обнаружили, что все предполагаемые красивости реализуются только на их собственных компьютерах, в то время как подавляющее большинство посетителей сайта видят всё совершенно иначе. При отсутствии указанного шрифта используется гарнитура по умолчанию, и тщательно вырисованный в табличной вёрстке сайт рассыпается в виде какой-то нелепой кучи разрозненных блоков. В спецификацию HTML были внесены корректировки, благодаря которым появилась возможность указывать несколько шрифтов и объединяющее семейство на то случай, если конкретного шрифта в системе не окажется. Например, можно было написать так: и быть уверенным, что на разных компьютерах нужный текстовый блок будет выглядеть более-менее одинаково, поскольку все указанные шрифты входят в стандартные комплектации наиболее популярных операционных систем, а если вдруг по какой-то причине такового шрифта не окажется, браузеру следует использовать любой назначенный по умолчанию шрифт из семейства гротесков (sans-serif). Всего предполагалось семь таких семейств: monospaced (моноширинные шрифты для отображения программного кода, например: Courier), serif (шрифты с засечками, например: Times), sans-serif (гротескные шрифты без засечек, например: Arial, Geneva), cursive (рукописные шрифты, например: ZapfChancery), fantasy (декоративные шрифты, например: ComicSans), symbol (шрифты для определённых символов, например: ZapfDingbats) и специальный класс other (все остальные шрифты, например: техногенные, гранжевые, готические и т.п.). Все семейства можно было настроить под конкретные случаи. Например, вместо Courier назначить MonoCondensed, и тогда всё, что предполагается к отображению моноширинным шрифтом, будет выполнено с помощью MonoCondensed.

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

    Такое было в конце 90-х...

    На рубеже веков в моду вошла пиксельная графика и минимальные размеры шрифтов, граничащие с нечитаемостью. Поэтому вполне можно было встретить конструкцию вроде . И как бы не пытался рядовой посетитель сайта со средним типом зрения увеличить шрифт в броузере, ему всё равно приходилось вчитываться в мелюзгу, набранную в крошечном размере в 9 пикселей. На старых мониторах с разрешением 800х600 это выглядело ещё более-менее сносно, а вот на более современных дисплеях с разрешениями 1024х768 и выше подобные вещи читать было крайне сложно. Кстати, возможно поэтому многие популярные в те годы сайты с минимизированной графикой и малюсенькими шрифтами ныне в большинстве своём мертвы или доживают последни дни:
    Вот такая судьба ожидала многие модные сайты начала XXI века...

    В 1996 году были разработаны и включены в состав Windows новые системные шрифты Verdana, Tahoma и Georgia.
    Со временем эти шрифты вошли во все современные операционные системы. Не последнюю роль в этом сыграла резко возросшая популярность этих шрифтов среди веб-девелоперов.
    Практически все «модные» сайты конца 90-х и начала 2000-х создавались исключительно с помощью Tahoma или Verdana. Использование «устаревшего» Arial воспринималось как дилетантство и старомодность. Действительно, в некрупных кеглях (даже вплоть до кеглей в 10 или даже 9 пикселей) эти гарнитуры читались гораздо лучше, хотя в больших размерах Arial по-прежнему смотрелся лучше. Со временем, Verdana и Tahoma не раз подвергались критике со стороны дизайнеров. Оказалось, что Verdana не совсем корректно отображает некоторые знаки, у шрифта слишком тяжеловесное жирное начертание и не очень приятный курсив. А у Tahoma курсивного начертания не было вовсе, нередко буквы слипались между собой, что затрудняло чтение текста, а в крупных кеглях жирное начертание не выглядело достаточно жирным. К тому же на печати оба шрифта смотрелись далеко не идеально. Впрочем, эти нисколько не снизило популярность этих двух шрифтов в стане веб-дизайнеров до сих пор.

    Georgia!
    Гарнитура Georgia (разработана Mattew Carter в 1993 г.) оказалась намного более удачной и послужила великолепной заменой неказистой Times New Roman.
    Шрифт выглядел более органично, округло и лучше воспринимался на экране. У шрифта очень удачная реализация курсива и жирного начертания. Сегодня, если предполагается создание сайта в канонах классической типографики, в духе вёрстки строгих деловых изданий, используется как раз гарнитура Georgia, которая одинаково хорошо смотрится как в мелких, так и в крупных кеглях, на мониторах с любым разрешением, а также как с применением сглаживания, так и без него. Впрочем, и у этого шрифта есть свои недостатки. Например, довольно архаичная «прыгающая» манера исполнения цифр (минускульные цифры — некоторые отображаются в размер с буквами, другие выступают сильно вниз или вверх от базовой линии) кому-то может показаться необычной и стильной, но в большинстве своём вызывает некоторые трудности восприятия у рядового читателя сайта. Georgia, будучи серифным шрифтом, не очень хорошо воспринимается при написании «вывороткой» (т.е. светлым по тёмному). А благодаря своей округлости шрифт оказывается гораздо менее компактным, нежели пресловутый Times: на одной экранной странице с Georgia помещается гораздо меньше информации, нежели чем с другими шрифтами, что не очень выгодно для различного рода порталов и интернет-магазинов. Наибольшую популярность Georgia сегодня обрела в блогах и социальных сетях, где не столь важна компактность и максимальная информативность, сколько важно удобство для неспешного чтения, аккуратность и ненавязчивость — дизайн ни в коем случае не должен довлеть над контентом.



    С дальнейшим развитием языка HTML и спецификаций CSS появлялось всё больше и больше возможностей по организации контента без привлечения громоздких структур и жёстких определений размера шрифта. При этом по-прежнему оставалась возможность гибко управлять типографикой на странице. Чем тут же стали пользоваться профессиональные дизайнеры, всё реже и реже прибегая к внедрению изображений для отображения текстовых заголовков и названий рубрик. Со временем разрушились и стереотипы о том, что для чтения с экрана годятся лишь шрифты без засечек, в то время как в печати в качестве наборных гарнитур в журналах и газетах используются исключительно антиквенные гарнитуры вроде Times. Во многом определяющую роль здесь играют два немаловажных фактора.

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

    Продолжение следует...
    Поделиться публикацией

    Похожие публикации

    Комментарии 41
      +1
      Спасибо, было интересно почитать.
        +9
        Пока еще не разобрался тут со всякими кармами, поэтому примите мое бескрайнее уважение на словах. Статья просто супер. С нетерпением жду продолжения.
          +2
          Разбирайтесь, но не увлекайтесь ;)
          0
          отлично написано, на одном дыхании прочитал.
          передал нашим дизайнером чтобы не было вопросов и споров "а мы почему мы не можем загрузить это шрифт?", "почему у меня в фотошопе красиво, а на сайте не красиво" и т.д. (:
          ждем пролжения.
            +7
            «Довольно архаичная «прыгающая» манера исполнения цифр» называется минускульными цифрами. Например, Роберт Брингхерст в своей книге «Основы стиля в типографике» советует их использовать. По большому счету, это дело вкуса, но я, например, соглашусь, ведь у русских строчных букв меньше верхних и нижних выносных элементов, а минускульные цифры за счет своей «прыгающей» манеры несколько оживляют текст.

            Кстати, в указанной выше книге для русского издания специально изготавливался комплект минускульных цифр для наборных гарнитур Charter и Syntax.
            • НЛО прилетело и опубликовало эту надпись здесь
                +1
                Вы ошибаетесь, всё происходит с точностью до наоборот — минускульные цифры используются для набора чисел в блоке текста, когда текста много, а чисел — мало. Например, в книге по истории, где периодически встречаются даты. В акциденции минускульные цифры могут быть менее уместны.
                • НЛО прилетело и опубликовало эту надпись здесь
              –1
              Ждемс продолжения...
              • НЛО прилетело и опубликовало эту надпись здесь
                  +1
                  Конечно, я напишу о том как и почему возникли проблемы, как получилось их решить, как сегодня угодить клиентам и с какими новыми проблемами придется столкнуться. Слишком много «наболело» за последнее время из-за того, что интернет полон сайтов вроде бы качественно сработанных, в основе своей — в работе с текстовыми блоками — многое остается на дремучем уровне 10-летней давности. Основная часть статьи уже написана, но предстоит большая работа с созданием нужных скриншотов, потому как без них многое теряет смысл. Поэтому я думаю, что буду выкладывать части поэтапно. Пока задумано три части, возможно что и четыре. Наберитесь терпения, я постараюсь поскорее выложить весь материал.
                  Идея написать об этом пришла мне вчера вечером, хотя про веб-типографику хотелось рассказать уже давно, да все руки не доходили как-то. Так что пришлось посидеть полночи, чтобы выплеснуть идею в буквы :)
                  • НЛО прилетело и опубликовало эту надпись здесь
                  +1
                  Очень понравилась статья - спасибо автору - открыл для меня (человека не в дизайне) очень много. Буквально вчера с другом говорили о данной проблемме - шрифты на сайте. Статью обязательно передам в отдел производства. Еще раз спасибо!
                    0
                    Спасибо, очень познавательно!
                      +2
                      Пара поправок.
                      — Em — это единица, равная кеглю шрифта.
                      — «Прыгающие» цифры (они же строчные или минускульные) — это достоинство, а не недостаток, так как позволяют числам быть более однородными в сплошном тексте. Минускульными цифрами снабжены все новые «C»-шрифты от Microsoft, и в трёх из шести этот рисунок цифр является рисунком по умолчанию.
                        0
                        Спасибо, на будущее учту. Я какие-то термины могу забывать во время написания материала. Вот вертится в голове что-то, а нати не могу, так что приходится опускать. Но полагаю, это не суть важно. Относительно минускульных цифр скажу лишь, что они традиционные для западной типографики, у нас же почти неприменимы, а потому несколько более сложны для восприятия, чем обычные цифры. Но опять же — все это субъективно. Кому-то нравится, кому-то не очень. Я вот не особо люблю читать английский текст, если в нем идут минускулы, вместо привычных «ёлочек» в ходу “буржуйские лапки” и используются лигатуры. Спотыкаюсь на таких участках. Видимо из-за того, что привык к родной советской типографике, где всего этого не было.
                          0
                          Вы хотели сказать «почти не применяются», а не «почти неприменимы»? :) Это наследство советской типографики, в которой отказ от минускульных цифр был обоснован целями экономии, а не удобочитаемости или художественной ценности. К счастью, ситуация с наличием их в шрифтах постепенно выправляется. То же самое относится к капители, которая была забыта в советское время, но является прекрасным типографским средством и сейчас возвращается в строй.
                        0
                        Было очень приятно читать. Спасибо автору.
                          0
                          присоединяюсь, спасибо за статью!
                            0
                            Статья хорошая, но новичку стоило бы начинать не с нее. Необходимо ознакомиться с историей шрифтового дела, начиная со времен гуманистической антиквы. ИМХО, уместно было бы указать в начале статьи ссылочку на подобный материал.
                              0
                              спасибо, поучительно даже в некоторых моментах
                                0
                                хорошая статья
                                  0
                                  В избранное!
                                    0
                                    очень позновательно ;) мерси ;)

                                    плиз поправьте опечятку
                                    ...Всего предполагалось сКмь таких семейств...
                                      0
                                      отличная статья, чем смог тем поднял:)

                                      а чем закончилась история с заказчиком? как способствовала этому типографика?
                                        0
                                        Интересный back to the days.
                                        дизайн ни в коем случае не должен довлеть над контентом
                                          0
                                          Обещанное продолжение: http://habrahabr.ru/blog/typography/4269…
                                            0
                                            Очень интересно. Быстрее бы продолжение...
                                              0
                                              спасибо. очень интересно.
                                                0
                                                Как-то Trebuchet обошли стороной. Иногда очень нравится, особенно в заголовках.
                                                  0
                                                  Не забыл :) О Trebuchet MS, семействах С-шрифтов и некоторых других системных шрифтах (MS Sans Serif, Impact, Garamond, Bookman OldStyle и т.п.) я постараюсь написать в дальнейших частях обзора...
                                                  0
                                                    0
                                                    Бы ло бы неплохо во всех 3 статьях сделать гиперссылковое меню на все части.
                                                    0
                                                    Хотя и много, и лень читать, но Очень, очень интересно. + в карму

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

                                                    спасибо
                                                      0
                                                      У вас отличный слог, очень легко читается. И тема статьи очень необходима для понимания, давно искал подобное повествование. Спасибо!
                                                        0
                                                        html - Это не язык! это способ-разметки . поэтому и называется html-теги
                                                          0
                                                          Не соглашусь!
                                                          а может всё-таки, язык? язык разметки гипертекста HyperText Markup Language? :)
                                                          +1
                                                          Отличная статья. Что называется «пища для мозгов» )
                                                            0
                                                            Все это так сложно… Типографика, правила, шрифты… Но все-таки почемуто из-за этих вещей можно сразу узнать кто делал сайт — профессионал или дилетант.
                                                              0
                                                              Автору спасибо за статью
                                                                0
                                                                Шрифты фиксированного размера гарантируют, что диз не разъедется и текст всегда и у всех будет выглядеть более или менее одинаково.

                                                                Когда-то давно сайты состояли в основном из текста. Не было красивых окошек и блоков, а разрешения мониторов были 800х600 и от силы 1024х768. Вот такие сайты и доживают свой век где-нибудь на задворках народ.ру, изредка плодясь за счет хомяков.

                                                                Для тех, кто пользуется большими разрешениями, указываем шрифт в процентах. А для тех, кто при этом еще и плохо видит есть зумы всех видов. В браузерах больше нет возможности менять «Размер шрифта».
                                                                [sarcasm]Ах да… есть же ИЕ 5… [/sarcasm]

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

                                                                Самое читаемое