Правильное использование единиц rem

#html #css #шрифты

Допустим, я указываю все размеры шрифтов в 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





Вопрос в том, что делать в таких случаях? Как правильно поступать? Для маленьких
шрифтов задавать значения размера в абсолютных величинах? 
    

Ответы

Ответ 1

Подходов для динамической типографики может быть много, я бы на вашем месте обратил
внимание на возможности функции 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