Веб-шрифты vs. Шрифты для веба

Хороший доклад, спасибо.

пардон, а где сам скринкаст? :/

Было интересно.
Все же, что за шрифт в заголовке ? :)

fiskus, прошу прощения — со словом «скринкаст» я погорячился. Поправил…
diimdeep, а шрифт — Cuprum из проекта бесплатных шрифтов Jovanny Lemonad

Круто! Спасибо! Это и минское - два разных выступления, оба послушал с интересом. Можно было бы еще фото выступающего врезать между слайдами, для оживляжа.

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

Спасибо за как всегда въедливое исследование, Вадим! Ты, можно сказать, дал отмашку отказаться наконец от Cufon, который я обычно использую :)

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

Гм, а длина заметки не будет длиньше 140 символов? :)))

С возвращением, Вадим! Мы скучали, правда-правда.

Очень интересное видео! Про sIFR и font-face, конечно, знал. А вот про Cufon и Typekit даже не слышал. Очень познавательно, спасибо.

PS. Жду более частых обновлений блога!

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

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

Питерский дизайнер

neucha (lemonad) ?

MFD, он самый. См. коммент выше.

Вадим, у меня к тебе глупый вопрос. Может ты, как человек работающий в Opera, знаешь как убрать скролл у текстарии в одноименном браузере? И чем вообще появление этого скролла обосновано? Мне правда интересно.

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

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

Enlightened, во что вы не верите? В то, что это будет разумно?

.EOT-шрифты, походу, не срабатывают если пользователь не является администратором в системе (надо тестить).

Ви, на Гостевом аккаунте все работает :) Не знаю что там с IE6, но в IE8(7) даже режим совместимости показывает шрифт.

А нельзя сделать так, чтобы пока шрифты грузятся текст отображался стандартной гарнитурой?

Никита, это нужно попросить разработчиков Webkit, чтобы они делали так же, как Firefox и Opera.

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

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

Чес слово, никого не хотел обидеть.

И Вы меня пожалуйста извините если что...
Вы правы, новые решения того стоят

Автор доклада явно не любит лицензии на шрифты и дизайнеров, которые хотят на своей работе зарабатывать. Ну, что ж... Я лично с трудом представляю кучу дизайнеров тратящих кучу своего времени на разработку бесплатных шрифтов. хороших бесплатных шрифтов. Те же работы Jovanny Lemonad (при всем уважении к нему) - это шрифты ниже среднего качества. Вполне имеют право на жизнь, но это средний минус сегмента, как любят говорить маркетологи. А крупные студии, которые могут делать большие шрифтовые проекты не охотно идут на открытую лицензию, по вполне понятным и объективным причинам. Ну вот Паратайп сделали PT Sans. Скоро ли еще появится другой такой проект? Сомнительно. Общий вывод - проблемы использования шрифтов в вебе нет. Ну почти нет. Есть бооольшая проблема лицензирования такого использования. И наиболее адекватное её решение лежит не в области веб-технологий, а в области авторского права и способов получения авторами роялити.

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

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

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

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

Скажите пожалуйста, а с точки зрения семантики имеет ли смысл эти загловки помещать в теги H? например:

<h2><img src="header.png" alt="Загловок" /></h2>

или правильней будет сделать так:

<div class="title"><img src="header.png" alt="Загловок" /></div>

На самом деле вопрос встал давно, только некому было его задать

goddy, лучше всего делать вот так:

<h2>Заголовок</h2>
H2 {
    overflow:hidden;
    width:title_width;
    height:title_height;
    }
H2:after {
    position:absolute;
    top:0;
    left:0;
    width:title_width;
    height:title_height;
    background:url(title.png) no-repeat;
    content:'';
    }

Погуглите по фразе image replacement css