Крошечные шрифты на веб-сайтах

Оба моих основных браузера (FF и Chrome) настроены на 12-пиксельный шрифт. В обоих браузерах средство выбора шрифтов показывает предварительный просмотр шрифта, и в обоих они имеют одинаковый размер и удобный размер для чтения веб-сайтов. Мой IE не позволяет мне устанавливать размер шрифта, но, похоже, по умолчанию он немного больше, чем Chrome.

На своем личном веб-сайте я использую XHTML и CSS и обозначил шрифт страницы как «средний» и использую этот размер шрифта для всего основного текста («контент»). Когда я просматриваю сайт в IE 7, FF 3 и Chrome 0.4, шрифт отображается, как и ожидалось, и соответствует средствам выбора шрифта (за исключением IE, где он немного больше).

НО я захожу почти на любой другой веб-сайт (Google, StackOverflow, The DailyWTF, CodingHorror, Microsoft, Sourceforge, даже W3C и т. д.), и они все отображаются в крошечном микроскопическом шрифты - я оцениваю 5-7 пикселей.

Это верно на 3 разных компьютерах с 2 разными операционными системами (Vista и XP) и 4 разными мониторами (ноутбук, ЭЛТ и новый ЖК-дисплей WS).

Что случилось с этим? Я упускаю из виду что-то фундаментальное в дизайне веб-сайта, что мне нужно знать? Или просто все эти веб-сайты делают глупые вещи, такие как установка шрифта на 50%, или 0,5 em, или x-small??? Почему дизайнеры веб-сайтов не могут соблюдать мой выбор шрифта для текста содержимого (я понимаю, что боковые панели, нижние колонтитулы и т. д. могут быть разумно маленькими или x-small).

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

РЕДАКТИРОВАТЬ: Чтобы было ясно, я не говорю, что использование em или% глупо, мне интересно, почему многие сайты, кажется, используют около 50% моего настроенного размера. Конечно, мой настроенный размер - это размер, в котором я хотел бы видеть текст.

РЕДАКТИРОВАТЬ: Из спецификации CSS W3C: «В следующей таблице приведены рекомендации пользовательского агента для сопоставления абсолютного размера с заголовком HTML и абсолютными размерами шрифта. Значение «средний» — это предпочтительный размер шрифта пользователя, который используется как эталонное среднее значение." - мой акцент.

Существует мнение, что веб-сайты основывают относительные размеры шрифта на типичном браузере по умолчанию 16 пикселей, что прискорбно, но «это жизнь». Но как насчет других систем — можем ли мы ожидать, что все браузеры будут такими по умолчанию?

По крайней мере, теперь я понимаю проблему.

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

Вывод: я переустановил все свои браузеры на 16 пикселей (18 пикселей на моих компьютерах с разрешением 125 точек на дюйм) и настроил на своем веб-сайте размер шрифта: 90%. Это дает хороший размер дисплея и, конечно же, все мои любимые сайты теперь читаемы. Спасибо за все конструктивные ответы и живые туда и сюда.

Это отличное сообщество.


html fonts css typography
person Community    schedule 03.12.2008    source источник
comment
Кстати, Firefox и Opera (и, возможно, другие браузеры) допускают минимальный размер шрифта для всех веб-страниц, поэтому, если 10 пикселей слишком мало для вас или вашего монитора, вы можете увеличить его, скажем, до 13 пикселей. минимум, при сохранении всего остального.   -  person DisgruntledGoat    schedule 13.07.2009

Ответы (9)


arrow_upward
8
arrow_downward

Большинство браузеров — если не все — устанавливают размер шрифта по умолчанию на 16 пикселей. Многие веб-сайты также используют относительный размер шрифта. Это вызовет у вас проблему, если размер шрифта вашего браузера меньше этого.

Рассмотрим случай, когда размер шрифта по умолчанию в вашем браузере составляет 16 пикселей. Когда шрифт веб-сайта 1.0em, он будет отображаться как 16px. Однако какой-то другой текст может быть 0,7em, так что он будет меньше. Однако, если размер шрифта вашего браузера по умолчанию составляет 12 пикселей, 1.0em будет 12px, а 0.7em будет нечитаемым, потому что он будет очень маленьким.

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

person Philip Morton    schedule 03.12.2008
comment
Разве разработчик веб-сайта не должен исходить из того, что средний мой предпочтительный размер шрифта? Спецификация CSS определенно утверждает, что это так. - person Lawrence Dol; 03.12.2008
comment
Добро пожаловать на прихоть художника, дизайнеры не инженеры, они не думают о прагматизме в большинстве случаев, если только они не промышленные дизайнеры, в таком случае они могут даже не понимать масштабирование шрифта и просто использовать px. вместо pt или % или em. - person DevelopingChris; 03.12.2008
comment
+1. Но вы должны помнить, что может быть и хорошо, что художники не инженеры. Иногда хорошо иметь красивый дизайн, но менее удобный. Вы почувствуете себя лучше, используя его, независимо от того, насколько это сложно. Так работает человеческий мозг: баланс между тем, что он представляет, и тем, что ему нравится делать. - person e-satis; 07.12.2008
comment
@Monkey - Дизайнер не должен предполагать, что любой размер шрифта является предпочтительным размером пользователя. Вот почему ваша таблица стилей должна установить базовый шрифт на 100% или 1em (это будет то, что пользователь установил в своем браузере, или 16px по умолчанию, как упомянул Филипп). - person Kevin Boucher; 05.10.2012

arrow_upward
2
arrow_downward

В большинстве современных браузеров %age допускает динамическую отрисовку. Ctrl- и Ctrl+ — ваши друзья.

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

person Unsliced    schedule 03.12.2008
comment
Я знаю о CTL+ и CTL-, но это раздражает почти на каждой открываемой вкладке. И как заставить мой браузер отображать текст главной страницы в размере 50% от выбранного мной размера? - person Lawrence Dol; 03.12.2008

arrow_upward
2
arrow_downward

Мне все равно, какого размера шрифт, если я могу его изменить. Это главная причина, по которой я ненавижу флеш-сайты. Не так давно я просматривал страницу вакансий для одной крупной компании, и шрифт был МАЛЕНЬКИМ. Моя инстинктивная реакция состоит в том, чтобы нажать Ctrl-+ (в firefox), но текст, отрендеренный во flash, не может быть изменен! Я сразу ушел с сайта. У меня не самое лучшее зрение, поэтому мне нужно уметь делать мелкий текст крупнее.

Еще одна проблема, с которой я часто сталкиваюсь, — это сайты с фиксированной шириной. Я использую мониторы с высоким разрешением (1600x1200, 1280x800 или выше), и нет ничего, что я ненавижу больше, чем пустое более половины экрана. Что еще хуже, на некоторых веб-сайтах фиксированная ширина не увеличивается, когда я увеличиваю шрифты! Однажды я пытался прочитать статью после того, как увеличил текст, и в нем было ТРИ СЛОВА В ЛИНИИ и НАГРУЗКА пустого места на экране справа...

person Community    schedule 03.12.2008
comment
Да, я тоже постоянно с этим сталкиваюсь. Бесит меня. Что меня бесит больше, так это то, что у меня остается 3 слова в строке, а реклама занимает остальную часть недвижимости. - person Lawrence Dol; 03.12.2008

arrow_upward
2
arrow_downward

Software Monkey задалась целью сразиться со всем миром. Он полностью не согласен с тем, как браузеры отображают размеры шрифтов, с основными веб-сайтами и с тем, как они устанавливают свои размеры шрифтов, и пытается вступать в жаркие споры с каждым автором этой ветки.

У меня есть простой ориентир в жизни. Когда вы думаете, что все остальные неправы, возможно, вы не правы.

Кроме того, даже если вы правы, часто бывает разумнее соглашаться с окружающим миром, а не бороться со всеми и всеми.

Вот мысль. Если вы веб-дизайнер и знаете, что более 99% посетителей не собираются возиться с размерами своего браузера по умолчанию, то вы, безусловно, хотите, чтобы ваш сайт выглядел хорошо для этого большинства. Этот прагматизм объясняет нынешнюю ситуацию.

В любом случае удачи в ваших поисках.

person allesklar    schedule 03.12.2008
comment
Моя цель — добраться до сути того, что мне нужно делать на моем веб-сайте. Должен ли я следовать задокументированному и заданному определению предпочтительного размера, или я должен обслуживать браузер по умолчанию (что не пришло мне в голову, когда я публиковал). - person Lawrence Dol; 03.12.2008
comment
W3C не указал, что относительные размеры шрифта относятся к 16pt, они указали, что они относятся к предпочтительному размеру пользователя — я понимаю, что для большинства пользователей это значение браузера по умолчанию — и, к сожалению, браузеры по умолчанию чрезмерно большой размер (а не 12-14) - person Lawrence Dol; 03.12.2008
comment
@Monkey smashingmagazine.com /2011/10/07/ - person Kevin Boucher; 05.10.2012

arrow_upward
1
arrow_downward

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

person Torbjørn    schedule 03.12.2008
comment
Я подозреваю, что проблема уменьшения шрифта блога заключается в том, что они включают ответы на стороне сервера со стилем font:80% в вложенных div, не понимая, что 80% относится к размеру шрифта родителя. - person Lawrence Dol; 05.12.2008

arrow_upward
0
arrow_downward

Установка шрифта в % или em — это не глупость, на самом деле это рекомендуется консорциумом W3C!

person adam    schedule 03.12.2008
comment
Прочтите мой пост — я не говорю, что использование em или % — это плохо. - person Lawrence Dol; 03.12.2008
comment
Прочитай мой ответ, потом прочитай свой пост еще раз. Вы намекнули, что использовать их было глупо: p - person adam; 03.12.2008
comment
Шрифт слишком мелкий... они устанавливают 50%... это кажется глупым. Следовательно, % не тупой, а 50 % моего предпочтительного размера тупой. - person Lawrence Dol; 03.12.2008

arrow_upward
0
arrow_downward

  • Используйте css для управления размером шрифта
  • Укажите размер шрифта в em
  • Используйте чит-коды (например, # , _ ) для разных браузеров, если шрифты отображаются в разных размерах в разных браузерах.
person Samiksha    schedule 03.12.2008

arrow_upward
0
arrow_downward

Чтобы ответить на ваш РЕДАКТИРОВАТЬ: причина очевидна. Дизайнер страницы должен передать набор информации с различными свойствами, и изменение реальных размеров шрифтов является одним из (самых ранних) инструментов в типографике и макете, доступных ему.

Вам, как зрителю, разрешено определять для себя удобную базовую линию, но если дизайнер хочет подчеркнуть или ослабить важность части текста, это зависит от него и для вашей пользы< /эм>. Вы должны завидовать ему не больше, чем 50% высоты, чем #999 или курсив.

Все это зависит от того, стоит ли дизайнер своих денег и не злоупотребляет ли это, что, к сожалению, может случиться.

person annakata    schedule 03.12.2008
comment
Да, но зачем устанавливать размер содержимого вашей страницы равным 1/2 размера, в котором я предпочел бы видеть содержимое любой данной страницы. - person Lawrence Dol; 03.12.2008
comment
Если вы говорите, что размер шрифта в теле, похожем на корень, установлен на 50%, ну да, это звучит немного оскорбительно. Есть эстетические аргументы в пользу ~80% или >100%, но, как описано, это звучит неразумно. - person annakata; 03.12.2008
comment
добавление: базовый шрифт SO составляет 100%, google средний или маленький, W3 наследуется - вы можете увидеть все это в firebug. Проблема может быть в вас самих. - person annakata; 03.12.2008
comment
@annakata - спасибо, я посмотрю поближе, используя firebug. FTR, я не знаю, что это размер шрифта корневого элемента; Я скорее подозреваю, что размер шрифта для основного текста (например, для ‹p› в вопросах SO) был уменьшен. - person Lawrence Dol; 03.12.2008
comment
@annakata - ТАК устанавливает шрифт тела на 80%, так что не означает ли это, что базовый шрифт страницы с этого момента становится 80% от того, что настроил браузер, или 9,6 пункта из моих настроенных 12 пунктов? По сути, SO решил отображать все в размере 80% от моего предпочтительного размера, который крошечный ?? - person Lawrence Dol; 03.12.2008

arrow_upward
0
arrow_downward

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

person Community    schedule 24.02.2009