Выбор подходящего веса шрифта и высоты строки

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

Я знаю, что изо всех сил пытаюсь определить размер вещей с помощью моего домашнего руководства по стилю типографики:

руководство по стилю домашней пивоварной типографики

Я пытаюсь объединить эти шрифты с графическим стилем, который должен быть достаточно точным, см. ниже:

урегулировать конфликты размеров

Кажется, неважно, как я устанавливаю размер своих значков, вес линии, радиус угла, высоту строки, размер шрифта в пределах этой высоты строки или что-то подобное. Я никогда не придумывал подходящего «вертикального ритма», здесь изображен 14pxжирным жирным текстом, в пределах 19pxвысоты строки, я не могу придумать красивое выравнивание и интервал рядом с 40pxвысоким значком, с 4pxлинией взвешивания, с 8pxвзвешенными закругленными углы.

Я не хочу абсолютных ответов типа «сделайте ваш текст X высотой», но есть ли место для начала со структурных элементов, таких как значки и строки, а затем работать в обратном направлении до подходящей высоты строки и размера шрифта?

Высота строки 30, размер шрифта ~ 20/22, например, чтобы соответствовать размеру значков?

Не могли бы вы пояснить, чего конкретно вы хотите добиться — каким должен быть «вертикальный ритм»? Это просто вопрос правильного выравнивания текста и значков, или вы также пытаетесь соответствовать визуальному весу значка? PS При редактировании вопроса вы также можете отредактировать заголовок, чтобы было ясно, что вы ищете процесс выбора веса и высоты текста, чтобы дополнить значок.
установите высоту строки равной высоте значка для текста в мертвой точке; если вы хотите разместить свои иконки на jsfiddle, я буду рад показать вам, что я имею в виду.

Ответы (1)

Это может зависеть от того, что вы пытаетесь создать. Если вы хотите, чтобы рядом со значком был текст — вы можете рассмотреть возможность использования элементов списка со значками в качестве настраиваемых маркеров. Это автоматически центрирует изображение с текстом независимо от размера шрифта. В этом примере вы можете отредактировать высоту строки, отрегулировав нижнее поле каждого элемента «li». Есть много других способов сделать это. Если вы хотите просто изменить высоту строки, создайте правило css для «высоты строки». Я согласен с @AmeliaBR, возможно, вы можете переформулировать наш точный вопрос, чтобы было более ясно, чего именно вы хотите здесь достичь.

Что, как говорится. Вы можете получить более подробные ответы о кодировании для разработки переднего плана на stackoverflow.com.

Понял, мог бы и лучше сказать. Если вы хотите узнать больше о веб-типографике, вот хороший источник: webtypography.net .
Выбор подходящего веса шрифта и высоты строки
СпросиСетьПолитика конфиденциальности1y, 0v