Каждый блог разработчика я читал перед строительством этого одного использовал таже самый шрифт. Inter, или system-ui, или какая-то геометрическая sans что выглядит отлично на библиотеке компонента и говорит ничего об человеке пишущем. Мой не. Открой любую страницу здесь и ты читаешь Literata, serif, на заголовках и текст тела оба. То не было несчастьем и это заняло дольше приземлиться чем я ожидал.
Отчёт что я дал себе
Когда я сидел вниз переделать посмотреть этого сайта (целая вещь прошла через больше перепроектировок раундов чем я хочу допустить, отслежены как V1 через V7.3 в моих собственных примечаниях если ты хочешь постыдное деталь) первый проход был «примечания поля, мох и бумага.» Общий блог природы энергия. Мой собственный рецензент, которая есть скажи я неделю позже, отклонил это за чтение полностью как каждый другой блог шаблон. Идея что выжила была «журнал, громко»: что-то что читает как настоящий ноутбук кто-то держит, не контент маркетинг приземление страница с блогом прилипнула на.
Sans-serif UI лицо не получает тебя там на свой. Sans это что ты достигаешь по умолчанию потому что каждая система дизайна перевозит один, и потому что это рендирует чистой на маленьких UI размерах. Но параграф текста тело установка в геометрической sans читает как программное обеспечение, не письмо. Serifs несёте тот старый газета-и-книга ассоциацию ли ты хочешь их или нет, и так как этот сайт в основном я пишу об что я строил и что пошло неправильно, я хотел это читать как что-то написанное, не как приборная панель.
Почему Literata специфично
Я не хотел дисплей serif что только работает в размер заголовка и разваливается в 17px. Literata построена ровно за это, это начало жизнь как проект Google для экран на чтение в длине книги, и оно приходит как переменный шрифт, веса 400 через 900, римский и наклонный оба, в одном файле за стиль. Это имеет значение потому что тяжелый вес за h1 и лёгкий за копия тела приходят из одного и того же лица вместо двух разных шрифтов притворяющихся совпадать.
--font-display: 'Literata', ui-serif, Georgia, serif;
--font-body: 'Literata', ui-serif, Georgia, serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;Оба дисплей и тело указывают на таже семью. Заголовки и параграфы таже типография в разных весах, что часть что делает целую страницу читает как один голос вместо шрифта заголовка делающего перформанс над общим текстом тела под это.
Ошибка CDN
Первый проход в наведении этого, я делал что каждый учебник говорит тебе делать: связь тег прямо в Google Fonts, сделано в пять минут.
<!-- первый проход -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Literata:wght@400..900&display=swap"
/>Оно работало, в смысле что шрифт показался. Что я не думал о пока что позже это означает каждый браузер посетителя делает второй сетевой круглый путь в Google прежде чем действительный текст может рендирить, и если тот запрос медленный или блокирован, резервный стек пинает и потом обменивает из под тобой, что это что все жалуются но никто не именует правильно (это не «без стиля,» это «стилирован в неправильном шрифте на секунду»).
Исправление было продавцом его. Я вытянул действительные woff2 файлы из Google Fonts CSS2 API один раз, вручную, и выполнил их под static/fonts/, подмножество вниз в латинский плюс латинский расширенный так я не был доставляющие кириллица и греческие таблицы глифов никто на этом сайте не нуждается:
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/fonts/literata-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}Четыре из этих блоков всего, нормальный и наклонный, латинский и латинский расширенный, каждый со своей unicode-range так браузер только загружает подмножество оно действительно нуждается рендирить страницу перед ним. Нет npm пакета, нет шрифта CDN во время выполнения, ничего не указывает на Google сервер больше. IBM Plex Mono, шрифт блока кода, ещё приходит из Google Fonts CDN потому что это намного меньший запрос (одна пара весов, использованная на коде, не целая страница) и я не доходил до продавца и это тоже. Консистентность должна была бы сказать я должен. Я не имею ещё.
Читание мер, вещь никто не замечает пока это неправильно
Есть CSS класс в расположении называемый .measure:
.measure {
max-width: 68ch;
}ch это единица что означает «примерно ширина символа 0 в текущем шрифте.» Лимит текст тела на 68 тех и ты капсулируешь длину линии где-то вокруг 65-75 символов в зависимости от буквенных форм, что диапазон типография люди цитировали десятилетиями как сладкий пункт перед твой глаз начинает терять его место прыгая назад к старту следующей линии. Полная ширина текст на широком дисплее без меры контроля действительно неудобно читать больше чем параграф, и почти никакой блог шаблон муки выполнять это, они просто позволяют столбцу содержания растянуться куда бы сетка ни дала это.
Я не знал этот термин перед я начал обращать внимание на почему некоторые блоги ощущаются легко читать и другие ощущаются как работа даже когда письмо само по себе хорошо. Это не слова, это длина линии.
Действительная причина, под всем этим
Всё техническое обоснование истинно но это тоже немного после факта. Действительная причина была я хотел эта вещь ощущаться как моя а не как тема я установил. Парень на Lovund пишущий об Django сценарии и половине марафонов в таже типографии Random House использует за действительные книги ощущалось правильным количеством несоответствия. Большинство блогов разработчика sans потому что «чистой» и «технический» попали в уравнение где-то вдоль пути и никто не подвергал это сомнению с тех пор. Мой не должен выглядеть как SaaS страница приземления. Это не один.
Масштаб тоже не плоский
Как только та типография обосновала я всё ещё имел решить насколько громко каждый размер достаёт быть относительно другие. Масштаб типа здесь работает в примерно 1.25 соотношение между шагами, h3 в 1.3125rem, h2 в 1.6875rem, вверх через h1 в 2.125rem, с текстом тела сидящим в 1.0625rem и линия высота 1.65 (то число имеет значение почти столько сколько выбор шрифта, слишком плотно и serif в размер тела получает визуально громко, слишком свободно и параграфы начинают ощущаться отключённые друг от друга). Заголовки поста специфично не следуют той фиксированной лестнице шагов вообще, они масштабируют с clamp() между 2.25rem и 3.5rem в зависимости от ширины видовой части, так как заголовок поста это одно место на странице где я хотел действительно громко дисплей момент нежели другой выход на предсказуемом масштабе. h1 несёт самый тяжелый вес на странице, 800, в то время как h2 через h4 все сидят на 700, так что есть ровно один «крик» во всей иерархии и всё остальное остаётся шагом тише чем это, намеренно.