Почему рукописный шрифт обрезается при увеличении кегля: проверяем строку и контейнер

Если у рукописной буквы исчезает верхняя петля или нижний выносной штрих, проблема не всегда находится в самом шрифте. При увеличении кегля тесная строка, фиксированная высота блока или скрытый overflow могут срезать часть уже правильно нарисованного знака. Проверяйте один и тот же текст на нескольких размерах и отдельно смотрите контур буквы, строку и внешний контейнер — так вы поймёте, что именно нужно исправить.

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

Контур глифа обрезан внутри файла. У знака не хватает части рисунка ещё в самом шрифте: например, верхний штрих упирается в границу ячейки. Если он отсутствует во всех тестах и экспортированных изображениях, возвращайтесь к исходному контуру или проверьте метрики при сборке.

Строка слишком тесная. Контур есть, но строка текста не оставляет пространства сверху или снизу. Чаще это заметно у букв «д», «у», «р», «ф», а также у прописных и украшенных форм с крупными петлями. Соседние строки могут не обрезать их, а визуально задевать.

Контейнер скрывает выходящий контент. Родительский элемент ограничен по высоте и часто использует overflow: hidden или overflow: clip. При росте текста его содержимое выходит за границы, и браузер обрезает всё, что находится за ними.

Обрезается сам макет. В редакторе, презентации или видеоредакторе текстовый объект имеет фиксированную рамку. Шрифт может отображаться правильно в браузере, но поле с заданной высотой не увеличивается вслед за кеглем или переносом строки.

Не делайте вывод по одному скриншоту. Сначала поставьте диагноз: видна ли пропажа в отдельном увеличенном глифе, в строке без фона или лишь внутри конкретной карточки? Это экономит время на бесполезной перерисовке букв.

Соберите короткий образец, который намеренно нагружает вертикальные границы. Включите строчные с выносами, буквы с петлями, прописные, знаки с надстрочной частью и сочетания соседних строк. Подойдёт, например: «У подъезда фиолетовый фонарь», «Фёдор упрямо рисует букву р», «Йога: ёлка, цыплёнок, дудка».

Не ограничивайтесь отдельными буквами: в реальной строке сочетание форм меняет ощущение высоты. Поставьте контрольный текст в нескольких режимах:

Используйте тот же текст на всех образцах и помечайте размер рядом в собственной таблице или заметках. Сначала не меняйте фон, начертание, ширину блока и межстрочный интервал. Если одновременно менять условия, сравнение теряет смысл.

Выберите размер, в котором шрифт будет применяться, и соседние значения выше и ниже. Не нужно начинать с универсальной шкалы: задача — поймать место, где появляется дефект, а не найти «правильный» кегль для всех проектов. Например, если рабочий заголовок планируется крупным, проверьте именно его и на ступень меньше и больше. Если это подпись, сравните ожидаемый размер с окружающими размерами в макете.

Запишите для каждой пробы не только кегль, но и условия. Например, «32 px, одна строка, ширина 280 px, line-height 1.15, overflow visible». Единицы и их значение зависят от приложения: в браузере px — CSS-пиксель, в редакторе могут быть пункты или собственные единицы. Здесь важнее повторяемость внутри одного теста. При печати дополнительно фиксируйте фактический масштаб страницы, но не смешивайте печатную пробу с экранной.

В каждом размере отметьте: цел ли контур, есть ли запас до границы строки, не касается ли вынос соседней строки, появляется ли обрезка после попадания текста в рамку. Если дефект возникает только при самом большом размере, не считайте автоматически, что большой кегль «ломает шрифт»: причиной может быть, например, фиксированная высота карточки.

Проведите три короткие проверки с одним тестовым фрагментом. Первая — изолируйте слово на свободном фоне без ограничения высоты. Если отдельный знак уже повреждён, ищите проблему в контуре, экспорте или способе отображения шрифта. Сохраните крупное изображение и сравните с чертежом или исходным файлом, если он доступен.

Вторая — верните соседние строки, оставив контейнер свободно растущим. Увеличьте межстрочный интервал на время диагностики. Если выносы перестали сталкиваться, но остались целыми, проверьте высоту строки и правила отступов. CSS-свойство line-height задаёт предпочтительную высоту строки и участвует в расчёте её компоновки; фактическая высота глифов и их метрики тоже влияют на видимый результат. Поэтому механическое применение одного коэффициента не гарантирует одинакового запаса для разных гарнитур. Это соответствует описанию line-height в спецификации CSS Inline Layout.

Третья — поместите тот же текст обратно в целевой блок и временно отключите фиксированную высоту, обрезку и маски, если редактор позволяет. Если исчезновение детали пропало, источник — рамка, а не рисунок буквы. В веб-макете отдельно проверьте height, max-height, overflow, ограничение числа строк, абсолютное позиционирование и клиппинг через clip-path или маску. В графическом редакторе ищите текстовую рамку и настройки автоподгонки.

Когда симптомы расходятся, не пытайтесь исправить их одним приёмом. Увеличение line-height поможет строке, но не отменит overflow: hidden у родителя. Снятие рамки сохранит штрихи, но может привести к наложению текста на соседние элементы. Диагноз должен соответствовать уровню, на котором находится дефект.

Для проверки сначала задайте контейнеру достаточно пространства, чтобы он мог показать полную высоту текста. Уберите временно запрет переноса, обрезку после нескольких строк, маску и фиксированное значение height. Если тестируете компонент, скопируйте его в отдельную пробную область, чтобы исходный макет остался нетронутым.

Затем верните свойства по одному. Поставьте целевой кегль, задайте реальную ширину, включите выбранный line-height, потом верните ограничение по высоте, если оно действительно нужно. Наблюдайте, после какого действия исчезает петля. Такой порядок точно локализует условие. Для адаптивного блока повторите тест на широкой и узкой ширине: перенос может добавить ещё одну строку и сделать ограничение заметным, хотя кегль не изменился.

В CSS для длинного текста часто удобнее задавать межстрочный интервал числом без единиц, чтобы он масштабировался относительно текущего размера шрифта, однако выбор значения зависит от конкретной гарнитуры, кегля и назначения блока. Не копируйте чужое значение вслепую. Сравните строки рядом и убедитесь, что увеличение текста не приводит к столкновению выносных частей. Сам line-height — только одно из условий: вертикальное центрирование в фиксированной кнопке, отрицательные отступы и обрезка родителя могут создавать похожий эффект.

Если компонент обязан иметь фиксированную высоту, решите, что важнее: сохранить весь текст, ограничить его количество или строго удержать размер блока. Для заголовка часто можно разрешить блоку расти. Для плотной карточки подойдёт перенос на дополнительную строку. Обрезка с многоточием уместна лишь когда удаление хвоста допустимо; она не должна незаметно срезать верх или низ самого символа.

Используйте то приложение, где шрифт будет работать: браузер, редактор макетов, офисную программу или инструмент публикации. Один экспортированный PNG не показывает поведение текстовой рамки в другом приложении. Убедитесь также, что каждый тест загружает нужный файл шрифта, а не системный запасной шрифт: при подмене метрики и вертикальные пропорции могут измениться.

Сравнивайте при одинаковом масштабе просмотра и одинаковом физическом размере интерфейса. Масштабирование страницы и размер самого текста — разные воздействия. В первом случае может измениться масштаб всей композиции, во втором — кегль внутри неё; для локализации вертикальной обрезки изменяйте именно размер текста и сохраняйте остальные условия.

Если проблема возникает только после преобразования текста в кривые, растеризации или экспорта, отдельно проверьте предпросмотр до и после преобразования. Изменение самого формата вывода может повлиять на край штриха, но фиксированная рамка всё равно останется отдельной причиной. Сохраните исходный редактируемый макет, чтобы можно было сравнить слои и вернуться к текстовому объекту.

Перед использованием или публикацией шрифта пройдите эту короткую последовательность:

Не обязательно. Сначала проверьте эту букву отдельно, без ограничений, а затем в строке и целевом блоке. Если контур отсутствует во всех условиях, вернитесь к исходному глифу или файлу. Если он целый отдельно, ищите тесную строку или обрезающую рамку.

Крупный размер делает вертикальные пропорции и запас до границы заметнее, а тот же текст может начать выходить за фиксированную высоту блока. Маленький превью-образец часто не показывает, что произойдёт при переносе или включении обрезки. Сравните уровни отдельно.

Только если причина действительно в недостаточной высоте строки или столкновении соседних выносов. line-height не отменяет заданную высоту родителя, overflow: hidden или обрезку текстового объекта. Проверьте три уровня: контур глифа, строку и внешний блок.

Для первичного теста достаточно набора, который содержит самые высокие и низкие формы, а также повторяющиеся сочетания на соседних строках. Если в пробе обнаружился дефект, подробно исследуйте его глифы и условия. Для финальной сдачи проверьте весь нужный алфавит в целевом макете.

Сначала определите, можно ли разрешить перенос, уменьшить количество текста или перенастроить вертикальное выравнивание. Если содержимое обязано поместиться, проверьте его на максимальном планируемом размере. Не допускайте скрытой обрезки частей букв как случайного побочного эффекта рамки.

Картинка полезна для осмотра контура и результата экспорта, но не показывает, как текстовый блок реагирует на смену кегля или ширины. Сохраняйте тест и как редактируемый текст в целевом приложении, и как снимок конкретного результата.

При смене кегля разделяйте три уровня: форму глифа, высоту строки и границы контейнера. Проверяйте неизменный образец в нескольких размерах, локализуйте момент обрезки и возвращайте свойства макета по одному. Так вы сохраните настоящий рисунок рукописных букв и обнаружите, нужно ли менять шрифт или только настройки текстового блока. Создать собственный набор букв и перейти к проверке его в макете можно на Fontgenerator.