лучший размер шрифта для мобильных устройств

Question

Я видел этот вопрос на SO:

Каковы наиболее распространенные размеры шрифтов для тегов H1-H6 , при этом рекомендуемые размеры шрифтов для тегов H:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Существует ли «наилучшая практика» для мобильных телефонов?- скажем, размер экрана iphone?

Answer 1

Размеры шрифта в вашем вопросе являются примером того, какое отношение должен иметь каждый заголовок к сравнению друг с другом, а не каким размером они должны быть сами (в пикселях).

Итак, в ответ на ваш вопрос «Есть ли« лучшие практики »для них для мобильных телефонов? - скажем, размер экрана iphone? », да, возможно, есть, - но вы можете найти то, что кто-то говорит, что «лучшие практики» не работает для васlayout.

Однако, чтобы помочь вам выбрать правильный путь, эта статья о построении адаптивных макетов предоставляет хороший пример того, как рассчитать базовое значение font-size в пикселях относительно устройства.размеры экрана.

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

@media (min-width: 858px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 702px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 724px) {
    html {
        font-size: 9px;
    }
}

@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}

Answer 2

Исходя из моего комментария к принятому ответу, существует множество потенциальных ловушек, с которыми вы можете столкнуться, объявив размеры шрифта меньше 12px.Объявляя стили, которые приводят к вычисленным размерам шрифтов меньше 12px, например:

html {
  font-size: 8px;
}
p {
  font-size: 1.4rem;
}
// Computed p size: 11px.

Вы столкнетесь с проблемами с браузерами, такими как Chrome с пакетом китайского языка, который автоматически отображает любой шрифт.размеры, рассчитанные под 12px как 12px.Итак, верно следующее:

h6 {
    font-size: 12px;
}
p {
   font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.   
// How unpleasant of a surprise.

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

Я бывместо этого выберите что-то вроде этого:

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

p {
    font-size: 1rem;
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}

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

В качестве примечания, установка margin-bottom, равная font-size, обычно также имеет тенденцию быть привлекательной, то есть:

h1 {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
}

Удачи.

Answer 3

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

Пример: если ваша база составляет 16px, а p равно .75em (что составляет 12px), вам придется поднять базу примерно до 20px. В этом случае p будет равно примерно 15px, что является минимумом, который я лично требую для мобильных телефонов.