Какие веб-безопасные шрифты более читабельны для глаз в виде основного текста? Какие веб-безопасные шрифты не следует использовать?
Какие веб-безопасные шрифты более читабельны для глаз в виде основного текста? Какие веб-безопасные шрифты не следует использовать?
Какой должен быть минимальный размер шрифта <p>body text</p>
для лучшей читаемости?
Какой размер шрифта мы должны использовать для <H1/2/3/4/5/6>
, <p>
<ul>
, <ol>
? Должны ли мы использовать тот же размер шрифта для <p>
, <ul>
, <ol>
а также <th>
<td>
?
Какова будет сбалансированная схема определения размера шрифта?
8 ответов
Я обнаружил, что Вердана очень проста для больших блоков текста. Однако одно только семейство шрифтов не принесет существенных улучшений.
Вы должны быть осторожны с шириной вашего текстового блока. Популярное использование показывает, что от 12 до 16 слов в строке удобно для глаз.
Также убедитесь, что у вас есть сбалансированная высота строки, чтобы вертикальное расстояние между строками давало достаточно пробелов. Разбиение больших блоков текста на абзацы с нижним отступом / полем, которое как минимум вдвое превышает высоту строки, делает их лучше выделенными.
Я не верю, что есть серебряная пуля для определения размера шрифтов в заголовках. Я рекомендую вам использовать эластичные размеры (например, не px) для шрифтов. Это делает контент более легко адаптируемым для экранов различных размеров и разрешений.
Что бы вы ни выбрали, вы должны обратить внимание на четкое различие между размерами заголовка, а также весом шрифта или цветом. Обычно плохая идея делать различия между заголовками очень тонкими.
Я бы порекомендовал h6, последний заголовок, по крайней мере, немного больше, чем общий текстовый блок, и жирным шрифтом. Было бы странно, если бы он выглядел так же, как элемент, заключенный в тег STRONG.
Делать размер шрифта для P, OL, TH и TD одним и тем же, я считаю, отчасти дело вкуса, но, что более важно, вопрос объема.
Если ваш TABLE показывает варианты ценообразования, я бы определенно выбрал более крупные шрифты для элементов TH и TD, чтобы сосредоточить внимание пользователя.
Лаборатория исследований юзабилити программного обеспечения штата Вичита провела серию исследований шрифтов, результаты которых могут быть использованы для выбора правильного шрифта и размера для ваших целей. Для грубой читабельности абзацев текста, 12-балльная Тахома, по-видимому, последовательно работает лучше всего. Камбрия может быть лучше при чтении отдельных символов (они не проверяли ее на чтение абзацев и не проверяли ее непосредственно на Тахому).
В целом, 12 баллов лучше, чем 10, но 14 баллов не лучше, чем 12, если только вы не общаетесь с пожилыми пользователями.
Если размер является единственным способом различения заголовков, то, согласно MIL-STD 1472, каждый уровень должен быть как минимум на 25% больше, чем следующий более низкий уровень. Таким образом, если вы используете H1 - H3 и 12 пунктов, то H3 = 15 пунктов, H2 = 19 пунктов и H1 = 24 пункта (минимум). Однако, если вы используете другие средства для указания иерархии, такие как отступ, жирный шрифт или схема нумерации разделов (например, #.#.#), То некоторые уровни могут иметь такой же размер, как и другие.
Числовые и ненумерованные списки должны использовать 12 пунктов, поскольку они обычно являются предложениями. Возможно, вам удастся обойтись меньшим шрифтом для содержимого таблицы или полей данных, может быть, всего 9 баллов, поскольку пользователь обычно сканирует и читает только одно слово или число за раз, но я не знаю ни одного исследование, которое фактически сравнивало соотношение между сканированием / прокруткой и читабельностью.
Попробуйте создать разные версии вашего сайта с разными шрифтами и попросите пользователей выбрать наиболее удобный для чтения вариант.
Хорошая практика по поводу шрифтов:
- Не используйте слишком много разных шрифтов на одной странице
- Используйте относительные размеры шрифта, чтобы пользователь мог увеличить размер шрифта в настройках браузера
- Сделать кнопки "увеличить шрифт" и
"уменьшить шрифт" в вашем интерфейсе и
сохранить пользовательские настройки в cookie
Выбор шрифта сам по себе эстетичен, вы не можете получить правильный ответ здесь - тот, который вам нравится сам.
Что касается веб-безопасных шрифтов, попробуйте эту ссылку: http://en.wikipedia.org/wiki/Web_typography
http://bigital.com/english/files/2008/04/web_legibility_readability.pdf
Согласно этому исследованию, Verdana дает лучшую скорость, комфорт и понимание. Кроме того, он предполагает, что оптимальная длина строки составляет около 60-80 символов.
Читаемый основной текст: сегодня наиболее распространенным ответом является использование шрифта без засечек (см., Например, эти рекомендации по удобочитаемости). Руководство также, кажется, отвечает на большинство других ваших вопросов.
Через пять-десять лет ответом, вероятно, будет шрифт с засечками, при условии, что емкость дисплея будет увеличиваться.
Вы пробовали это?
@font-face {font-family:Tahoma;src:url(/path/to/tahoma.eot);}
@font-face {font-family:Tahoma;src:url(/path/to/tahoma.otf) format("opentype");}
@font-face {font-family:Tahoma;src:url(/path/to/tahoma.ttf) format("truetype");}
Это заставит браузеры использовать вашу собственную гарнитуру.
Для меня это вопрос из трех частей, поэтому позвольте мне разбить мой ответ на эти три раздела:
- Удобочитаемость: проверенная и проверенная комбинация шрифтов для удобства чтения - это Грузия для заголовков и Вердана для основного текста. Вы можете пойти и в другом направлении с Verdana, который является шрифтом без засечек для заголовков и Georgia, шрифтом с засечками для основного текста. Я думаю, что "Нью-Йорк Таймс" все еще использует "Times New Roman" для всего. В конце концов, это газета...
- Оба шрифта являются "безопасными для Интернета" и доступны на более чем 90% устройств, поэтому вы можете безопасно их использовать. Что является безопасным и НЕ рекомендуется? Comic Sans MS, Papyrus, Chalkboard, в основном любой "обычный подозреваемый", любой излишне используемый и трудно читаемый шрифт...
- Настоятельно рекомендуется установить размер текста вашего элемента body на 100%, и поверьте, он будет отображать текст вашего тела примерно в 16 пикселей. Вы можете увеличить его до 16px, если хотите. Рекомендуется не меньше 14px и не превышать 18px для удобства чтения. Предполагается, что настройка с помощью rem или em поможет конечному пользователю отрегулировать размер с помощью настроек браузера.
- Как правило, H1 должно быть в два раза больше, чем p. Если вы выберете 16px для p, установите h 1 на 32+px. Я использую коэффициент 0,87 для изменений от h1 ~ h6, поэтому я получаю 36, 32, 28, 24, 21 и 18 в пикселях или единицах измерения. Задайте для p значение 16, для меню, ul, ol, dl, li, dt, dd, td, th и т. Д. - 14. Установите высоту строки для заголовков - 1,25, для списков и таблиц - 1,5, а для абзацев - 1,7. Установите поля и отступы для списков и установите поле для нижнего края для абзацев, чтобы разделить их.
- Лучше не превышать 60 символов на строку текста, что составляет примерно 960 пикселей для ширины вашего контента. Это довольно сбалансировано и читабельно.
- Другая вещь, которую вы можете сделать, это загрузить выбранный шрифт через Google Fonts. Таким образом, вы предоставляете желаемый шрифт посетителю. Вы также можете создать свой веб-сайт с хорошим представлением о том, как он будет отображаться на их экране, и не беспокоиться о том, какой встроенный шрифт они будут использовать. Google Fonts теперь также помогает с сопряжением шрифтов, что помогает.