Новая типографика для веба. Microsoft демонстрирует возможности OpenType

    Microsoft опубликовала демо-страницу улучшенной типографики для формата OpenType. Это альтернативные глифы, лигатуры, кернинг, дроби, малые прописные и минускульные цифры. Эффекты видны, если наводить на текст мышкой. Демо хорошо работает только в браузерах с поддержкой OpenType, сама Microsoft рекомендует IE10+ и Firefox 8+. В других браузерах могут проявиться не все эффекты, это ещё зависит от операционной системы.


    Альтернативные глифы и малые прописные

    С Microsoft можно согласиться — OpenType действительно поднимает оформление текста в вебе на новый уровень, близкий к типографскому. Возможности этого формата явно превосходят @font-face.

    Для каждого эффекта приводится фрагмент кода, как это реализуется в OpenType.

    Малые прописные

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



    Код
    /* use small-caps */
    .smallcaps { 
      -moz-font-feature-settings: "smcp=1";
      -ms-font-feature-settings: "smcp" 1;
    }
    
    /* both upper and lowercase to small caps */
    .allsmallcaps { 
      -moz-font-feature-settings: "c2sc=1, smcp=1";
      -ms-font-feature-settings: "c2sc" 1,"smcp" 1;
    }


    Лигатуры

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



    Код
    /* use ligatures automatically */
    
    .ligatures { 
    	text-rendering: optimizeLegibility;
    	-moz-font-feature-settings: "liga=1";
    	-ms-font-feature-settings: "liga" 1;
    }


    Цифры

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



    Код
    /* enable proportional figures and ordinals */
    
    .figures { 
      -moz-font-feature-settings: "pnum=1,onum=1";
      -ms-font-feature-settings: "pnum" 1,"onum" 1;
    }


    Кернинг

    Избирательное изменение интервала между буквами в зависимости от их формы создаёт более читаемый, сбалансированный текст.

    Код
    /* enable kerning data */
    
    .kerning { 
    	text-rendering: optimizeLegibility;
    	-moz-font-feature-settings: "kern=1";
    	-ms-font-feature-settings: "kern" 1;
    }


    Дроби

    Если включить эту опцию в коде, то все комбинации типа «2/3» будут автоматически сконвертированы в дроби правильного вида.



    Код
    /* enable OpenType fractions */
    
    .fractions { 
    	-moz-font-feature-settings: "frac=1";
    	-ms-font-feature-settings: "frac" 1;
    }


    Альтернативные глифы

    Дополнительные глифы можно использовать в тексте в некоторых ситуациях для визуального эффекта.



    Код
    /* enable style set five */
    
    .alternates { 
      -moz-font-feature-settings: "ss05=1";
      -ms-font-feature-settings: "ss05" 1;
    }
    
    /* enable contextual and stylistic swashes */
    .swashes { 
      -moz-font-feature-settings: "swsh=1,cswh=1";
      -ms-font-feature-settings: "swsh" 1,"cswh" 1;
    }

    Компания Microsoft считает OpenType революционным форматом и надеется на широкую его поддержку всеми браузерами. Нужно добавить, что OpenType — формат, разработанный Microsoft и Adobe, представляет собой усовершенствованную версию формата TrueType, а срок действия патентов на TrueType недавно закончился.
    Поддержать автора
    Поделиться публикацией

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

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      –16
      Microsoft наконец-то задумалось о типографике. Надо же.
      • НЛО прилетело и опубликовало эту надпись здесь
          –16
          Может и задумалась, только ничего для этого пока не сделала. Ну, начали минусовать. Покажите мне нормальную типографику в Метро? или в 8-й винде, плз
          • НЛО прилетело и опубликовало эту надпись здесь
              –1
              Да ничего он не стоит! Виндузятникам трудно это понять! Недизайнерам тем более!!! Вот и минусуют, просто и тупо! Жалко вас!
                0
                баттхёрт детектед
              +6
              В 2006 уже работало в WPF (тогда ещё Avalon называлось): msdn.microsoft.com/en-us/library/ms745109
            +25
            Microsoft давно работает над типографикой. Это и огромные таблицы хинтинга для хорошего отображения шрифтов при маленьких размерах (Tahoma, Arial, Verdana, etc), это и специальные шрифты для использования с алгоритмом субпиксельного сглаживания ClearType (Calibri, Cambria, etc), это и ориентированный на текст Metro.
            А вот подход Apple — «будем рисовать все как есть, когда выйдут дисплеи с dpi >= 300 мы будем лучше всех», конечно хорош, но вот на десктопах то все еще нет таких дисплеев. И многим виндузятникам кажется, что в МакОС сплошное «мыло». Помнится мне, что в первой версии Сафари под винду не было возможности включить стандартное сглаживание. Какой же это был кошмар ;) И тот факт, что эта возможность все-таки появилась, говорит о том, что подход МС к типографике совсем не плох.
              +4
              Только почему-то в IE9 Microsoft скатилось к тому же мылу.
                0
                Это из-за аппаратного ускорения. Сейчас Clear Type в привычном виде возможен только средствами GDI+, а IE9 рисует контент через DirectX (FF последние тоже и со шрифтами там такая же беда).
                  0
                  Честно признаться рендер шрифтов в Firefox мне нравиться больше чем в Chrome — засечек на крупных кеглях нет.
                    0
                    Проблема решается, путем подключения, для FF -woff, для IE — eot, для остальных браузеров SVG, обнаружила случайно, сама не знала, что делать со сглаживаем в сафари и хроме, но убрав тип вофф стал цепляться свг и шрифт сгладился вот такие чудеса)
                      0
                      Я не про font-face. А про обычные шрифты.
                      А с font-face конечно есть свои тонкости. SVG шрифты — фу.
                        0
                        Почему фу? очень интересно
                          0
                          Главная причина — размер.
                            0
                            заказчика обычно это редко, к сожалению, интересует, ему главное, чтоб красивенько
                              0
                              Есть ttf+woff.
                              А вообще с этой позиции судить не буду. На дядю не работаю. Я выразил свое личное мнение.
                              В свое время нахлебался проблем с Opera и font-face. С тех пор видеть не могу ни то, ни другое.
                                0
                                ttf тоже не всегда вариант, особенно если шрифт купленный. А мне повезло, мы оперу не поддерживаем, но я тоже нахлебалась.
                          0
                          если не системный шрифт, то как без него?
                            0
                            Обычные шрифты в Firefox более гладкие.
                          0
                          извращалась даже путем приделывания тени)) а оказалось все очень просто. Еще рекомендую шрифты для FF, вернее, шрифт типа вофф сконвертить в base64, и вынести в отдельный файлик, хоть он и будет весить прилично, но за то при загрузке страницы, шрифт не будет дергаться, а так же число обращений к серверу сокращается.
                    –1
                    Смотря на каком разрешении мыло. Если у вас хакинтош с дешёвым монитором — может быть, но на iMac-е, к примеру, никакого мыла не увидел на макс. разрешении. (не профессионал в этом вопросе)
                      0
                      Можно узнать вашу среднюю месячную ЗП? Можно примерно.
                    • НЛО прилетело и опубликовало эту надпись здесь
                    +6
                    Такие посты мне греют душу. Приятно, когда люди следят за всем, что производят. Даже, если вы просто пишите текст. Спасибо.
                      –1
                      Новость — замечательная. Изображения — не фонтан. Pango лучше рендерит.
                        +3
                        А как сии фишки ведут себя с кирилическими шрифтами?
                          +6
                          Количество кириллических шрифтов с поддержкой всяких таких модных OpenType фич невообразимо мало, по сравнению с тем, что доступно для латиницы. Поэтому о поддержке кириллицы можно не думать вообще.
                          0
                          Где это переворачивания шрифта может пригодиться в практике?
                            0
                            Вы не поняли, там вся фишка в межбуквенных интервалах. Переворачивают только для демонстрации.
                            –11
                            Во-первых, для small caps в CSS есть свойство, зачем вводить дополительное? Во-вторых. этот font-settings выглядит как что-то проприетарное и некроссплатформенное. В-третьих, для дробей есть юникод. Что касается кернинга — непонятно, зачем его отключать.

                            Короче, странная какая-то непонятная вещь, с уродливым синтаксисом, в лучших традициях МС.
                              +4
                              Извините, но прежде, чем делать скороспелые обвинения, вы хотя бы в стандарт CSS3 Fonts смотрели?
                              Вот тут www.w3.org/TR/css3-fonts/#font-rend-props все описано.
                                +7
                                Заметьте, что эти стандарты описывают все эти новые возможности для шрифтов как отдельные стилевые правила с вменяемыми названиями: font-variant-numeric, font-variant-ligatures, font-variant-alternates. Здесь вместо их всех — одно правило -prefix-font-feature-settings с совершенно нечитаемыми и невменяемыми значениями. Где здесь следование стандартам со стороны разработчиков?
                                  +3
                                  ну давайте мы еще будем вам объяснять, почему все новые фичи вводятся сначала с префиксом. ) гуглите макеев префиксы видео
                                    +4
                                    Здесь в большинстве примеров -prefix-font-feature-settings, потому что 1) это правило есть в стандарте, 2) это низкоуровневое правило, завязанное на возможности шрифтов (хотя понятно, что в принципе можно использовать и высокоуровневые, но начинается реализация именно с низкоуровневого), и 3) потому что это просто напросто пример на это правило.
                                0
                                  +1
                                  >а срок действия патентов на TrueType недавно закончился.

                                  Потому решили продвигать новый, который можно покрыть тестами тьфу, патентами ещё лет на… дцать?
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Спасибо за экскурс :) А как растеризатором или его алгоритмом у OpenType дело обстоит?
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                    +13
                                    С Microsoft можно согласиться — OpenType действительно поднимает оформление текста в вебе на новый уровень, близкий к типографскому. Возможности этого формата явно превосходят @font-face.
                                    Я не уверен ещё, откуда исходит это утверждение — от Microsoft или не вполне от Microsoft — но по сути оно не всецело справедливо. CSS-директива @font-face является инструментом подключения внешнего шрифта к странице, но не накладывает никаких особенных ограничений на формат его. В употреблении OpenType и @font-face вполне совместимы и ничуть не противоречат друг другу. Например, если рассмотреть спецификацию формата WOFF, понимаемого большинством современных браузеров, и в ней задать поиск по слову «OpenType», то слово это не раз находится, и притом в контексте, недвусмысленно свидетельствующем, что ко хранению шрифта OpenType в формате WOFF нет никаких технических препятствий, связанных с самим форматом.

                                    Важным свидетельством этого является блогозапись «Firefox 4: OpenType font feature support», которую 9 ноября 2010 года Джон Даггетт опубликовал во блоге «Mozilla Hacks». Многие прилагаемые демонстрации (нагляднее всего — вон та) являются очевидными примерами невозбранного совместного действия @font-face и OpenType.

                                    Демо хорошо работает только в браузерах с поддержкой OpenType, сама Microsoft рекомендует IE10+ и Firefox 8+.
                                    В связи с вышеупомянутою блогозаписью Даггетта не могу не указать, что не только в Firefox 8, но и в Firefox 4 всё работало невозбранно.
                                      0
                                      Firefox 9.0.1/Win7 x64 — в первой и второй демке отсюда ie.microsoft.com/testdrive/Graphics/opentype/Default.html все эти эффекты не работают — что я делаю не так?
                                      Только в третьей можно всё увидеть.
                                        –8
                                        А это значит плюс еще одна головная боль для веб-разработчика!
                                          +9
                                          Да за такую «головную боль» иной разработчик в ноги кланяться стал бы зéмно.
                                          –3
                                          Почему-то никто не сказал, что к тому времени, когда ИЕ10 будет распространен хотя бы как ИЕ7 и ИЕ8, skynet всех победит.
                                            0
                                            Мне кажется эта «революция» всё равно не тянет на возможность привлечения в веб людей профессионально занимающихся типографикой в полиграфии сейчас. Слишком много «кодирования», слишком мало графики.
                                              0
                                              Одни шрифты сюда никого не притянут. Помимо шрифтов в веб надо еще вменяемые способы для верстки, которых нет, и не предвидится никогда
                                                –2
                                                Вы вот как считаете: как нужно было бы сделать, чтобы было меньше «кодирования» и больше графики? Или этого вообще нельзя сделать?
                                                  +1
                                                  Надеюсь что можно, потому что иначе не случится переемственности. Сейчас есть обширные знания и множество специалистов в полиграфии, но вёрстка в вебе это нечто совершенно непохожее на вёрстку в полиграфии.
                                                    0
                                                    Что вы имеете в виду?
                                                      +1
                                                      Что в худшем случае навыки необходимые для вёрстки для печати и для веба так и будут сильно различаться и профессионалы-печатники не привнесут то хорошее в веб, что могли бы.
                                                        0
                                                        Вы просто имеете ввиду, что нету хорошего физувльного инструметнария для вёрстки. Так он появится, как только будет соответствуюзая техническая база, которую мы тут и обсуждаем.

                                                        Вы же не хотите сказать, что верстать в кодах PostScript — это неудобно? ;)
                                                          0
                                                          Тут скорее проблема в битой системе работы с лейаутами. Пока все показывают новые возможности скруглённых уголков и теней, такие штуки как flexbox лежат себе в углу и тухнут. Сейчас нормальная вёрстка в вебе возможно только через position:absolute и только в пикселях. Иначе начинаются тонны геммороя.

                                                          А DreamWeaver существует уже давно.
                                                            0
                                                            Ну, про то, что производители браузеров мало уделяют внимания правильному позиционированию — это я знаю, и стараюсь про это кричать при возможности, чтобы кто надо наконец услышал.

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

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