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

Приводится данные по использованию типографики в заголовке и основном тексте на сайтах ведущих СМИ по версии медиалогии за ноябрь 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»

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

Полезные горчие клавиши Youtube

При просмотре роликов бывает хочется немного ускорить воспроизведение, для этого есть функция "скорость видео" в настройках ролика. Чтобы её включить не задействуя мышь нужно нажать "Shift + >" или "Shift + <" для ускорения и замедления соответственно. И еще некоторые горячие клавиши youtube:

Кратко о внедрение зависимостей и сервис контейнере

Cтатья о том, что такое "Внедрение зависимостей" и "Сервис-контейнер" отталкиваясь от их реализации в PHP фреймворках. Статья написана по мотивам статей Фабьена Потенсье, ведущиго разработчика и идеолога фреймворка Symfony, а также документации фреймворка Laravel.

Классы visible-** и hidden-** в Bootstrap 4

Использование классов Bootstrap 4 для скрытия и отображения элементов на разных разрешения (xs, sm, md, lg) устройств при разработке адаптивных страниц

Medium like image zooming

Полгода собирался в блог добавить zoom на изображения как на medium и вот "новый год" позволил мне это сделать.