Анализ шрифтовых пар на сайтах ведущих СМИ РФ

Приводится данные по использованию типографики в заголовке и основном тексте на сайтах ведущих СМИ по версии медиалогии за ноябрь 2017 года. Исследование проведено в январе 2018 года. Представлены CSS свойства font-weight, font-size, line-height, font-family для отдельного материала - статьи. Выбор обусловлен тем, что это основной материал средств массовых коммуникаций. Метрики сняты для ширины экрана более 1280px.

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

Для справки: font-weight normal - 400, font-weight bold - 700.

Таблица шрифтовых пар

Заголовок статьи (Обычно h1)Основной текст
ТипНазваниеfont-weightfont-sizeline-heightfont-familyfont-weightfont-sizeline-heightfont-family
1 ГазетыИзвестия7003035Fira Sans4001623Noto Serif
2 ГазетыКоммерсантЪ4003030Georgia4001624Georgia
3 ГазетыВедомости4004852Fedra
Sans Demi
4001924Georgia
4 ГазетыРоссийская газета7003036Roboto4001630Roboto
5 ГазетыКомсомольская правда7003035OpenSans4001522OpenSans
6 ГазетыНовая газета9002540helveticaneuecyr4001825Georgia
7 ГазетыМосковский комсомолец40025.6px(2em)35.8px(140%)Roboto
Condensed,Georgia,'Century Schoolbook L'
40012.8px(0.8em)20.48px(160%)Verdana,'Geneva
CY',Helvetica,'DejaVu Sans'
8 ГазетыПарламентская газета30028.8px(1.8em)37.7px(1.3em)Roboto Slab,serif;4001624Roboto, Verdana, Arial, sans-serif
9 ГазетыАргументы и факты70028px(1,75em)28px(1)Roboto,
sans-serif;
4001620,8(1.3em)PT Serif', serif;
10 ГазетыНезависимая газета7003636plumb_condregular, Arial, sans-serif;4001519Arial, sans-serif;
1 ЖурналыForbes4003943Avenir Next Cyr Arial, serif;4001826Avenir
Next Cyr Arial, serif;
2 ЖурналыStar Hit4003639,6(1.1em)FuturaFuturisBold, Arial,
Helvetica, sans-serif;
4001318Arial, Verdana, sans;
3 ЖурналыGlamour4004650,6(1.1)Kuenstler 480 BT, serif;4001724(1.412)Kuenstler
480 BT, serif;
4 ЖурналыTatler 4005754(.94737em)ITC Bodoni 72 ML W10,
serif
4001524Pragmatica W10, sans-serif
5 ЖурналыСноб50050(5rem)50Futura PT,Helvetica
Neue,Helvetica,Arial,sans-serif;
40018(1.8rem)24,84(1.38)conqueror_text_regular',Georgia,Times
New Roman,Times,serif
6 ЖурналыMarie Claire 4003454Playfair Display', serif,
Georgia, Times New Roman, Times, serif;
4001626Roboto', sans-serif
7 ЖурналыHELLO!4003640(2,5rem)MyriadProRegular, sans-serif4001726MyriadProRegular,
sans-serif
8 ЖурналыПрофиль7002840verdana,Arial,Helvetica,sans-serif4001418verdana,Arial,Helvetica,sans-serif
9 ЖурналыMAXIM4002430Roboto Slab',sans-serif;4001524Open
Sans, sans-serif
10 ЖурналыЖурнал РБК4004242GraphikCy-Semibold,'Helvetica
CY',Arial,sans-serif;
4001826Kazimir,'Helvetica CY',Arial,sans-serif
1 Интернет-ресурыRbc.ru4004242GraphikCy-Semibold,'Helvetica CY'4001826Kazimir,'Helvetica
CY'
2 Интернет-ресурыGazeta.ru7002836PT Serif, serif;4001824PT Serif', serif;
3 Интернет-ресурыLenta.ru7003030PT Serif, Georgia, 'Times New Roman', Times,4001620PT
Serif', Georgia, 'Times New Roman', Times
4 Интернет-ресурыLife.ru4004448Roboto Slab, serif4001724,2857(1.42857)Roboto, sans-serif;
5 Интернет-ресурыFontanka.ru3003238Roboto Slab',Tahoma,sans-serif;4001620,8(1.3em)Arial,
sans-serif;
6 Интернет-ресурыKp.ru7003035OpenSans, sans-serif4001522OpenSans, sans-serif
7 Интернет-ресурыDni.ru4002436IntroBoldCaps4001723,8(1.4)IntroCondRegular
8 Интернет-ресурыM24.ru7004646Lato4001826Rubik,sans-serif;
9 Интернет-ресурыMeduza.io4003738PFRegal, Georgia, serif;4002027PFRegal,
Georgia, serif;
10 Интернет-ресурыZnak.com7004044(1,1)PT Sans, sans-serif4001722,1(1.3)PT Sans, sans-serif
1 ТВ-каналыRT70034(3.4em)40(1.17647em)DIN Pro'40018(1.8em)26(1.4444em)Segoe
UI', Arial, Helvetica, Verdana, Roboto, Calibri, sans-serif
2 ТВ-каналыРен Тв7003238,4(1.2)PT Sans',sans-serif,Arial;4001724Arial,
Helvetica, sans-serif
3 ТВ-каналыРоссия 244003236RussiaLight, sans-serif4001624OpenSansRegular,
sans-serif
4 ТВ-каналыРоссия 14003236RussiaLight, sans-serif4001624OpenSansRegular,
sans-serif
5 ТВ-каналыПервый канал7003840PT Sans, serif40016normalPT Sans, serif
6 ТВ-каналыНТВ 40034normalPTSerifCaption', Arial,
Helvetica, sans-serif;
4001726PTSansRegular', Arial, Helvetica, sans-serif;
7 ТВ-каналыЗвезда7003030PT Serif',serif;4001520Georgia,
serif
8 ТВ-каналыДождь6003236Roboto, sans-serif4001622,7(140%)Roboto, sans-serif
9 ТВ-каналыТВ Центр4003030Open Sans, sans-serif4001520Open
Sans, sans-serif
10 ТВ-каналыПятый канал70024(2.4rem)24(2.4rem)PT Sans, Trebuchet MS,
sans-serif;
40018(1.8rem)22.5(1.25)PT Sans,
Trebuchet MS, sans-serif

Небольшой анализ

В заголовках к моему удивлениею преобладает нежирный текст: 22 результата (300+400+500) против 18 жирных (600+700+900). В основном тексте только "нормальный" шрифт: все 40 сайтов. Во всех журналах, кроме "Профиля", в заголовках не используется жирный шрифт, видимо "жирный" даже в такой мелочи под запретом)).

Медианные значение высоты шрифта и межстрочного интервала для заголовков - 32px/36px, для основого текста - 16px/24px. Что интересно, webkit браузеры по умолчанию делает заголовки h1 равным 2em, при базовом шрифте 16px. Получается, что статистически размер шрифта для заголовка и основного текста совпадает со значением по умолчанию браузеров. Межстрочный интервал не совпадает (по-умолчанию больше): 37,4px и 25.6 px соответственно.

На 13 ресурсах из 40 применяется один и тот же шрифт для заголовков и основного текста.

Часто встречающиеся шрифты заголовка:

  • Семейство Roboto 8
  • PT Sans 4
  • PT Serif 4
  • OpenSans 3

Часто встречающиеся шрифты основного текста:

  • OpenSans 6
  • Roboto 5
  • Arial (Зачем они его выбрали) 4
  • PT Sans 4
  • Georgia 4
  • PT Serif 3
  • Verdana 2

Другие записи из подборки «Исследования CMS»

Почему Битрикс такой популярный?

https://twitter.com/#!/glazs/status/186032083074949120

Про проблемы битрикса глазами разработчика:

Поставьте себя на место заказчика:

  1. CMS с богатым опытом (уже более 10 лет на рынке)
  2. Имеет самую большую в России долю по eccommerce
  3. Имеет бесплатную качественную поддержку
  4. Имеет широкую документацию
  5. Во всех регионах от малых до самых топовых студий можно найти специалистов без труда.
  6. Обратная совместимость. Полная и безоговорочная. Вы всегда получите доступ к новым фичам и вам не придется до

Похожие записи