Простые рекомендации по размеру шрифта на сайте

Очень часто бывает так, что все вроде «вылизано» на сайте и проставлены все необходимые обратные ссылки. Однако посещений мало или  их нет совсем.

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

Рекомендации  по размеру шрифта на сайте

Сколько раз вы ловили себя на том, что щуритесь на веб-сайт, пытаясь прочитать текст, и были вынуждены увеличивать масштаб в браузере? Или текст был слишком большим, и из-за этого было трудно следить за ходом текста, и ваше внимание было рассеяно? Это имеет место на большом количестве сайтов.

Но на вашем сайте, вроде бы такого нет. Ничего удивительного «Своя рубашка всегда ближе к телу» Рекомендуем проверить свой сайт на размер шрифта и исправить все недоработки, если таковые имеются.

Размер шрифта для мобильного сайта

Просмотр интернета на мобильных устройствах вырос на 232% за последние 5-7 лет, а в 2021-2022 годах доля просмотров веб-страниц с мобильных устройств составляла 68% .

Мобильный просмотр продолжает расти, и маловероятно, что настольный просмотр снова возьмет верх. Имеет смысл только то, что компании также оптимизируют свой веб-сайт для просмотра на мобильных устройствах.

Какие размеры шрифта для мобильной версии сайта выбрать?

Размер для ввода текста должен быть не менее 16 пикселей, потому что, если он меньше, браузеры iOS, как правило, автоматически увеличивают масштаб страницы, заставляя вас уменьшать масштаб и читать остальную часть текста.

Для размера содержимого сайта, используйте текст размером около 16 пикселей и убедитесь, что, когда телефон находится на естественном расстоянии, вы можете легко его прочитать.

Когда дело доходит до вторичного текста, сделайте его на пару размеров меньше 14 пикселей, чем размер, который вы выбрали для основного размера, чтобы люди могли различать их.

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

Шрифт заголовка на сайте, должен быть всегда больше

Люди редко читают текст целиком; вместо этого они просматривают текст в поисках вещей, которые их больше всего интересуют. Заголовки дают им возможность точно знать, о чем абзац и полезен ли он им или нет.

Заметили, что основной текст намного больше? Потому что они хотят, чтобы вы сначала прочитали это, а потом все остальное. Иерархия между заголовком и текстом легко различима.

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

Идеальные размеры шрифта для просмотра стационарном компьютере или ноутбуке

Когда дело доходит до просмотра стационарном ПК, все немного сложнее. Есть два разных типа страниц, которые имеют разные правила: страницы с большим количеством текста и страницы с большим количеством взаимодействия.

Страницы с большим количеством текста

Текстовые страницы — это, как следует из названия, веб-страницы, на которых много текста, как в этой статье, которую вы сейчас читаете. Их цель состоит в том, чтобы их читали, и они не имеют большого взаимодействия.

Поскольку люди посещают страницы с большим количеством текста с целью чему-то научиться, вы не хотите, чтобы они напрягали глаза, поэтому вам нужен больший размер шрифта. 16 пикселей — это минимальный размер для этих страниц, а 18 пикселей — отличный размер.

Если вы хотите увеличить размер шрифта до 18 пикселей, вы можете попробовать его, потому что существует множество веб-сайтов, на которых работают шрифты большего размера.

Интерактивные страницы

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

Если вы посмотрите, например, на социальные сети, вы заметите, насколько мал весь текст (представьте, как хаотично они выглядели бы, если бы их текст был размером 18 пикселей!).

Хотя многие соцсети позволяют вам настроить размер шрифта на тот, который вам больше всего подходит. Однако их размеры по умолчанию очень маленькие.

Возьмем например Facebook и Твиттер

  • Если вы посмотрите на Facebook, размеры текста варьируются от 12 до 14 пикселей, никогда не достигая 16 пикселей.
  • Твиттер немного другой. Размеры варьируются от 15 пикселей (размер тела) до 23 пикселей (текст «Настройте вид»).

Подытожим

Размер зависит от веб-сайта и вашего вкуса, но если у вас есть тонна контента на странице, с которой люди могут взаимодействовать, вам абсолютно необходимо сделать его комфортным, когда дело доходит до размеров.

Если вы хотите использовать шрифт большего размера, убедитесь, что текст, в котором он будет, очень важен.

Почему минимальный размер шрифта 16 пикселей для основного текста?

Мы упоминали, что 16 пикселей — это минимальный размер основного текста для большинства веб-сайтов. Это размер текста, который браузеры отображают по умолчанию, а 16-пиксельный текст на экране примерно такого же размера, как текст, напечатанный в книге.

Когда вы сидите удобно, большинство людей находятся на расстоянии от 50 до 58 см от экрана (рекомендуемое расстояние — 71 см), поэтому вы хотите, чтобы они могли читать ваш текст, не напрягая глаз. И шрифт который меньше или больше  16px, может быть проблемным для чтения информации.

Теперь вы можете сказать, что функция регулирования масштаба в браузере существует.

Большинство людей даже не знают, что они могут увеличивать шрифт в своих браузерах. У многих из них даже нет терпения, чтобы сделать это (подумайте об этом, облегчите этим людям чтение изначально установите размер шрифта 16px., для основного текста.

В этом случае ваш сайт будет иметь конкурентное преимущество среди других сайтов схожей тематики).

Почему размер текста так важен?

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

Размер шрифта для заголовков

Заголовок — это текст самого большого размера (H1), а все остальные заголовки меньшего размера.

Есть H2, H3 и многие другие заголовки, которые вы можете использовать, чтобы показать, что один из них связан с другим.

Если вы посмотрите на блоги, размещенные движке WordPress, то

  • размер заголовка H2 составляет 38 пикселей;
  • размер заголовка H3 — 25 пикселей;
  • а основной текст — 16-18 пикселей.

На страницах, где много текста, и это отлично работает.

Не забывайте о межстрочном интервале

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

Межстрочный интервал в значительной степени способствует общей читабельности, а межстрочный интервал 130–150 % является идеальным.

Чаще всего используется 140%, но это зависит от сайта и вашего вкуса. Кроме того, убедитесь, что ваши строки не слишком длинные, потому что очень длинные строки могут сбить с толку глаз (обратите внимание, что строки в этом тексте очень короткие).

В заключении

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

16 пикселей — это минимум, когда речь идет о просмотре на стационарном ПК и около 16 пикселей на обильных устройствах подойдут размеры около 16 пикселей.

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