16 px шрифт: 16 px кегль в Вебе

16 px кегль в Вебе

16 px – это оптимальный размер шрифта для веб-страниц.

На первый взгляд это утверждение может показаться странным и даже провокационным. Основной шрифт у большинства веб-страниц не превышает 12 пикселей и многие веб-дизайнеры убеждены в том, что это – оптимальный размер для шрифта. Эта статья призвана убедить вас в обратном.

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

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

Доход сайта и привлечение читателей

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

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

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

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

4 факта о чтении, которые должен знать веб-дизайнер

1) После двадцати лет качество зрения у людей снижается, в сорок лет к сетчатке глаза проходит только 50% света, а к шестидесяти годам – всего 20%.

2) У 9% американцев есть проблемы со зрением, а в России эти показатели еще ниже. Многим россиянам зрение не могут полностью исправить даже контактные линзы.

3) Скорость чтения зависит от расстояния до источника: чем выше расстояние, тем разборчивее воспринимаются символы и выше понимание прочитанного. Главный фактор, определяющий оптимальное расстояние, – это именно размер шрифта. Крупные шрифты на билбордах различают практически все люди, чего не скажешь о 12-пиксельном шрифте большинства веб-сайтов.

4) Учитывайте, что большинство пользователей компьютера находятся на расстоянии 50-60 сантиметров от устройства, это позволяет не напрягать глаза слишком сильно. Но печатные источники мы воспринимаем на более близком расстоянии, ведь журнал, который мы читаем, находится на расстоянии меньшем, чем расстояние вытянутой руки, всего несколько десятков сантиметров. Основываясь на этих расчетах, видно, что шрифт в 16 пикселей на экране воспринимается как 10-пиксельный шрифт в книге.

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

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

Плохие шрифты снижают посещаемость сайта

Плохой шрифт на веб-сайте является самой распространенной проблемой пользователей (по результатам опроса за 2005 год этот пункт набрал большинство голосов). На данный момент ситуация не улучшилась – показывает выборка дизайнов SiteInspire. Средний размер шрифта для основного текста у них составляет те самые 12 пикселей, которые стали стандартом среди веб-дизайнеров, вопреки требованиям пользователей, большинство из которых жалуется на маленький размер шрифта. Из всех этих дизайнов нет ни одного (!) со шрифтом больше 14 пикселей, а у некоторых размер шрифта еще меньше – 10 px.

Популярные источники готовых дизайнов для сайта ElegantThemes и ThemeForest предлагают веб-разработчикам шаблоны, с размером шрифта не превышающим 12-13 пикселей.

Какое количество ваших читателей имеют 100% качество зрения и не страдают от чрезмерного напряжения глаз во время работы с компьютером? Неужели все ваши читатели моложе 20 и не испытывают проблем с различением миниатюрных шрифтов?

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

Не напрягайте читателя лишний раз, иначе до него не дойдет смысл прочитанного (если он даже прочитает ваш текст, а не покинет сайт сразу).

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

Не заставляйте пользователя думать!

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

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

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

16 px – это удобно

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

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

основной текст в 16px / Хабр

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

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

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

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

Я бы хотел убедить вас в обратном.

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

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

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

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

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

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

Таким образом, каждый элемент должен быть рассчитан на достижение этой цели. В том числе и текст. Особенно текст — потому что текст убеждает посетителей сделать то, что вы хотите.

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

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

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

В 40 лет только половина света проходит к сетчатке, в отличие от 20 лет. Для 60-летних — всего лишь 20%.

Почти 9% всех американцев жалуются на слабое зрение(я не удивлюсь, если у нас в России этот показатель хуже), то есть их зрение не может быть полностью исправлены с линзами.

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

Большинство людей находятся на расстоянии около 50 сантиметров от экрана компьютера. На самом деле, рекомендуемое расстояние — 60 сантиметров, потому что на этом расстоянии можно избежать чрезмерного напряжения глаз. Это гораздо больше, чем расстояние, на котором мы читали напечатанный текст — большинство людей не держат журнал на расстоянии вытянутой руки!

16-пиксельный текст на экране примерно такого же размера, как текст, напечатанный в книге или журнале. Так как мы читаем печать довольно близко — часто всего лишь на расстоянии в несколько десятков сантиметров — там как правило, шрифт задан около 10pts. Если бы вы читали на расстоянии вытянутой руки, то это был бы такой же размер, как 16 пикселей на всех экранах:
16px текст на 24′ мониторе и 12pt текст в книге

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

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

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

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

Почти 1 из 10 ваших читателей имеют проблемы с глазами. И даже тем, у кого проблем нет, все равно придется напрягаться, чтобы прочитать текст размером меньше чем 16 пикселей, даже если они не замечают, что они делают это. (Как часто вы замечаете, что прижались к экрану?) И если им придется наклоняться, то, скорее всего, им будет неловко и неудобно. Естественная поза перед компьютером — по крайней мере, на расстоянии вытянутой руки от экрана!

Короче говоря, среднестатистического пользователя чтение напрягает.

Чем сложнее прочитать ваш текст, тем меньше смысла будет понято. 10 пикселей будут бесполезны. 12 пикселей — все равно слишком мало для большинства читателей. Даже 14 пикселей могут отпугнуть посетителей, которые бы в противном случае остались.

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

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

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

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

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

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

Итак, вопрос в том, готовы ли вы тратить деньги ваших клиентов ради того, что нравится только вам?

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

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

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

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

за основной текст. Любое меньшее — это дорогостоящая ошибка — журнал Smashing Magazine

7 минут чтения
Типографика,
Шрифты,
Читабельность
Поделиться в Твиттере, LinkedIn

Об авторе

Писатель, обдумывающий, записывающий, копирующий код и магнитный магнит. Автор книги «Позвоночник Священного Писания».
Больше о
D Bnonn ↬

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

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

Я хотел бы убедить вас в обратном.

Как говорит эксперт по юзабилити Оливер Рейхенштейн в «Стандарте 100% Easy-2-Read»:

[16 пикселей] невелики. Это размер текста, который браузеры отображают по умолчанию. Это размер текста, который браузеры должны отображать… Сначала он выглядит большим, но как только вы его используете, вы быстро понимаете, почему все производители браузеров выбрали его в качестве размера текста по умолчанию.

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

Больше после прыжка! Продолжить чтение ниже ↓

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

Дополнительная информация на SmashingMag:

8 простых способов улучшить типографику в ваших проектах
10 принципов читаемой веб-типографики
Идеальный абзац
Применение макротипографии для более читаемой веб-страницы

Читательская аудитория = доход

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

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

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

Подумай об этом. Если вы не объясните людям, что они должны делать или почему они должны это делать, то они точно не будут. И единственный способ рассказать о них — с помощью текста. А текст означает чтение.

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

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

В 40 лет только половина света попадает на сетчатку, как в 20 лет. Для 60-летних это всего 20%.
Почти 9% американцев имеют проблемы со зрением, то есть их зрение невозможно полностью исправить с помощью линз.
Расстояние, на котором мы можем читать буквы, является общей мерой как разборчивости, так и скорости чтения. Чем больше расстояние, тем выше считается общая разборчивость и понимание. Самым большим фактором, определяющим, насколько может увеличиться это расстояние, является размер шрифта. Видели какие-нибудь рекламные щиты в последнее время?
Большинство людей, когда они сидят удобно, находятся на расстоянии от 20 до 23 дюймов от экрана своего компьютера. На самом деле рекомендуемое расстояние — 28 дюймов, потому что именно здесь вергенция достаточно мала, чтобы избежать напряжения глаз. Это намного больше, чем расстояние, на котором мы читаем печатный текст — большинство людей не держат журналы на расстоянии вытянутой руки!
16-пиксельный текст на экране примерно такого же размера, как текст, напечатанный в книге или журнале; это учет расстояния чтения. Поскольку мы читаем книги довольно близко — часто всего в нескольких дюймах от нас — они обычно выставляются примерно на 10 баллов. Если бы вы читали их на расстоянии вытянутой руки, вам бы потребовалось не менее 12 пунктов, что примерно равно 16 пикселям на большинстве экранов: 16-пиксельный текст отображается на 24-дюймовом экране рядом с 12-точечным текстом. напечатаны на бумаге. (Большой предварительный просмотр)
16-пиксельный текст, отображаемый на 15,4-дюймовом экране, рядом с 12-пиксельным текстом, напечатанным на бумаге. (Большой предварительный просмотр)
В обзоре проблем веб-дизайна в 2005 году плохие шрифты получили почти в два раза больше голосов, чем следующий претендент, при этом две трети избирателей жаловались на маленькие размеры шрифта. Если вы думаете, что с тех пор ситуация улучшилась, подумайте еще раз. Я случайным образом попробовал несколько новых дизайнов блогов на SiteInspire и обнаружил, что средний размер шрифта для основного текста составляет всего лишь 12 пикселей. В некоторых проектах даже использовались крошечные 10 пикселей. И ни один из них не превышал 14 пикселей. Точно так же, если вы случайным образом выберете предложения популярных тем Elegant Themes и ThemeForest, вы обнаружите, что каждая отдельная тема устанавливает основной контент размером всего 12 или 13 пикселей.

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

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

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

Короче говоря, для среднего пользователя Интернета чтение большинства веб-сайтов мало чем отличается от проверки зрения.

Чем труднее читать ваш текст, тем меньше его прочитают — и тем меньше будет понято то, что есть прочитанное. 10 пикселей по сути бессмысленны. 12 пикселей по-прежнему слишком мало для большинства читателей. Даже 15 пикселей отключат посетителей, которые в противном случае могли бы совершить конверсию.

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

«Но пользователи могут масштабировать»

Если вы правильно закодируете код, люди с проблемами зрения всегда смогут использовать клавиши «Option» и «+», чтобы увеличить текст.

Так сказал один веб-дизайнер в моей дискуссии по этому вопросу.

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

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

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

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

Итак, вопрос в том, готовы ли вы платить своим клиентам деньги за то, что вам нравится?

16 Pixels Is Not Big

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

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

Эта статья установлена в TeX Gyre Schola в 19пикселей. Я выбрал этот размер, потому что от 16 до 18 пикселей показались мне слишком маленькими: когда я удобно откинулся на спинку стула, в 28 дюймах от экрана, я поймал себя на том, что щурюсь, чтобы увидеть его. Если бы я использовал Georgia или Verdana, 16 пикселей, вероятно, было бы достаточно: они были разработаны с большей высотой по оси x и поэтому лучше отображались на экране.

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

12 бесплатных шрифтов 16px » Fontsc

Размер: defaultsmalllargeNameSort By PopularRecentList 10 Fonts2550

Только без рекламы

SIL OFL (бесплатно для коммерческого использования)

1 файл шрифта

Скачать