/* * Типографика Neurogram — один файл на весь сервис. * * Лендинг и кабинет объявляли font-family:'Inter', но Inter никогда не * загружался: ни @font-face, ни ссылки на шрифтовой сервис, ни файлов в * static. Браузер молча подставлял системный шрифт, и весь замысел * оформления держался на том, чего на странице нет. * * Кладём шрифт рядом с собой, а не тянем со стороннего сервиса. Причин * две. Наш же CSP разрешает шрифты только с 'self' и data: — ссылка на * fonts.googleapis.com была бы заблокирована ровно так же молча. И скорость: * один файл с нашего домена приходит вместе со страницей, без второго * рукопожатия к чужому серверу. * * Файл переменный: одна ось насыщенности закрывает все начертания от 100 * до 900. Отдельные файлы под каждый вес весили бы кратно больше — поэтому * подмножества ниже режутся по языку, а не по толщине. * * Шрифт: Inter 4.0, лицензия SIL OFL 1.1 (static/fonts/Inter-LICENSE.txt), * коммерческое использование разрешено. */ /* * @font-face здесь больше нет — правила переехали в templates/_font_preload.html. * * Причина простая: preload в шапке подключает шрифт через asset(), то есть с * меткой версии в адресе, а здесь адрес был голый. Для браузера это два * разных файла: он честно качал подмножество дважды — один раз по preload, * второй раз по @font-face, — и предзагрузка, задуманная как ускорение, * добавляла лишние 103 КБ. Рядом с preload у обеих ссылок общий источник * адреса, и разойтись они уже не могут. * * Побочная выгода: правило видно сразу в , а не после загрузки этого * файла, поэтому запрос за шрифтом уходит на один круг раньше. * * Шрифт: Inter 4.0, лицензия SIL OFL 1.1 (static/fonts/Inter-LICENSE.txt). */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Разрядка. Крупный текст без её сжатия выглядит рыхлым — это первое, что отличает аккуратную вёрстку от небрежной. */ --track-display: -0.03em; --track-heading: -0.02em; --track-body: -0.005em; --track-caps: 0.08em; } html { font-family: var(--font-sans); /* opsz у Inter правит толщину штрихов под кегль: мелкий текст не плывёт, крупный не выглядит грубым. */ font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); letter-spacing: var(--track-body); /* Контекстные альтернативы и настоящие дроби — мелочь, из которой складывается ощущение готовой вещи, а не черновика. */ font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss03' 1, 'calt' 1; } h1, h2, h3, h4, .h-display { letter-spacing: var(--track-heading); } h1, .h-display { letter-spacing: var(--track-display); } /* Цифры в таблицах и счётчиках должны стоять в колонку: без этого строки с разными числами «дышат» по ширине и таблица выглядит неопрятно. */ .tnum, table, .acc-stat-num, .stat-num, .metric-value { font-variant-numeric: tabular-nums; } code, pre, .mono { font-family: var(--font-mono); letter-spacing: 0; }