Допустим, я указываю все размеры шрифтов в rem единицах, далее я при определенном размере экрана задаю уменьшение шрифта, но выходит так, что шрифты, которые до этого уже были маленькими, стали еще меньше, до такой степени, что они более нечитабельны.
Вот пример:
html {
font-size: 10px;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2.5rem;
}
h4 {
font-size: 2rem;
}
p {
font-size: 1.4rem;
}
@media screen and (max-width: 600px) {
html {
font-size: 6px;
}
}
Simple text
Simple text
Simple text
Simple text
Simple text
Вопрос в том, что делать в таких случаях? Как правильно поступать? Для маленьких шрифтов задавать значения размера в абсолютных величинах?
Ответ
Подходов для динамической типографики может быть много, я бы на вашем месте обратил внимание на возможности функции calc() и, может быть, на зависимость размера шрифта от ширины экрана — простейшая формула font-size: calc(1rem + 1vw), с деталями коэффициентов надо уже экспериментировать. Также можете поинтересоваться темой CSS-шлюзов.
В вашем конкретном случае получается так, что вы задаете базовый размер шрифта 6 пикселей — потому естественно, что текст будет очень мелким. Вот пример, как этого частично можно избежать с применением функции calc() и цсс-переменных. Надо добавить увеличивающий коэффициент к тем значениям, которые становятся слишком мелкими на маленьких экранах, в то время как на больших оставить его равным единице.
html {
font-size: 10px;
--font-ratio: 1;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2.5rem;
}
h4 {
color: red;
font-size: calc(2rem * var(--font-ratio));
}
p {
color: red;
font-size: calc(1.4rem * var(--font-ratio));
}
@media screen and (max-width: 600px) {
html {
font-size: 6px;
--font-ratio: 1.25;
}
}
Simple text
Simple text
Simple text
Simple text
Simple text
Комментариев нет:
Отправить комментарий