Пользователь
0,0
рейтинг
5 января 2012 в 19:05

Дизайн → Мнение: основной текст в 16px из песочницы

Не так давно во всеми любимом SmashingMagazine была опубликована статья, в которой автор приводит свою теорию о 16 пикселях как размер для основного текста, и приводит доводы в её защиту. Статья вызвала довольно горячее обсуждение, и сегодня мы выкладываем её перевод.

Перевод предоставлен блогом о веб-дизайне Naikom

Для основного текста все, что меньше 16 — ужасная ошибка


Я знаю, о чем вы сейчас думаете: «Он только что сказал 16 пикселей? Для основного текста? Ужасно много! 12 пикселей идеально подходит для большинства веб-сайтов».
Я бы хотел убедить вас в обратном.

Юзабилити-эксперт Оливер Рейхенштейн (Oliver Reichenstein) в статье «The 100% Easy-2-Read Standard» сказал:
«16 пикселей — не много. Это размер текста в браузере по умолчанию. Браузеры были предназначены показывать этот размер… На первый взгляд кажется многовато, но как только вы попробуете, вы сразу поймете, почему все разработчики браузеров выбрали этот размер текста по умолчанию.»

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

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

Читатели это доход

Если вы создаете сайт для кого-то — даже для себя — скорее всего, вашей целью является заработать деньги.

Может быть, продать товар напрямую, или предложить услугу, или просто для получения кликов. В любом случае, это бизнес-актив, и в конечном итоге он должен окупить ваши инвестиции. Он должен приносить доход.
Таким образом, каждый элемент должен быть рассчитан на достижение этой цели. В том числе и текст. Особенно текст — потому что текст убеждает посетителей сделать то, что вы хотите.
Подумайте об этом. Если вы не объясните, что люди должны делать, и почему они должны это делать, то они, конечно, и не станут этого делать. И единственный способ, чтобы сказать им это — текст. А текст подразумевает прочтение.

Важные факты о чтении

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

  1. В 40 лет только половина света проходит к сетчатке, в отличие от 20 лет. Для 60-летних — всего лишь 20%.
  2. Почти 9% всех американцев жалуются на слабое зрение(я не удивлюсь, если у нас в России этот показатель хуже), то есть их зрение не может быть полностью исправлены с линзами.
  3. От расстояния, на котором мы можем читать символы, зависит разборчивость и скорость чтения. Чем больше расстояние, тем выше понимание. Самый важный фактор, который определяет, насколько это расстояние может увеличиться — размера шрифта. Вспомните биллборды, например.
  4. Большинство людей находятся на расстоянии около 50 сантиметров от экрана компьютера. На самом деле, рекомендуемое расстояние — 60 сантиметров, потому что на этом расстоянии можно избежать чрезмерного напряжения глаз. Это гораздо больше, чем расстояние, на котором мы читали напечатанный текст — большинство людей не держат журнал на расстоянии вытянутой руки!
  5. 16-пиксельный текст на экране примерно такого же размера, как текст, напечатанный в книге или журнале. Так как мы читаем печать довольно близко — часто всего лишь на расстоянии в несколько десятков сантиметров — там как правило, шрифт задан около 10pts. Если бы вы читали на расстоянии вытянутой руки, то это был бы такой же размер, как 16 пикселей на всех экранах:

    image
    16px текст на 24' мониторе и 12pt текст в книге

    image
    16px текст на 15,4' мониторе и 12pt текст в книге

  6. В 2005 году был проведен опрос по поводу проблем веб-дизайна, и плохой шрифт получил почти в два раза больше голосов, чем остальные проблемы, две трети опрошенных жаловались на маленький размер шрифта. Если вы думаете, что ситуация с тех пор улучшилась, подумайте еще раз. Я сделал случайную выборку некоторых дизайнов SiteInspire и обнаружил, что средний размер шрифта для основного текста — жалкие 12 пикселей. Некоторые проекты даже использовали и того меньше — 10 пикселей. Ни один из шрифтов не превышал 14 пикселей. Аналогично, если вы сделаете случайные выборки из популярных сегодня Elegant Themes and ThemeForest, то обнаружите, что текст каждой выборки будет размером в 12 или 13 пикселей.

    image



Факт: Большинство пользователей ненавидят «обычный» размер шрифта

Позвольте мне спросить: какой процент ваших читателей составляют люди за 40? Чтобы прочитать текст, их глаза должны работать в два раза больше, чем глаза 20-летнего. Если их возраст приближается к 60, глаза должны работать в четыре раза больше.
Почти 1 из 10 ваших читателей имеют проблемы с глазами. И даже тем, у кого проблем нет, все равно придется напрягаться, чтобы прочитать текст размером меньше чем 16 пикселей, даже если они не замечают, что они делают это. (Как часто вы замечаете, что прижались к экрану?) И если им придется наклоняться, то, скорее всего, им будет неловко и неудобно. Естественная поза перед компьютером — по крайней мере, на расстоянии вытянутой руки от экрана!
Короче говоря, среднестатистического пользователя чтение напрягает.
Чем сложнее прочитать ваш текст, тем меньше смысла будет понято. 10 пикселей будут бесполезны. 12 пикселей — все равно слишком мало для большинства читателей. Даже 14 пикселей могут отпугнуть посетителей, которые бы в противном случае остались.
Таким образом, можно сделать вывод, что если вы хотите добиться максимального числа читателей, то вам необходимо установить его минимальный размер 16 пикселей.

«Но пользователи могут увеличить текст»

«Если вы сделаете правильный код, люди с проблемами зрения всегда могут использовать функцию приближения, чтобы увеличить текст» — так говорил один веб-дизайнер в споре по этому вопросу. На самом деле это не так. Пользователи, которым необходимо изменить настройки, как правило, не умеют этого делать. А те, которые умеют… скорее всего, они изберут более легкий путь, просто нажав кнопку «Назад». Само собой разумеется, что мы не должны использовать деньги наших клиентов, чтобы создавать неудобный для пользователей дизайн. Наши личные вкусы не должны ставиться выше удобства использования.

Веб-дизайн — это не только то, что нравится дизайнерам. Речь идет о том, чего хотят пользователи, и что поможет вам достичь целей наших клиентов.

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

16 пикселей — это не много

Наши дизайнерские вкусы и эстетические предпочтения более гибкие, чем мы думаем. Что нам нравится — в значительной степени результат того, что мы уже видели у других дизайнеров и того, что мы ожидаем.
К сожалению, на большинстве веб-сайтов тексты крошечные, потому что когда-то экраны были крошечными, и дизайнеры еще не оставили эту привычку.
Оригинал этой статьи написан шрифтом размером 19px. Этот размер был выбран, поскольку даже 16-18 пикселей показались слишком мелкими: если устроиться поудобнее в кресле, на расстоянии 70 см от экрана, можно обнаружить, что приходится щуриться, чтобы рассмотреть текст. Если бы я использовал шрифт Georgia или Verdana, 16 пикселей, может быть, и подошли бы: эти шрифты были разработаны с большой высотой букв, и поэтому на экране выглядят больше.

Теперь взгляните на футер и проверьте, не приходится ли вам наклоняться вперед к экрану, щуриться или морщиться, чтобы рассмотреть текст. Ведь его размер 11 пикселей. Если после всего этого я вас все еще не убедил, объясните мне причины в комментариях.
Найко Михаил @naikom
карма
5,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (52)

  • +7
    Я думаю основная проблема в относительности размеров на различных экранах. На каждом экране должен быть индивидуальный DPI, чтобы размер пунктов, не пикселей(!) преобразовывать в задуманный физический размер.
  • +12
    Доводы, конечно, разумные. Но измерять размер шрифта в пикселях и делать на основе этого какие-то выводы о его видимости, мне кажется, глупо, ведь dpi монитора может быть каким угодно. А здесь про dpi даже не упоминается. 16 пикселей хватит всем? Даже экранам современных смартфонов (326 dpi)?
    • +11
      Автор как бы намекает, что на смартфонах лучше уж 16, чем сегодняшние 12. :)
  • +19
    На заметку хабрасоздателям: серые h3-h5 на белом фоне — трудночитаемы — приходится напрягать зрение. Сделайте уж наконец их чёрными && выделенными && размер шрифта от 20px.
    • 0
      Полностью согласен! У меня вообще черно-белый экран (e ink), серые заголовки трудно читать.
      Более того, многие сайты делают полностью со шрифтами цвета #333 и светлее, приходится увеличивать яркость экрана(
    • 0
      Почему-то тоже возник вопрос при чтении этого текста — а почему заголовки серые?
  • +3
    Целиком и полностью согласен с автором, на 22" с разрешением 1650х1080px комфортный масштаб для чтения хабра составляет 172%.
    • –1
      Категорически не согласен. Диагональ — 20, разрешение — 1680х1050px. Только что зашёл в девелоперс-тулз, поставил на Хабре шрифт 16пикселей — стало значительно менее читаемым. Когда по вашему совету оригинальный масштаб увеличил до 172 — стало просто невозможно разобрать слова. Набор огромных, не связанных между собой букв.
      • 0
        Масштаб 172% комфортен для меня, и в комментарии он не более чем показатель разницы между оригинальным и удобным для чтения размером.
        • 0
          Дык я об этом и говорю. Вам, как и автору оригинальной заметки, субъективно проще воспринимать увеличенный шрифт. И прекрасно, что у вас есть инструмент увеличения масштаба. Но зачем преподносить увеличенный шрифт как единственно верное решение.
          • +3
            Никто и не преподносит как единственно верное решение, это всего лишь «Мнение: ...».

            Статья о 16 пикселях, написана размером в 13
    • 0
      Поставил 16px на комменты щас, читать стало сложнее на 24" @ 1920x1200 — 13px самое оно.
    • 0
      22'' разрешение 1920х1080 могу нормально читать с 10px, но 16px конечно лучше
    • 0
      Здесь ещё нужно DPI учитывать. При 144 DPI, на 22" с разрешением 1650х1080px комфортный масштаб 150%. А 144 DPI это само по себе 160% увеличение (настоящий DPI монитора 90).
  • +4
    Я против стандартов в дизайне. Да, есть много случаев, где 16px — лучше. Но есть много случаев, где хуже. На то дизайнер и дизайнер, чтобы продумывать свой дизайн.
    • +1
      Те самые «много случаев» в лучшем случае решаются средствами CSS в зависимости от размеров окна браузера.
  • +6
    Частенько слышу просьбу слелать шрифт крупней. Может стоит попробовать?
  • +2
    готовы ли вы тратить деньги ваших клиентов ради того, что нравится только вам?
    Таки да)
  • +3
    12px — это не самая страшная проблема. Самая страшная проблема — это 9px. И такие сайты встречаются. Вот уж точно люди идут к успеху банкротству.
  • –2
    Я предлагаю заменить 16 на 36 или скажем 72. Читать становится еще интереснее :)
  • +1
    Вот люди стебуться, но меня иногда бесят, скажем, в интро к новости 10-ый шрифт скажем. Если рассматривать хабр — то на экране ноутбука все замечательно и так, но дома, с монитором в 24', который стоит на расстоянии пол метра от глаз, мне больше нравится увеличить масштаб процентов на 20. Так намного приятнее и удобнее.

    Опять же, 16 пикселей не всегда хорошо, как уже отметили выше, все зависит от DPI. Все это конечно решается с помощью media queries, но так же добавляет головной боли…
  • +2
    Самый лучший размер 1em
  • –1
    А на хабре еще любят зачеркивать слова, аль даже целые куски текста, хоть многие, как мне кажется, его все равно пытаются прочесть. И тут уж без разницы 16, аль 12 пикселей…
  • +2
    22'' 1680x1050 через файрбаг сделал текст поста в 16 пикселей. Непривычно, но довольно легче читать :)
    Стоит задуматься.
  • 0
    Можно использовать яваскриптовые кнопочки для управления размером шрифта, видел на некоторых сайтах. Жамкнул А+, и шрифт стал крупнее, жамкнул А- и сделал помельче. Отличный выход из положения, и не надо рыскать по настройкам.
    • +2
      Ctrl+колесо, Ctrl++, Ctrl+-, Ctrl+0 — не?
      • +1
        Как уже говорилось выше, не все дяденьки и тетеньки знают об этих комбинациях клавиш, к тому же увеличение масштаба страницы увеличит и все изображения, что приведет к потере их качества.
  • 0
    23'' FullHD масштаб 130% значительно проще и приятнее читается.
  • +2
    Автор статьи курил, непонятно что.
    Переводчики зчем-то решили это перевести.
    В комментариях какая-то вакханалия про пиксели и увеличение шрифтов.

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

    Пример — на каком-нибудь information architects
  • 0
    Да как-то давно уже привык в хроме для статей нажимать кнопочку плагина iReader'a – там оптимальный размер шрифта (к тому же, настраиваемый) и вытаскивает только текст самой статьи.
    Этот плагин – аналог кнопочки Reeder в Safari.
    Эти вещи появились как раз в силу того, что большинство сайтов с текстовым контентом именно такие, как пишет автор.
    Хотя, конечно, странно, что этот дизайнер размер теста считает в пикселах.
    Даже если посмотреть на комментарии здесь, то видно, что на одних и тех же 22" монитора у многих разные разрешения. Смотреть-то нужно на DPI, а не пикселы, но это я уже повторяю предыдущих ораторов.
  • +3
    читаю хабр в FF, использую увеличение шрифта ctrl-+, ctrl-+ (2 раза)
    посмотрел в firebug'е — основной текст получился 15.6px

    автор прав — 16px оптимально

    p.s. зрение не айс
  • 0
    Сайты, на которых я не могу увеличить шрифт, я вообще стараюсь не читать. Дизайнеров, которые делают 3-х колоночную вёрстку с шириной смыслового столбца пикселов 150 и нестандартными цветами, считаю необходимым бить железной трубой по голове вплоть до понимания идеи: «Интернет — он для чтения, а не для дизайна!»

    Обычно кручу колесо до размера 18-20, если дизайн ещё не совсем разваливается. А если на сайт каждый день захожу (как на хабр), то Stylishем превращаю его в одноколоночный со шрифтом где-то 22px.

    Мониторы у меня 22-24", 1680x1050/1920x1080.
  • +1
    Все так. Вообще все элементы сайта надо делать крупнее. в этом плане мне нравится страница логина на Хабре. Во первых много девайсов сейчас с мелкими экранами, попробуй ткни пальцем или даже стилусом на какую нибудь малюсенькую кнопочку на странице.

    Но самое главное. Мой отец все файлы на компе называет с капслоком. Другой знакомый мужик использует эту же технику. То есть эта проблема для них действительно актуальна! Надо брать на вооружение. Так как количество пользователей интернета кому перевалило за 40 неуклонно продолжает расти.
    • 0
      А не пробовали поменять отцу базовый размер шрифта в операционке? Моей маме помогло, она теперь не капсит :)
  • +1
    Категорически согласен с автором, пользоваться большинством сайтов без увеличения шрифтов очень бьет по глазам.

    Основной браузер Opera — хорошо что там в настройках есть возможность выставить минимальный размер шрифта. Сейчас 18px, и то я не считаю, что это слишком крупные символы, наоборот, иногда приходится терпеть все ещё недостаточно крупные. Да, не все сайты сохраняют корректную верстку при такой настройке, но здоровье важнее.

    Кстати, расскажу историю. В далекие-далекие времена, когда мониторы были стекляными, пришлось поработать пару лет за 15", а потом за 17". Работал в текстовой консоли FreeBSD (админил хостинг), и выбор стоял между стандартным текстовым режимом 80х25, нестандартными VESA режимами типа 90х50 и т.д., и Х-ми с их 1024х768 (больше на 17" было ставить бесполезно). Адекватный нестандартный текстовый режим подобрать не удалось, Х-ы слишком мылили пикселы, пришлось остановиться на обычном древнем текстовом режиме, как в страшном черном DOS ;). Кто помнит DOS, или во что разворачивался FAR менеджер через Alt-Enter — понимает о чем речь ;). Ничего, привык, обустроил, интернет через links, аська через centericq, картинки на работе рассматривать было некогда.

    Так вот, что хорошо запомнилось о тех временах — это насколько легко глаза читали текст, много-много текста, целый рабочий день несколько лет, пока не сменил монитор. Это сейчас приходится одевать в офисе плюсовые очки при работе за компом, чтобы глаза сохранить (это отдельная история). А тогда, повторюсь, целый день читал текст и глаза не уставали совершенно!!! Т.е. вообще никак.
  • 0
    Хабр в хром-плагине stylebot настроен сейчас на 17px (19'', 1280*1024). При масштабировании средствами браузера зачастую разъезжается верстка. Когда-то в опере масштабировался только текст, потом и она стала как все.

    Большой размер шрифта позволяет комфортно читать хабр, откинувшись на кресло на расстоянии 90 см (специально измерил). Стандартный размер могу нормально читать лишь наклоняясь к монитору на 60 см. Это не так удобно и больше напрягаются глаза.
  • 0
    На новогодних выходных сел делать новый сайт. Одна из основных задач, которые перед ним стоят — сделать удобным чтение текстов, которые на нем будут публиковаться, поэтому дизайн и верстка делаются полностью с нуля.

    Основной шрифт: Georgia, 16px, высота строки 140%. :)
    • 0
      Примечание: нет, я не считаю шрифт Georgia особенно выдающимся в плане читабельности текста, но он хорошо вписывался в общий стиль оформления. В общем, суть не в гарнитуре, конечно, я просто имел в виду, что «стандартные» размеры шрифта основного контента меня категорически не устраивали.
  • +1
    Читая в Safari, в том числе и habr, почти всегда использую reader (встроенный плагин для чтения основного текста). В нём шрифт как раз около 16px.
  • 0
    >> Позвольте мне спросить: какой процент ваших читателей составляют люди за 40? Чтобы прочитать текст, их глаза должны работать в два раза больше, чем глаза 20-летнего.

    Не факт. Работа глаз нелинейно зависит от попадаемого в них света.
    Остальные утверждения тоже сомнительны. Но я согласен, что шрифту надо уделать больше внимания.
  • 0
    Уже давненько написал юзерстиль, с которым мне комфортно читать хабр. И все потому что Chrome не умеет масштабировать только текст, не портя картинки увеличением. Может кому-то придется по душе:

    .post .content {
    font-size: 16px;
    font-family: Arial;
    }
    
    .comments_list .comment_item .message {
    font-size: 16px;
    line-height: 130%;
    font-family: Arial;
    }
    
    .comments_list .comment_item .message code {
    font-size: 13px;
    }
    
    .post .infopanel,
    .post .infopanel .author a,
    .post .infopanel .published,
    .post .infopanel .comments a {
    font-family: Verdana;
    font-size: 12px;
    }
    
    .post .infopanel .favs_count {
    font-family: Verdana;
    height: 13px;
    font-size: 12px;
    }
    
    .comments_list .comment_item .info .voting .mark {
    font-size: 17px;
    }
    
    body {
    font-size: 15px;
    padding-bottom: 20px;
    }
    
    #header .userpanel .charge,
    .comments_list .comment .reply a.reply,
    .comments_list .comment .info a.link_to_comment,
    .comments_list .comment_item .info a.username,
    .comments_list .comment_item .info time {
    font-size: 14px;
    }
    
    .page-nav #nav-pages {
    font-size: 18px;
    }
    
    .post ul.tags {
    font-size: 12px;
    }
    
    .comments_list .comment .info {
    font-size: 14px;
    }
    
    .comments_list .comment .info time {
    font-size: 13px;
    color: #888;
    }
    
    .editor .text-holder textarea,
    #preview_placeholder {
    font-size: 16px;
    font-family: Arial !important;
    }
    
    textarea {
    font-family: Arial !important;
    }
    
    #preview_placeholder {
    font-family: Arial !important;
    padding: 1px;
    border: 1px dashed #EEE;
    }
    
    .profile-header .karma .mark,
    .profile-header .habraforce .number,
    .profile-header .habraindex .number {
    font-size: 330%;
    }
    
    .userinfo dl {
    margin: 0 0 3px 0;
    }
    
    .dl_logic_wrap {
    margin: 0 0 5px 0;
    }
    
    .editor .panel .can_use_html {
    font-size: 12px;
    }
    
    • –3
      Зачем в коммент то пихать код?
  • –3
    Вконтакте 11px Tahoma. Никто почему-то не жалуется. Меня тоже устраивает.
    • –3
      Да и на Facebook тоже.
  • –1
    Вашу мать, это точно сайт, где собрались профессионалы? о_О Какие нахрен пиксели?
    «16 пикселей идеальны» — при каком DPI? 96? 120? Или, может быть, на мобильных девайсах?
    • +1
      Вместо того, чтобы умничать, перевели бы в em-ы, например.
      • 0
        Да я-то переведу, но это ни на йоту не меняет сути моего высказывания.
  • 0
    Автор поста ратует за удобочитаемость текста, а сам использует у себя уродские маргинальные веб-шрифты вместо давно зарекомендовавших себя Verdana, Arial и так далее. Более того, его гарнитура для основного текста у меня вообще сглаживается очень плохо, читается просто ужасно. Ну и как теперь это связать с его утверждением «Веб-дизайн — это не только то, что нравится дизайнерам»? Ну и, конечно, рекомендация использовать именно пиксели тоже не оставляет равнодушным. Использовать надо пункты, так как плотность пикселей на дюйм во всех экранах разная.
    • 0
      Насчет автора и его поста я имел в виду это:
      www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
      • 0
        Вообще-то, насколько я могу видеть при помощи «Context Font», гарнитура для основного текста у него — Georgia, а гарнитура подзаголовка первого уровня — Arial, а гарнитура заголовков второго уровня — Impact, и заголовок первого уровня также оформлен Impact, только с тенями.
        • 0
          Это всё запасные шрифты к тем, что не смог отобразить Firefox (насколько мне известно, вы используете именно Fx). А вот Опера и Хром сумели показать первоначальные шрифты автора: Limelight Regular — для заголовка статьи, Ostrich Sans Rounded Medium — для надписи сразу под ним, TeX Gyre Schola — основной текст. Хром, в отличие от Оперы, хорошо сгладил основной текст, но не справился с заголовком. Fx и IE не показали веб-шрифты вообще (я бы сказал, что повезло :).
  • 0
    Остался один вопрос к переводчику после прочтения статьи: «почему она не 16 шрифтом сделана?» :)

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