Какие веб-безопасные шрифты более читабельны для глаз в виде основного текста? Какие веб-безопасные шрифты не следует использовать?

Какие веб-безопасные шрифты более читабельны для глаз в виде основного текста? Какие веб-безопасные шрифты не следует использовать?

Какой должен быть минимальный размер шрифта <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");}

Это заставит браузеры использовать вашу собственную гарнитуру.

Для меня это вопрос из трех частей, поэтому позвольте мне разбить мой ответ на эти три раздела:

  1. Удобочитаемость: проверенная и проверенная комбинация шрифтов для удобства чтения - это Грузия для заголовков и Вердана для основного текста. Вы можете пойти и в другом направлении с Verdana, который является шрифтом без засечек для заголовков и Georgia, шрифтом с засечками для основного текста. Я думаю, что "Нью-Йорк Таймс" все еще использует "Times New Roman" для всего. В конце концов, это газета...
    • Оба шрифта являются "безопасными для Интернета" и доступны на более чем 90% устройств, поэтому вы можете безопасно их использовать. Что является безопасным и НЕ рекомендуется? Comic Sans MS, Papyrus, Chalkboard, в основном любой "обычный подозреваемый", любой излишне используемый и трудно читаемый шрифт...
  2. Настоятельно рекомендуется установить размер текста вашего элемента 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 пикселей для ширины вашего контента. Это довольно сбалансировано и читабельно.
  3. Другая вещь, которую вы можете сделать, это загрузить выбранный шрифт через Google Fonts. Таким образом, вы предоставляете желаемый шрифт посетителю. Вы также можете создать свой веб-сайт с хорошим представлением о том, как он будет отображаться на их экране, и не беспокоиться о том, какой встроенный шрифт они будут использовать. Google Fonts теперь также помогает с сопряжением шрифтов, что помогает.

IMO: избегайте Comic Sans, используйте размер шрифта 10+ pt.

Другие вопросы по тегам