it-swarm.com.ru

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

Я видел этот вопрос на 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?

31
raklos

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

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

Однако, чтобы помочь вам выбрать правильный путь, эта статья о построении адаптивных макетов предоставляет хороший пример того, как рассчитать базовый 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;
    }
}
40
My Head Hurts

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

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

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

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

Удачи.

3
nikk wong

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

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

1
Florian Rachor