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

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

    Часть III



    Оказалось, что аж ещё со времён Windows 98 в стандартный комплект включается шрифт под названием Lucida Sans Unicode, который особо нигде не используется. Попробуем заменить им эппловский Lucida Grande.


    Apple со шрифтом Lucida Sans Unicode

    Хочется воскликнуть: Voilà!!! Получилось! Lucida Sans Unicode действительно близок по характеру к Lucida Grande.
    Впрочем, различия всё же есть. Это видно на подзаголовках, набранных жирным начертанием. В случае Lucida Grande, как мы помним, это выглядит таким образом:

    Apple как он есть

    В мелком кегле у Lucida Sans Unicode даже есть малюсенькое преимущество — он выглядит немного чётче. Но в крупных кеглях, да тем более в жирных начертаниях гораздо приятнее Lucida Grande:
    Две Люсиды

    В любом случае, это лучше, чем ничего. Ибо огромная армия пользователей Windows получила бы возможность просматривать сайт Apple примерно в том же виде, что и пользователи «маков», если бы в таблице стилей сайта apple.com тот самый базовый стиль был таким:

    /* TYPE */
    body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; background-color: #fff; color: #333; }


    К сожалению, я не знаю относительно существования аналогичного шрифта в семействе ОС Linux, но даже ориентир на подавляющее большинство (Mac+Windows) уже в какой-то степени имеет огромное значение.

    Но даже и это ещё не всё.

    Myriad ProДолгое время компания Apple использовала шрифт Apple Garamond для всех рекламных материалов и упаковки, но с 2002 г. эта гарнитура была заменена на шрифт Myriad Pro, разработанный специалистами компании Adobe (Robert Slimbach и Carol Twombly). Этот замечательный шрифт имеет очень богатый набор начертаний, а также отдельные версии для капители, лигатур и альтернативных символов. Есть также и отдельно разработанный набор Myriad Web для наилучшего отображения на экране. Оказалось, что все крупные заголовки на сайте Apple набраны именно этим шрифтом, который имеет определённую схожесть с Lucida Grande, но лучше подходит для крупного кегля. Сам шрифт Myriad является коммерческим, и не входит в стандартные пропиетарные поставки операционных систем, зато прилагается ко всем ключевым продуктам компании Adobe. Так что можно смело надеяться, что он обнаружится у 90% всех дизайнеров планеты. Поэтому можно было бы попробовать и его вписать в воображаемый базовый стиль, поскольку он смотрится тоже весьма неплохо (особенно в мелких кеглях):

    /* TYPE */
    body { font: 12px/18px "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; background-color: #fff; color: #333; }


    Тогда обычные пользователи на Linux видели бы сайт Apple с использованием шрифта Arial или Helvetica, обычные пользователи Windows и Mac наслаждались бы задумками дизайнера с использованием «Люсиды», а наиболее продвинутые пользователи, у которых есть по какой-то причине установленный шрифт Myriad Pro, наблюдали бы следующую картинку:
    Myriad Pro во всей красе

    Посмотрите как заиграл, засверкал текст! Казалось бы, на первый беглый взгляд — ничего необычного. Но на самом деле чтение сайта при включённом Myriad Pro превращается в истинное удовольствие. Поскольку шрифт обладает и достаточной чёткостью, и богатейшим набором начертаний. А ведь я использовал обычную версию, а не ещё более сильно оптимизированную для экранного отображения комплектацию Myriad Web.

    Вот как выглядит текст в сравнении с Lucida Grande:
    Myriad Pro vs Lucida Grande

    В сравнении с Arial:
    Myriad Pro vs Arial

    В сравнении с Verdana:
    Myriad Pro vs Verdana

    В сравнении с Tahoma:
    Myriad Pro vs Tahoma

    Скажите, вам ещё не надоели вездесущие «вердана» с «тахомой»?
    Выходит так, что уже существуют шрифты, которые могут коренным образом изменить ситуацию в веб-типографике. Беда лишь в том, что эти шрифты не являются бесплатными и общедоступными, и имеют пропиетарные лицензии лишь при использовании весьма дорогостоящих графических и офисных пакетов. Myriad Pro — в данном случае лишь единичный пример. На самом деле существует немало чудесных коммерческих гарнитур (к примеру, богатейшее семейство Univers), которые можно было бы использовать в качестве базовых шрифтов в веб-типографике.

    Но увы, мы вынуждены зависеть только от того набора шрифтов, что поставляется по умолчанию с операционными системами. Причём обязательно наличие близких или хотя бы приблизительных аналогов в других ОС. Иначе одни пользователи будут видеть «красиво», а другие — «как-нибудь». К сожалению, во всех без исключения операционных системах шрифты поставляются далеко не самые лучшие. Лишь два приведённых примера (Georgia и Lucida Grande/Sans) хотя бы отчасти исправляют ситуацию.

    Я отнюдь не призываю отказаться от использования шрифтов Arial, Times New Roman, Verdana или Tahoma. Просто нужно научиться использовать их с пользой дела там, где они смотрятся наилучшим способом. И не надо бояться пробовать искать новые интересные варианты.

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

    Продолжение следует...

    Комментарии 62

      0
      Lucida Grande с недавних пор поставляется с браузером Safari для Windows, так что можно получить 100% сходное отображение. По этому шрифту в поставке от Apple сохли все маньяки на aqua-soft.org пару-тройку лет назад.
        0
        Спасибо. Не знал. У меня Safari на Windows так и не запустился. А уже полгода как я работаю на маке...
          0
          Использую Safari 3.1.1 под Windows Vista. Установленного Lucida Grande не нашел. Так что 100% пока не получается.
            0
            C:\Program Files\Safari\Safari.resources\Lucida Grande.ttf
              0
              Намек понял. Вопросов больше не имею. Спасибо за уточнение.
            0
            Похоже, с 4-м Safari уже не поставляется :(
            +2
            Все таки проблема выбора шрифта для русского контента остается.

            Ужасно смотрятся буквы "ж" и "м"

            Ужасно смотрятся буквы "ж" и "м"

            Неужасно смотрятся буквы ж и м

            И что же? Все те же Tahoma и Verdana?
              0
              В том-то и дело, что проблема есть, и нужно ее пытаться решать. Уверен, что панацеи нет. А существует ряд мер, позволяющих добиться адекватности. в один условиях исопльзовать одни гарнитуры, в другие - другие. Искать и использовать преимущества для каждого конкретного размера и начертания. Видимо, только так. Пока не реализована в полной мере и на всех платформах возможность встраивания шрифтов в документ.
              +2
              Хе после примеров никогда не смогу использовать Arial Tahoma и Verdana .. они ужасны %)
                0
                Могу предложить Lucida Grande :)
                  +4
                  да я вот DejaVu использую ..
                  +5

                  Пишите тогда Жоржией, дорогой!
                  А какие в ней цЫфирки! 123456789

                    +3
                    Trebuchet MS — наше всё ) вебдваноль и всё такое. 0123456789.

                    Или Calibri, который представляет собой отличный пример cleartype шрифта. 0123456789.
                    А для monotype — только Consolas, и ничто другое! :-)
                    Когда Courier New уже в печенках сидит :-)) 0123456789.
                      +2
                      Каналья! Размеры шрифтов не прошли в теге. В общем, советую обратить внимание на последние два шрифта, особенно Consolas. Последним уже с год пользуюсь в процессе написания кода, намного приятнее шрифта Lucida Console, и того же Courier New
                        +1
                        Про Требушет и семейство С-шрифтов из висты обещаю написать в следующей части.
                        +1
                        Trebuchet MS — наше всё

                        хорошая гарнитура, мне очень нравится уже много-много (8-9!?) лет, но русский в нем появился только в XP, в 2K он вроде только с каким-то из последних сервиспаков руссифицировался, да и то не факт :")

                        а Consolas и Calibri я что-то в стандартных поставках припомнить не могу... они с Vista только начали распространяться, или я не прав?
                          +1
                          Да, и еще с 2007-ым Офисом.
                          Кстати, еще они идут в комплекте с бесплатным PowerPoint 2007 Viewer. ;)
                            0
                            Спасибо за PowerPoint 2007 Viewer. Шрифт нашелся.
                          0
                          >А для monotype — только Consolas, и ничто другое! :-)
                          А терминус чем не угодил? =)
                            0
                            Например тем, что нету версии оного под винду :-)
                            > Q. Win32 version?
                            > A. Maybe, albeit there are problems with the raster font codepages and sizes. But I don't know when..
                          0
                          нееет только не Жоржия ..

                          ps оказывается Lucida Grande у меня в системе есть .. но дежаву пока глазам нравится больше .. моноширный terminus или DejaVu mono Ж-)
                        0
                        http://www.w3.org/TR/css3-webfonts/
                        Вкратце: CSS3 позволяет указывать удаленные шрифты (пример взят из w3c):
                        @font-face {
                                font-family: "Robson Celtic";
                                src: url("http://site/fonts/rob-celt")
                        }
                        К сожалению, незнаю, как сейчас обстоят дела с поддержкой этой штуки браузерами. Кто в курсе, какая ситуация сейчас с этим у Opera 9.27/9.5, FF 2.x/3.x, IE 7/8 ?
                          +1
                          Проблема вовсе не в технологии. Я уверен, что со временем все броузеры это будут поддерживать. Проблема в другом. Ведь вы же вряд ли будете использовать неряшливые трутайпы, скачанные бесплатно откуда-нибудь с dafont.com? Вряд ли это сильно улучшит ситуацию. А вот для того, чтобы давать пользователю возможность смотреть сайт с помощью реально профессиональных коммерческих шрифтов, вам придется заплатить за лицензию. Я не думаю, что производители качественных гарнитур откажутся от перспектив выжать еще больше золотых яичек из своих курочек. Так что впереди маячит такая перспектива, что компании и профессионалы IT-бизнеса смогут строить свои сайты на базе качественных шрифтов и показывать их так, как было задумано благодаря покупке лицензий. А вот простым пользователям интеренета, не обладающим достаточными суммами или не желающими платить за какие-то там шрифты, придется пользоваться более скромными средствами.
                          • НЛО прилетело и опубликовало эту надпись здесь
                            +1
                            Насколько я помню, шрифты можно было мапить и раньше. Году в 2004 я игрался с этим, но при загрузке сайта выскакивало окно запроса разрешения на подкачку шрифта, что безусловно раздражало.
                              0
                              IE поддерживает технологию внедрения шрифтов ещё с бородатых времён, именно с неё списан CSS3 webfonts. Технологию из CSS3 держит Safari и некоторые билды «Оперы» (что позволяет надеяться, что её поддержка появится в релизе Opera 9.50). В FF2 поддержки нет и не будет.
                              0
                              У скриншотов есть одна небольшая деталь, которая сводит на нет всю статью - у вас используется сглаживание шрифтов. Тут уж какой шрифт не ставь, все будет выглядеть мерзко.
                                0
                                Вы не поверите, но сглаживание шрифтов (aka Cleartype) — реально рулит.
                                  0
                                  от клеартупа все буквы становятся жирнее и менее красиво смотрятся. А стоит выделить белым на черном фоне любой несглаживаемый шрифт - получается некрасивая хрень
                                    0
                                    Я ниже написал про ClearType Tuner. Я тоже не переносил CT изза "жирности", но эта штука реально помогает офигенно настроить сглаживание.
                                    0
                                    Очень сильно зависит от типа матрицы монитора. На некоторых лучше Cleartype не включать.
                                    0
                                    Вы не поленитесь, и почитайте предыдущую часть, где я как раз немного рассказываю о сглаживании и объясняю почему я НЕ использую отключение антиалиасинга. Мне горадо комфортнее читать на маке сглаженный текст, чем изжившие себя зубчатые буквы из прошлого века.
                                      0
                                      К тому же мерзко вглядит, к примеру, Arial. По поводу сглаженного Myriad Pro лично мне очевидно, что такой текст читать куда приятнее.. Я давно поставил его себе в качестве основного шрифта в броузере, и уверяю, что не испытваю никаких трудностей и не чувствую усталости, каким бы большим или мелким не был кегль шритфа. Возможно, многое зависит от монитора, но у меня и на профессиональном Sony, и на обычном 13" ноутбуковском экране все выглядит замечательно со глаживанием и адекватными шрифтами. Чего не могу сказать про вердану или тахому при отключенном антиалиасинге. Глаза режет уже через минут чтения такого текста.
                                        0
                                        Вот я не поленился, но все равно кое-что не ясно. Мне вот тоже приятнее читать сглаженный текст, я тоже надеюсь что вскоре сглаживание будет стоять по умолчанию во всех ОС и во всех браузерах. Но сейчас, как показывает статистика, еще много пользователей не увидят сглаживание на ваших сайтах. Поэтому я думаю, что нужно стремиться в будущее, но и не оставлять без внимания настоящее.
                                          0
                                          Я это к тому, что к примеру междубуквенное расстояние у Lucida Sans Unicode без антиалиаса, расчитывается не очень хорошо:



                                          А представте, что текста довольно много
                                        +2
                                        ClearType Tuner, рекомендую посмотреть. Позволяет настроить сглаживание cleartype под свой вкус. До использования этой штуки я тоже не переносил ClearType, после — уже не могу отказатся. Честно.
                                        +2
                                        А мне нравится Trebuchet MS. Он очень красив и на нем модные сайты от Google
                                          0
                                          Года полтора назад впервые увидел и попробовал в деле Myriad Pro. С тех пор я в него влюбился. Как же он красиво смотрится в полосе набора! Еще один замечательный шрифт — Minion Pro из той же поставки от Adobe. Эти два шрифта у меня первые в очереди на книжные работы. Кстати, я очень часто замечаю их в рекламных плакатах на улице.
                                            +2
                                            Плюс вам поставил еще на первой части, но может хватит пока на сегодня ;) , информацию нужно давать дозированно, работать же нужно, и спать. Спасибо еще раз.
                                              0
                                              Автор за сегодня собрал солидный улов плюсов :) Спасибо, за красиво изложенный материал!
                                                0
                                                Откровенно говоря, плюсы меня беспокоят меньше всего. Хотя, конечно, спасибо. Куда больше меня интересует критика, комментарии и замечания. Благодаря некоторым комментариям я уже подправил кое-что, а кое-что узнал нового. Плюс у меня заодно появились новые мысли и идеи для продолжения. Уверен, что тема достаточно актуальна, поскольку лично мне остодонели одинаково корявые сайты с текстов в тахоме да вердане...
                                                  0
                                                  ИМХО, было бы ещё неплохо указывать, что ряд иллюстраций — с Википедии импортной. Но это так, чисто организационно.
                                                    0
                                                    прошу прощения, что не указал, но в окончании статьи обязательно укажу источники.
                                              +1
                                              Господа, а вы пробовали когда-нибудь Gentium.
                                              Песня!
                                                  +1
                                                  Парсер — лох, заменяет в слове «scripts» некоторые буквы на русские. Типа, защита от хацкеров.
                                                  0
                                                  Прекрасный шрифт, но без кириллицы. Это всё портит.
                                                    0
                                                    Кириллица есть. В Ворде пишет а Иллюстраторе почему-то нет.
                                                    Я на него наткнулся, когда искал что-то похожее на Артемиус.
                                                      0
                                                      Ворд при отсутствии в шрифте кириллицы автоматически его подменяет на какой-нибудь шрифт с засечками. Кириллица есть в новом Gentium Basic, но там не настроены кернинговые пары.
                                                        0
                                                        Сразу видно знающего человека. Кернинговые пары — это, что игнорируют очень многие дизайнеры, а совершенно напрасно. Отлаженный опентайтп (или Тайп 1, но только не трутайп) с полным набором кернинговых пар даёт настоящую красоту. Достаточно написать текст с парами Гр или Су или Та, и сразу становится видно настоящего дизайнера. У него кернинг скакать не будет, а буквы не станут отрываться друг от друга. Это прерогатива Times New Roman, которым набирается 99% всех документов и объявлений в офисах. Там кернинг отсутствует как класс, и более ужасной системы композиции текста я ещё не встречал. Ну разве что в горячо любимых народом таких «шрифтовых квазимод» как AdverGothic, BetinaScript, Izhitsa и Inform...
                                                          0
                                                          Mistral забыли! :)
                                                            0
                                                            Да что там кернинговые пары. Огромное количество дизайнеров пользуется криво русифицированными шрифтами, где И сделана из N, а Ж — из K. Логотип Михайловского театра в СПб, например, сделан именно так. :(
                                                          0
                                                          Ах, фигушки! In particular, these fonts do not support:
                                                          • Full extended Latin IPA
                                                          • Complete support for Central European languages
                                                          • Greek
                                                          • Cyrillic
                                                      0
                                                      шрифт-маньяки :)
                                                        0
                                                        Сегодня не раз говорилось, что CSS3 поддерживает подключение сторонних шрифтов. Если ли информация о поддержке наложения фильтров на эти шрифты, то же сглаживание? Думаю тогда, добрая половина верстальщиков сможет заменять рисованные заголовки статей (рубрик) - реальными.
                                                          0
                                                          спасибо, очень грамотная статья.

                                                          одно но, которое мучает меня. ClearType в win не то же самое, что и сглаживание в фотошопе. то есть нарисованный макет, будь то со сглаживанием или без, все равно некорректно сравнивать с тем же сайтом apple. )
                                                            0
                                                            Кстати, насчет вставки своих шрифтов. Если нужно написать заголовок каким-нибудь необычным шрифтом, многие используют для этой цели Flash, который умеет хранить фонт внутри файла.
                                                              +1
                                                              sIFR (Scalable Inman Flash Replacement)
                                                              0
                                                              поменял на подшефном сайте шрифты на указанные вами - стало объективно лучше, в линухах в том числе (:
                                                              за что вам отдельное спасибо
                                                                0
                                                                Myriad Pro нравится :-) Люсида Гранде само собой :-) Давно пора полностью перейти на ОпенТайп и Юникод :-)
                                                                  0
                                                                  всем хорош Мириад — только вот рябит в глазах уже. ну честное слово, куда ни плюнь — мириад :)
                                                                  одно радует — подтянет уровень восприятия шрифта у простого народа (как любая качественная вещь, пущенная «в люди»), пусть и ценой привлекательности самого себя.
                                                                    0
                                                                    Очень хорошая статья, заждался уже продолжения, когда ждать?)

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

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