Рекомендуемый размер шрифта и семейство шрифтов для контента веб-сайта

Если вы имеете дело с пожилой аудиторией и вас беспокоят проблемы со зрением, Verdana действительно максимально использует свои пиксели. 11 пикселей в Verdana близки к 14 во многих других.

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

С точки зрения стиля (я полагаю, вы имеете в виду вес), придерживайтесь «обычного» или 400 для основной части вашего текста. Во многих шрифтах жирный шрифт слишком темный/плотный для легкого чтения.

Убедитесь, что вы протестировали свой шрифт/размер/жирность в различных браузерах и системах. Прямо сейчас я бы назвал IE 7 в Windows XP самым жестоким нарушителем шрифта среди основных игроков. Я видел, как IE 8 превзошел его с некоторыми веб-шрифтами. IE 9 использует новый подход, который позволяет сделать шрифты тоньше, но в целом они выглядят нормально. Почти все выглядит лучше всего в браузерах Mac. Все зависит от вашей критической статистики сайта.

100% - стандартный ответ. Но если быть более точным, большинство руководств по доступности предлагают не менее 11 пикселей.

Но сам по себе этот вопрос довольно расплывчатый и лишен контекста.

Я бы подумал о современных шрифтах и ​​шрифтах без засечек, которые легко читаются и имеют тенденцию быть узкими. Мне самому нравится шрифт Oswald . Это также шрифт на основе Google. Как Энджи сказала выше, от 13 до 14 пунктов было бы хорошим местом для проживания.

Вообще говоря, 16 пикселей являются стандартными . Его рекомендуют Typecast , Smashing Magazine (по иронии судьбы в статье теперь используется размер шрифта ~20px для моего устройства), UX.SE , наиболее распространенные браузеры и многие другие источники. 16px соответствует шрифту 12pt в большинстве книг, читаемых с одинакового расстояния. Каждая из ссылок здесь хороша для чтения по этому вопросу, если вы хотите прочитать больше рассуждений.

При этом можно варьировать в зависимости от контекста, потому что есть много факторов в отношении удобочитаемости, включая (широкие темы) аудиторию, цель и другие типографские качества. Для страниц с большим количеством информации, которую не следует читать полностью, рекомендуется использовать шрифт немного меньшего размера, где-то 12-14 пикселей.

Извлечение из моего связанного ответа , говорящего об оптимальном размере шрифта:

Как и в большинстве случаев в дизайне, способ представления вашего контента должен различаться в зависимости от того, что вы представляете и кому вы его представляете. StackOverflow имеет отличный тип (IMO) для использования, потому что он передает много информации в относительно небольшом пространстве, оставаясь при этом чистым. [Он использует размер шрифта 14px]. Однако я бы никогда не стал использовать такой плотный и мелкий шрифт в личном блоге.

Лично мне нравится шрифт в блоге Джеффа Этвуда Coding Horror . Он использует размер шрифта 17 пикселей для настольных компьютеров и высоту строки 27 пикселей (оба значения определяются ems). Для мобильных устройств он уменьшает текст до 15 пикселей, а высоту строки до 24 пикселей. Он выбрал шрифт Open Sans, очень распространенный и надежный, с без засечек в качестве запасного варианта.

Как уже упоминалось, удобочитаемость шрифта также зависит от контраста, высоты строки (очень важно) и семейства шрифтов. Чем слабее контраст, тем крупнее должен быть ваш шрифт. Для удобочитаемости более длинных текстов большая высота строки действительно может улучшить читаемость. Например, в моем расширении для чтения статей в Chrome я использую шрифт 16px с высотой строки 1,75em.

Удобочитаемость семейства шрифтов, ознакомьтесь с этой публикацией на сайте GraphicDesign.SE и спросите о том, какой шрифт лучше всего подходит для удобочитаемости.

Споры между засечками и без засечек — это тоже очень большая тема, которую следует рассмотреть отдельно. Чтобы узнать больше об этом, ознакомьтесь с этим постом на GraphicDesign.SE и аналогичным вопросом о UX.SE.

Подробнее читайте по ссылкам в этом посте.

Не уверен, что вы подразумеваете под «стилем» шрифта. Но размер шрифта будет несколько зависеть от шрифта, но 13px — хорошая отправная точка для обычного текста. 14px часто лучше. Конечно, это если вы используете пиксели для размера шрифта. Однако сопоставить это с ems или % несложно.

Вы также можете рассмотреть возможность использования CSS/Javascript для динамического изменения размера шрифта в зависимости от нажатия пользователем кнопки +/- или аналогичной.