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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

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

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

Answer 2

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

Answer 3

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

Хорошая практика о шрифтах:

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

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

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

Answer 4

Re читаемого текста: сегодня, ответ наиболее склонно давать это использовать шрифт без засечек (смотрите, например, эти readability guidelines). Руководства также, похоже, отвечают на большинство ваших других вопросов.

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

Answer 5

Wichita State's Software Usability Research Lab провел серию исследований шрифта, результаты которого могут быть использованы для выбора нужного шрифта и размера для ваших целей. Для сырой читаемости абзацев текста, 12 очков Тахома появляется consistently выполняет the best. Камбрия может быть лучше при чтении individual characters (они не проверяли ее для чтения абзацев и не проверяли ее непосредственно против Тахомы).

В целом, 12 баллов лучше 10, но 14 is not better than 12, если вы не говорите elderly users.

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

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

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

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

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

Answer 8

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

1. Читаемости: испытанный и проверенное сочетание шрифтов для удобства чтения является Грузия для заголовков и Verdana для основного текста. Вы можете пойти в другом направлении, а также с Verdana, который является шрифтом sans-serif для заголовков и Грузии, шрифтом с засечками для основного текста. Я думаю, что The New York Times все еще использует «Times New Roman» для всего. В конце концов, это газета ...
   • Оба шрифта являются «безопасными для сети» и доступны на 90% процентов устройств, поэтому вы достаточно безопасны в их использовании. Что такое веб-сейф и НЕ рекомендуется? Comic Sans MS, Papyrus, классная доска, в основном любой «обычный подозреваемый», любой чрезмерный и трудный для чтения шрифт ...
2. Настоятельно рекомендуется установить текстовый размер элемента тела на 100% и доверять ему сделайте текст вашего тела примерно на 16 пикселей. Вы можете заставить его использовать 16px, если хотите. Для удобства чтения рекомендуется не идти менее 14 пикселей и не превышать 18 пикселей. Предполагается, что настройка с помощью 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 теперь также помогает в создании спамовых шрифтов, что помогает.