Заглавный

Вообще-то мне очень нравится шрифт в заголовке хедера (называется «огни пятничной ночи», само название очень отдохновительно-возбуждающее)). Но он весьма сложный, как видим, в нем очень много мелких элементов, которые требуют в векторном коде (svg) описания. Из-за этого размер файла svg с таким недлинным выдохом «SPORT AND STUFF» достигает, вдумайтесь, 605 килобайт!! Растр сложности успешно игнорирует — и прозрачный png, который вставлен в титуле, весит 25 кб. Если сделать, как в старину, белую подложку и сжать джипегом, так вообще сущие единицы…

Так как я задумал эту тему очень хорошо зачистить (привести к стандартам HTML5) и сделать первый для моих проектов настоящий адаптивный дизайн, одна из самых первейших задач — избавиться от растра в элементах оформления: растр не масштабируется. Увеличив масштаб страницы, можно увидеть, как плывет рисунок в заголовке… Ну… Современный пользователь с хорошими устройствами вывода очень привередлив…

600 килобайт для такой ерунды слишком много. Встраивать этот, крайне специфический, неутилитарный шрифт муторно ради 13 знаков… Значит, будем искать, в том числе для освежения общей картины.

Вот этот — Bungee — довольно таки интересный шрифт, вместе с теневым эффектом в векторе дает 26 килобайт. И сколько бы мы не натягивали глаз ретину на контейнер, он будет таким же четким и ясным (в меру задуманного умягчения и рельефности).

Более простой вариант его же:

Такой эффект тянет на 29 килобайт аж. В данном конкретном — чуть больше, так как я, для удобства, в статью вставил их с помощью кода Base64. За удобство платим чуть большими килобайтами. А напрямую «вес» svg будет указанный.

Да, разработчик шрифта с большим почтением отнесся к букве Å. По шведски читается как О. Это при том, что во многих случаях у них и обычная А произносится как О. Ну то такое. Иидрёт о сонт. То же самое, что и в заглавии. Баловство одно.

Чтобы еще раз понять прелесть вектора. Вот этот объединенный «спрайт» имеет в свойствах (условный) размер 16000px — шестнадцать тысяч пикселей. А весит 23 килобайта. И масштабируется до любых крайних величин во Вселенной. Png занимает 2,5 мегабайта и масштабируется в пределах пары-тройки сотен сантиметров.

Разница между медиумом и жирным начертанием. Драматическая.