Анализ шрифтовых пар на сайтах ведущих СМИ РФ
Приводится данные по использованию типографики в заголовке и основном тексте на сайтах ведущих СМИ по версии медиалогии за ноябрь 2017 года. Исследование проведено в январе 2018 года. Представлены CSS свойства font-weight, font-size, line-height, font-family для отдельного материала - статьи. Выбор обусловлен тем, что это основной материал средств массовых коммуникаций. Метрики сняты для ширины экрана более 1280px.
В таблице основные значение - вычисленные пиксели, в скобках указаны оригинальые единицы измерения шрифтов из CSS кода сайтов.
Для справки: font-weight normal - 400, font-weight bold - 700.
Таблица шрифтовых пар
| Заголовок статьи (Обычно h1) | Основной текст | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| № | Тип | Название | font-weight | font-size | line-height | font-family | font-weight | font-size | line-height | font-family |
| 1 | Газеты | Известия | 700 | 30 | 35 | Fira Sans | 400 | 16 | 23 | Noto Serif |
| 2 | Газеты | КоммерсантЪ | 400 | 30 | 30 | Georgia | 400 | 16 | 24 | Georgia |
| 3 | Газеты | Ведомости | 400 | 48 | 52 | Fedra Sans Demi | 400 | 19 | 24 | Georgia |
| 4 | Газеты | Российская газета | 700 | 30 | 36 | Roboto | 400 | 16 | 30 | Roboto |
| 5 | Газеты | Комсомольская правда | 700 | 30 | 35 | OpenSans | 400 | 15 | 22 | OpenSans |
| 6 | Газеты | Новая газета | 900 | 25 | 40 | helveticaneuecyr | 400 | 18 | 25 | Georgia |
| 7 | Газеты | Московский комсомолец | 400 | 25.6px(2em) | 35.8px(140%) | Roboto Condensed,Georgia,'Century Schoolbook L' | 400 | 12.8px(0.8em) | 20.48px(160%) | Verdana,'Geneva CY',Helvetica,'DejaVu Sans' |
| 8 | Газеты | Парламентская газета | 300 | 28.8px(1.8em) | 37.7px(1.3em) | Roboto Slab,serif; | 400 | 16 | 24 | Roboto, Verdana, Arial, sans-serif |
| 9 | Газеты | Аргументы и факты | 700 | 28px(1,75em) | 28px(1) | Roboto, sans-serif; | 400 | 16 | 20,8(1.3em) | PT Serif', serif; |
| 10 | Газеты | Независимая газета | 700 | 36 | 36 | plumb_condregular, Arial, sans-serif; | 400 | 15 | 19 | Arial, sans-serif; |
| 1 | Журналы | Forbes | 400 | 39 | 43 | Avenir Next Cyr Arial, serif; | 400 | 18 | 26 | Avenir Next Cyr Arial, serif; |
| 2 | Журналы | Star Hit | 400 | 36 | 39,6(1.1em) | FuturaFuturisBold, Arial, Helvetica, sans-serif; | 400 | 13 | 18 | Arial, Verdana, sans; |
| 3 | Журналы | Glamour | 400 | 46 | 50,6(1.1) | Kuenstler 480 BT, serif; | 400 | 17 | 24(1.412) | Kuenstler 480 BT, serif; |
| 4 | Журналы | Tatler | 400 | 57 | 54(.94737em) | ITC Bodoni 72 ML W10, serif | 400 | 15 | 24 | Pragmatica W10, sans-serif |
| 5 | Журналы | Сноб | 500 | 50(5rem) | 50 | Futura PT,Helvetica Neue,Helvetica,Arial,sans-serif; | 400 | 18(1.8rem) | 24,84(1.38) | conqueror_text_regular',Georgia,Times New Roman,Times,serif |
| 6 | Журналы | Marie Claire | 400 | 34 | 54 | Playfair Display', serif, Georgia, Times New Roman, Times, serif; | 400 | 16 | 26 | Roboto', sans-serif |
| 7 | Журналы | HELLO! | 400 | 36 | 40(2,5rem) | MyriadProRegular, sans-serif | 400 | 17 | 26 | MyriadProRegular, sans-serif |
| 8 | Журналы | Профиль | 700 | 28 | 40 | verdana,Arial,Helvetica,sans-serif | 400 | 14 | 18 | verdana,Arial,Helvetica,sans-serif |
| 9 | Журналы | MAXIM | 400 | 24 | 30 | Roboto Slab',sans-serif; | 400 | 15 | 24 | Open Sans, sans-serif |
| 10 | Журналы | Журнал РБК | 400 | 42 | 42 | GraphikCy-Semibold,'Helvetica CY',Arial,sans-serif; | 400 | 18 | 26 | Kazimir,'Helvetica CY',Arial,sans-serif |
| 1 | Интернет-ресуры | Rbc.ru | 400 | 42 | 42 | GraphikCy-Semibold,'Helvetica CY' | 400 | 18 | 26 | Kazimir,'Helvetica CY' |
| 2 | Интернет-ресуры | Gazeta.ru | 700 | 28 | 36 | PT Serif, serif; | 400 | 18 | 24 | PT Serif', serif; |
| 3 | Интернет-ресуры | Lenta.ru | 700 | 30 | 30 | PT Serif, Georgia, 'Times New Roman', Times, | 400 | 16 | 20 | PT Serif', Georgia, 'Times New Roman', Times |
| 4 | Интернет-ресуры | Life.ru | 400 | 44 | 48 | Roboto Slab, serif | 400 | 17 | 24,2857(1.42857) | Roboto, sans-serif; |
| 5 | Интернет-ресуры | Fontanka.ru | 300 | 32 | 38 | Roboto Slab',Tahoma,sans-serif; | 400 | 16 | 20,8(1.3em) | Arial, sans-serif; |
| 6 | Интернет-ресуры | Kp.ru | 700 | 30 | 35 | OpenSans, sans-serif | 400 | 15 | 22 | OpenSans, sans-serif |
| 7 | Интернет-ресуры | Dni.ru | 400 | 24 | 36 | IntroBoldCaps | 400 | 17 | 23,8(1.4) | IntroCondRegular |
| 8 | Интернет-ресуры | M24.ru | 700 | 46 | 46 | Lato | 400 | 18 | 26 | Rubik,sans-serif; |
| 9 | Интернет-ресуры | Meduza.io | 400 | 37 | 38 | PFRegal, Georgia, serif; | 400 | 20 | 27 | PFRegal, Georgia, serif; |
| 10 | Интернет-ресуры | Znak.com | 700 | 40 | 44(1,1) | PT Sans, sans-serif | 400 | 17 | 22,1(1.3) | PT Sans, sans-serif |
| 1 | ТВ-каналы | RT | 700 | 34(3.4em) | 40(1.17647em) | DIN Pro' | 400 | 18(1.8em) | 26(1.4444em) | Segoe UI', Arial, Helvetica, Verdana, Roboto, Calibri, sans-serif |
| 2 | ТВ-каналы | Рен Тв | 700 | 32 | 38,4(1.2) | PT Sans',sans-serif,Arial; | 400 | 17 | 24 | Arial, Helvetica, sans-serif |
| 3 | ТВ-каналы | Россия 24 | 400 | 32 | 36 | RussiaLight, sans-serif | 400 | 16 | 24 | OpenSansRegular, sans-serif |
| 4 | ТВ-каналы | Россия 1 | 400 | 32 | 36 | RussiaLight, sans-serif | 400 | 16 | 24 | OpenSansRegular, sans-serif |
| 5 | ТВ-каналы | Первый канал | 700 | 38 | 40 | PT Sans, serif | 400 | 16 | normal | PT Sans, serif |
| 6 | ТВ-каналы | НТВ | 400 | 34 | normal | PTSerifCaption', Arial, Helvetica, sans-serif; | 400 | 17 | 26 | PTSansRegular', Arial, Helvetica, sans-serif; |
| 7 | ТВ-каналы | Звезда | 700 | 30 | 30 | PT Serif',serif; | 400 | 15 | 20 | Georgia, serif |
| 8 | ТВ-каналы | Дождь | 600 | 32 | 36 | Roboto, sans-serif | 400 | 16 | 22,7(140%) | Roboto, sans-serif |
| 9 | ТВ-каналы | ТВ Центр | 400 | 30 | 30 | Open Sans, sans-serif | 400 | 15 | 20 | Open Sans, sans-serif |
| 10 | ТВ-каналы | Пятый канал | 700 | 24(2.4rem) | 24(2.4rem) | PT Sans, Trebuchet MS, sans-serif; | 400 | 18(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