Какой правильный размер шрифта на сайте? Как выбрать размер шрифта на вашем сайте или тот, на котором вы разрабатываете дизайн? Это правда, что вы просто поставили 16-пиксельные тексты тела, и все в порядке?
Выбор размера текста, основного текста веб-сайта, на самом деле является одним из наиболее важных аспектов всего дизайна самого сайта. Независимо от того, решаете ли вы, какой размер шрифта должен быть в статьях вашего блога, на вашей домашней странице, на веб-сайте или в шаблоне, над которым вы работаете как веб-дизайнер.
На большинстве сайтов слишком мелкий текст
Большинство веб-сайтов в обращении имеют шрифты, размер основного текста которых составляет около 14/16 пикселей , некоторые даже меньше, некоторые около 18 пикселей и даже меньше 20 пикселей.
Интернет – это инструмент, в котором главную роль играет контент. Контент может быть изображением, видео или, как в большинстве случаев, текстом.
Хотя многие люди часто читают только заголовки и подзаголовки статей и контента на веб-сайтах, текст является наиболее важным элементом веб-сайта.
Это самый важный элемент, потому что это контент, это то, что ищет пользователь, посетитель. В большинстве случаев вы нажимаете на статью, чтобы прочитать ее текст.
Так зачем ограничивать его эффективность, представляя его в слишком маленьком размере? Зачем заставлять людей приближать лицо к экрану (или увеличивать масштаб), чтобы лучше читать?
До недавнего времени даже этот сайт, Grafigata, имел слишком мало символов. После некоторых экспериментов я решил значительно увеличить размер текста на 4 пикселя для основного текста и на 2/3 пикселя для различных заголовков (h1, h2, h3 и т. д.).
Это позволяет вам, согласно исследованиям и экспериментам, которые я провел, иметь лучший пользовательский интерфейс, чем раньше и, возможно, по сравнению со многими другими сайтами в сети.
Но я создал Grafigata.com не для того, чтобы соревноваться, у кого самое крутое ситарелло. Я создал его, чтобы делиться знаниями. Итак, в этой статье я собираюсь проанализировать каждый аспект, связанный с размером онлайн-текстов.
Итак, давайте разберемся в причинах этого выбора увеличения размера текстов. Попробуем разобраться, прежде всего, когда текст слишком мелкий и почему на сайтах тексты в среднем такие маленькие.
Когда текст слишком мал?
Как упоминалось ранее, большинство сайтов имеют размеры от 14 до 18 пикселей (не pt, что является другим вопросом, как я объясню чуть позже), в то время как очень немногие имеют размеры 20 пикселей или более.
Перед тем, как вы наткнетесь на очень правильную критику, которую вы могли бы сделать в мой адрес, я хочу уточнить с самого начала, что да, тексты «стандартного» веб-размера, такие как 16px, безусловно, легко читаются с нужного расстояния.
Размеры этого типа (или даже меньшего размера) идеально подходят для некоторых типов использования в Интернете, таких как подписи или другие элементы графического интерфейса.
Однако в текстах, особенно если они длинные или сложные, важно, чтобы удобочитаемость текста ставилась на первое место. Впрочем, и здесь можно смело сказать, что на мобильном телефоне тексты такого типа читаются легко, без проблем. На самом деле большая проблема «слишком мелкого» текста встречается на компьютерах, особенно с экранами большого или высокого разрешения.
Интернет-текст должен быть максимально легко прочитан с любого устройства. А мелкий текст на больших экранах уж точно не облегчает чтение.
Почему не используются большие размеры?
В основном это выборы, связанные с прошлым, с тем, что всегда было. Мы привыкли к определенным стандартам дизайна, не адаптируясь к изменениям в технологиях. Короче говоря, это один из тех случаев, когда «это всегда делалось так» приводит к плохому дизайну.
Итак, давайте рассмотрим основные причины, по которым мы не используем большие размеры текста.
Первая причина: история размера текстов
В доцифровую эпоху в сфере только печатной графики стандартом размеров было 12pt . Да именно pt, то есть типографские точки, а не пиксели. Типографский балл — это единица измерения размера текстов. Есть разные типы (европейский пойнт, американский), но они очень мало отличаются друг от друга, поэтому для удобства в этой статье я буду говорить только «типографский пойнт». Действительно, «пт».
Что нас интересует в этой статье, так это то, что в 1990 -х годах произошли первые стандартные преобразования между pt и px . На ранних цифровых экранах преобразование было довольно простым. На ранних компьютерах Mac из-за низкого разрешения 12pt равнялось 12px при разрешении 72 ppi , а на компьютерах Microsoft 12pt равнялось 16px при 96ppi .
В течение 90-х и 2000-х годов стандарты, вытекающие из типографики на бумаге, продолжали поддерживаться даже в цифровом формате, и стандарт 12pt / 12px продолжал оставаться предпочтительным. Веб-сайтов с текстом размером 16px было очень мало, и они считались почти любительскими.
Однако в последние годы что-то изменилось. С одной стороны, это появление адаптивного веб-дизайна, т. е. создание веб-сайтов, которые адаптируются ко всем экранам, от 27-дюймового Full HD до экранов смартфонов, а с другой стороны, прежде всего, экранов с невероятно высокими разрешениями. Экран любого смартфона, имеющегося сегодня в обращении, несравненно лучше, чем у монитора 90-х годов.
Это все изменило. Текст размером 12 пикселей стал нечитаемым на экранах с высоким разрешением. Даже 16px начинают считаться маленькими и трудными для чтения!
Вторая причина: большие размеры считаются «некрасивыми».
Я упоминал об этом некоторое время назад, и это тесно связано с предыдущей причиной. Дизайнеры 90-х годов, те, кто хорошо проектировал сайты, в стандарте использовали 12px . Таким образом, веб-сайты с более крупными текстами выглядели почти дилетантски, классический сайт, сделанный неопытным ребенком или тем, кто мало знал о правилах веб-дизайна того времени.
Эта концепция, хотя и постепенно изменилась в сторону 16 пикселей, все еще существует и пронизывает большую часть мира дизайнеров.
Существует заблуждение, что большие тексты — это ребячество, несерьезность и непрофессионализм.
Чего эти дизайнеры не понимают, так это того , что не размер текста вызывает чувство несерьезности или отсутствия хорошего дизайна, а шрифт , который делает это. Именно его дизайнерские характеристики, кернинг, управление межстрочным интервалом, настроение шрифта вызывают эти ощущения.
Третья причина: «Вы можете так сильно увеличивать масштаб, верно?»
Конечно. В браузерах можно увеличивать, это правда. Что, собственно, я и делаю, когда попадаю на сайты (типа Википедии) с мелкими, плотными и очень утомительными для чтения текстами.
Но это определенно не то, на что должен полагаться дизайнер, дизайнер, верно?
Прежде всего потому, что не все пользователи знают об инструменте масштабирования или хотят его использовать. Действительно, люди с проблемами зрения, как правило, пожилые люди и даже меньше, чем мы, молодые люди, знают инструменты, необходимые для простого масштабирования. Во- вторых, потому что, увеличивая масштаб, вы рискуете «испортить» макет сайта.
Основная цель дизайнера веб-сайта — предложить пользователю наилучшие возможности, при этом ему не нужно ничего делать, даже не нажимая Ctrl +, чтобы немного увеличить масштаб.
Четвертая причина: мы хотим избежать прокрутки
Часто бытует мнение, невероятно ошибочное, что избегание прокрутки , то есть прокрутки с помощью колесика мыши, — это лучшее, что можно сделать для улучшения пользовательского опыта.
Целые веб-страницы спроектированы так, чтобы они были как можно короче, чтобы не приходилось «заставлять» пользователя прокручивать колесико.
Проблема в том, что когда вы имеете дело с сайтом, разработанным с таким заблуждением, вы видите текст, сжатый на странице, или даже не находите нужную информацию, потому что «это не никогда! Пользователь не должен прокручивать!».
Чего дизайнеры этого типа не понимают, так это того, что прокрутка — это естественный жест тех, кто бродит по Интернету, в отличие от масштабирования. Любой, кто посещает веб-сайт с компьютера, готов с мышью в руке и с пальцем на колесе, готов прокрутить вниз, чтобы прочитать содержимое. Тот, кто заходит со смартфона, как только он посещает какой-либо контент, сразу готов прокрутить пальцем вниз по экрану.
Черт возьми, есть целые поколения, такие как мое и последующие, выросшие на сайтах и в таких приложениях, как Facebook и Instagram, где прокрутка является основным методом навигации!
Зачем избегать этого и ограничивать текст небольшими пробелами и размерами?
Это были основные причины, по которым до сих пор существует множество сайтов с такими маленькими размерами текста. Как вы видели, это легко оспариваемые причины, связанные с устаревшими концепциями, которые больше не действуют в современной сети.
Теперь я хочу поговорить с вами о причинах, почему тексты должны быть больше, затем я скажу вам, насколько больше, и, наконец, я приведу вам несколько примеров и тематических исследований.
Зачем использовать большие размеры текста
Хорошо, давайте лучше проанализируем, почему использование более крупного текста даже всего на несколько пикселей приводит к невероятно лучшему эстетическому результату и удобству использования. Даже простое изменение размера основного текста с 16 пикселей на 18 пикселей или, что еще лучше, на 20 пикселей приводит к глубоким изменениям во влиянии и удобстве использования всего веб-сайта.
Даже издалека лучше читается
Это может показаться невероятной банальностью, но на самом деле это тоже аспект, связанный с различным использованием Интернета в последние годы. Интернет развивается, а вместе с ним и устройства, с помощью которых мы получаем к нему доступ. Точно так же привычки людей меняются, когда они пользуются Интернетом.
Например, доступ в интернет через смарт-телевизоры получает все большее распространение (хотя и нишевое). За дизайном графики для телевизоров стоят настоящие аналитические исследования о том, с каких расстояний можно наблюдать за экраном в зависимости от его размера.
Там, где экран мобильного телефона становится настоящим протезом руки, когда мы используем его для серфинга в Интернете, поэтому с экраном, довольно близким к лицу, тем, кто использует большие экраны для навигации, нужны тексты, которые легко читаются даже более далекий.
Представьте себе веб-сайт с текстом размером 12 пикселей на 27-дюймовом экране QHD. Как вы думаете, каким будет пользовательский опыт? Плохо, верно. При увеличении текст будет занимать всю ширину экрана (или большую его часть), что затрудняет чтение построчно. Обходной путь состоит в том, чтобы увеличить размер шрифта в браузере или на компьютере, но вам следует настраивать размер шрифта каждый раз, когда вы переключаетесь между сайтами.
Вместо этого веб-сайт с, например, текстом в 20 пикселей будет иметь хорошую читаемость даже с расстояния, позволяя читать на любом экране, не занимая всю его ширину за счет увеличения на большом экране.
Улучшить читаемость (и не только разборчивость )
В итальянском языке оба эти слова, читабельность и разборчивость , называются «читабельность», но в английском они имеют чрезвычайно важный нюанс значения в мире типографики.
Следовательно, удобочитаемость — это те характеристики, которые делают один шрифт более читаемым, чем другой (высота x, контрастность и т. д.), а удобочитаемость — это набор свойств, которые делают текст легко читаемым. Итак, кернинг, межстрочный интервал, хорошее разделение на абзацы и размер текста.
Улучшая читабельность, мы облегчим пользователю сайта чтение контента.
Улучшить пользовательский опыт
Увеличение размера тела текста на несколько пикселей (см. далее, в третьей части статьи, на сколько) также улучшает юзабилити, или юзабилити, а значит, и пользовательский опыт.
Если пользователь изо всех сил пытается прочитать содержимое страницы, его опыт работы на веб-сайте будет хуже.
Преимущества лучшего взаимодействия с пользователем благодаря лучшей читабельности многообразны. Пользователь будет избегать посещения других сайтов, чтобы найти полезную информацию, будет читать содержание и, вероятно, легче запомнит посещенный сайт.
Это круче, современнее и эффектнее
Веб-дизайн меняется. И веб-сайты, которые заботятся о типографике даже с помощью более крупного текста, безусловно, более эффективны.
Но сайты с заботой о типографских аспектах не только более эффективны, они также дают представление о том, чтобы быть более современными.
Как оптимизировать размер шрифта на сайте
Если вы разрабатываете веб-сайт или работаете над своим личным портфолио или блогом, одним из аспектов, который вам нужно сразу же учитывать как решающий в вашем дизайне, является текст. То, что на жаргоне веб-дизайна называется «основным текстом».
Как вы видели в этой статье, это очень важный аспект веб-сайта, и о нем следует позаботиться с самого начала.
Итак, давайте рассмотрим несколько практических советов по оптимизации управления шрифтами на веб-сайте и, в частности, по использованию правильного размера.
Используйте шрифты, которые хорошо масштабируются
При выборе шрифта для веб-сайта наиболее важными аспектами , которые следует учитывать при выборе, являются 2.
- Первое, и мы уже говорили о нем, это читабельность шрифта (разборчивость + читабельность).
- Во-вторых, размерная масштабируемость шрифта.
Давайте объясним второй пункт немного лучше!
Шрифт, выбранный для веб-сайта, должен хорошо масштабироваться от маленького до большого. То есть на практике он должен хорошо выглядеть как в 12px, так и в 24px.
Существуют шрифты, такие как Georgia и Arial (два классических варианта цифровой типографики), которые были разработаны для размера 12/14 пикселей и которые при размерах более 20 пикселей кажутся неуклюжими и раздражающими.
В зависимости от типа эффекта, который вы хотите передать, вы можете выбрать для веб-сайта шрифты как с засечками (с благодарностью), так и без засечек (без благодарностей и палочек).
Среди шрифтов без засечек, которые хорошо масштабируются и которые вы можете использовать для своего веб-сайта, есть некоторые шрифты Google, такие как Roboto, Lato (который я использую здесь, на Grafigata) или Open Sans. Но также и другие шрифты, такие как Futura или Atlas Grotesk.
С другой стороны, среди шрифтов с засечками мы можем упомянуть, например, Google Fonts Merriweather и PT Serif.
Возьмите 20px в качестве нового стандарта
И это не означает, что теперь весь основной текст на всех веб-сайтах должен быть размером 20 пикселей.
Есть шрифты, которые имеют очень большую x-высоту и поэтому крупнее других (например, Side, которую вы читаете, или Verdana). Такие шрифты нельзя отображать с размером 22 пикселя, потому что они будут слишком большими.
О да, потому что вы не можете просто основывать выбор конструкции на статистике, точных измерениях и математических расчетах. Дизайн сайта должен быть приятным, а не «идеальным».
Итак, совет: начните с 20 пикселей и попытайтесь увидеть, как ведет себя текст, увеличивая или уменьшая размер тела. Ваш глаз сможет помочь вам понять, когда речь идет о текстах, которые действительно слишком велики или слишком малы.
А размер ценных бумаг?
Начиная с 20 пикселей для размера текста, вы также можете постепенно определять размер различных заголовков и субтитров h1, h2, h3 и т. д.
Часто для заголовков выбирается другой шрифт, чем для основного текста. На самом деле, есть шрифты, разработанные специально для показа в больших размерах, так называемые «экранные» шрифты, такие как Akzidenz Grotesk, один из лучших когда-либо созданных шрифтов (у меня слабость к этому шрифту, понимаете?) .
Размер заголовков может сильно варьироваться от сайта к сайту в зависимости от типа потребности и использования. Но если вы начнете хотя бы с 20 пикселей, вы обязательно убедитесь, что они хорошо читаются.
Дизайн различных размеров для шкафа
Я упоминал этот аспект несколько раз в ходе статьи, но теперь я собираюсь углубиться в обсуждение.
90% того, что я написал до сих пор, относится к большим экранам.
Скажем, от тех, у которых ширина 768px и выше. Таким образом, мониторы, экраны ноутбуков, смарт-телевизоры и планшеты располагаются горизонтально.
Для планшетов и смартфонов ситуация немного другая. На самом деле обычно при использовании планшетов или мобильных телефонов они используются очень близко к лицу . Затем вы можете лучше читать и видеть больше деталей.
Таким образом, очевидно, что размеры текста более 20 пикселей создают 2 проблемы на мобильных устройствах:
1. Они занимают слишком много места на экране
2. Они раздражают и чрезмерно большие
Поэтому совет таков: на мобильных устройствах и планшетах немного уменьшите размер текстов.
Хорошо обрабатывать интерлиньяж и длину строки
Размер (текста) — это еще не все, все зависит от того, как вы его используете.
Когда вы работаете с текстом, каким бы он ни был, вы должны быть осторожны, чтобы хорошо управлять его пространством. Как кернинг, так и трекинг, а также управление интерлиньяжем и расчет хорошей длины строки.
Предполагая, что вы выбрали шрифт хорошего качества, который не нуждается в каких-либо изменениях кернинга и трекинга, давайте посмотрим на два других.
Управление интерлиньяжем необходимо для создания текста, который хорошо дышит, а расчет хорошей длины строки гарантирует, что читатель не потеряет знак при чтении слишком длинной строки (и что он не начнет читать, задержавшись).