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

Question

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

Каким должен быть минимальный размер шрифта <p>body text</p> для лучшей читаемости?

Какой размер шрифта мы должны использовать для <H1/2/3/4/5/6>, <p> <ul>, <ol>? Должны ли мы использовать одинаковый размер шрифта для <p>, <ul>, <ol> и <th> <td>?

Какая будет сбалансированная схема определения размера шрифта?

Answer 1

Я обнаружил, что Вердана очень проста для больших блоков текста. Однако одно только семейство шрифтов не принесет существенных улучшений.

Вы должны быть осторожны с шириной вашего текстового блока. Популярное использование показывает, что от 12 до 16 слов в строке удобно для глаз.

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

Я не верю, что есть серебряная пуля для определения размера шрифтов в заголовках. Я рекомендую вам использовать эластичные размеры (например, не px) для шрифтов. Это делает контент более легко адаптируемым для экранов различных размеров и разрешений.

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

Я бы порекомендовал h6, последний заголовок, по крайней мере, немного больше, чем общий текстовый блок, и жирным шрифтом. Было бы странно, если бы он выглядел так же, как элемент, заключенный в тег STRONG.

Делать размер шрифта для P, OL, TH и TD одинаковым, я считаю, что это частично вопрос вкуса, но, что более важно, вопрос объема.

Если ваш TABLE показывает варианты ценообразования, я бы определенно выбрал более крупные шрифты для элементов TH и TD, чтобы сосредоточить внимание пользователя.

Answer 2

Исследовательская лаборатория штата Ючита по использованию программного обеспечения провела серию исследований шрифта, результаты которых могут быть использованы для выбора правильного шрифта и размера для ваших целей. Для грубой читабельности абзацев текста, 12 пунктов Tahoma, кажется, последовательно выполнить лучшее . Камбрия может лучше читать отдельные символы (они не проверяли ее на чтение абзацев и не проверяли ее непосредственно на Тахому).

В целом, 12 баллов лучше, чем 10, но 14 не лучше, чем 12 , если только вы не разговариваете пожилых пользователей .

Если размер - единственный способ различать заголовки, то, согласно MIL-STD 1472, каждый уровень должен быть как минимум на 25% больше, чем следующий более низкий уровень. Таким образом, если вы используете H1 - H3 и 12 пунктов, то H3 = 15 пунктов, H2 = 19 пунктов и H1 = 24 пункта (минимум). Однако, если вы используете другие средства для указания иерархии, такие как отступ, жирный шрифт или схема нумерации разделов (например, #. #. #), То некоторые уровни могут иметь такой же размер, как и другие.

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

Answer 3

http://bigital.com/english/files/2008/04/web_legibility_readability.pdf

Согласно этому исследованию, Вердана дает лучшую скорость, комфорт и понимание. Также предполагается, что оптимальная длина строки составляет около 60-80 символов.

Answer 4

Попробуйте создать разные версии вашего сайта с разными шрифтами и попросите пользователей выбрать наиболее удобную для чтения версию.

Полезные советы о шрифтах:

• Не используйте слишком много разных шрифтов на одна страница
• Используйте относительные размеры шрифта, чтобы пользователь можно увеличить размер шрифта в браузере Настройки
• Сделать кнопки «Увеличить шрифт» и
  "уменьшить шрифт" в вашем интерфейсе и
  сохранить пользовательские настройки в cookie

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

Что касается веб-безопасных шрифтов, попробуйте эту ссылку: http://en.wikipedia.org/wiki/Web_typography

Answer 5

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

1. Удобочитаемость: проверенная и проверенная комбинация шрифтов для удобства чтения - это Грузия для заголовков и Вердана для основного текста. Вы можете пойти и в другом направлении с Verdana, который является шрифтом без засечек для заголовков и Georgia, шрифтом с засечками для основного текста. Я думаю, что «Нью-Йорк Таймс» все еще использует «Times New Roman» для всего. В конце концов, это газета ...
   • Оба шрифта являются «безопасными для Интернета» и доступны на более чем 90% устройств, поэтому вы можете безопасно их использовать. Что является безопасным и НЕ рекомендуется? Comic Sans MS, Papyrus, Chalkboard, практически любой «обычный подозреваемый», любой излишне употребленный и трудно читаемый шрифт ...
2. Настоятельно рекомендуется установить размер текста вашего элемента тела на 100% и доверять тому, что ваш текст будет отображаться с разрешением около 16 пикселей. Вы можете увеличить его до 16px, если хотите. Рекомендуется не меньше 14px и не превышать 18px для удобства чтения. Предполагается, что настройка с помощью rem или em поможет конечному пользователю настроить размер с помощью настроек браузера.
   • Как правило, H1 должно быть в два раза больше, чем p. Если вы выберете 16px для p, установите h1 на 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 теперь также помогает с сопряжением шрифтов, что помогает.

Answer 6

Вы пробовали это?

@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");}

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

Answer 7

Читаемый основной текст: сегодня чаще всего дают ответ на использование шрифта без засечек (см., Например, эти рекомендации по читабельности ). Руководство также, кажется, отвечает на большинство других ваших вопросов.

Через пять-десять лет ответом, вероятно, будет шрифт с засечками, при условии, что емкость дисплея будет увеличиваться.

Answer 8

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