Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 52
Я думаю основная проблема в относительности размеров на различных экранах. На каждом экране должен быть индивидуальный DPI, чтобы размер пунктов, не пикселей(!) преобразовывать в задуманный физический размер.
Доводы, конечно, разумные. Но измерять размер шрифта в пикселях и делать на основе этого какие-то выводы о его видимости, мне кажется, глупо, ведь dpi монитора может быть каким угодно. А здесь про dpi даже не упоминается. 16 пикселей хватит всем? Даже экранам современных смартфонов (326 dpi)?
На заметку хабрасоздателям: серые h3-h5 на белом фоне — трудночитаемы — приходится напрягать зрение. Сделайте уж наконец их чёрными && выделенными && размер шрифта от 20px.
Целиком и полностью согласен с автором, на 22" с разрешением 1650х1080px комфортный масштаб для чтения хабра составляет 172%.
Категорически не согласен. Диагональ — 20, разрешение — 1680х1050px. Только что зашёл в девелоперс-тулз, поставил на Хабре шрифт 16пикселей — стало значительно менее читаемым. Когда по вашему совету оригинальный масштаб увеличил до 172 — стало просто невозможно разобрать слова. Набор огромных, не связанных между собой букв.
Масштаб 172% комфортен для меня, и в комментарии он не более чем показатель разницы между оригинальным и удобным для чтения размером.
Поставил 16px на комменты щас, читать стало сложнее на 24" @ 1920x1200 — 13px самое оно.
22'' разрешение 1920х1080 могу нормально читать с 10px, но 16px конечно лучше
Здесь ещё нужно DPI учитывать. При 144 DPI, на 22" с разрешением 1650х1080px комфортный масштаб 150%. А 144 DPI это само по себе 160% увеличение (настоящий DPI монитора 90).
Частенько слышу просьбу слелать шрифт крупней. Может стоит попробовать?
готовы ли вы тратить деньги ваших клиентов ради того, что нравится только вам?Таки да)
12px — это не самая страшная проблема. Самая страшная проблема — это 9px. И такие сайты встречаются. Вот уж точно люди идут к успеху банкротству.
Я предлагаю заменить 16 на 36 или скажем 72. Читать становится еще интереснее :)
Вот люди стебуться, но меня иногда бесят, скажем, в интро к новости 10-ый шрифт скажем. Если рассматривать хабр — то на экране ноутбука все замечательно и так, но дома, с монитором в 24', который стоит на расстоянии пол метра от глаз, мне больше нравится увеличить масштаб процентов на 20. Так намного приятнее и удобнее.
Опять же, 16 пикселей не всегда хорошо, как уже отметили выше, все зависит от DPI. Все это конечно решается с помощью media queries, но так же добавляет головной боли…
Опять же, 16 пикселей не всегда хорошо, как уже отметили выше, все зависит от DPI. Все это конечно решается с помощью media queries, но так же добавляет головной боли…
Самый лучший размер 1em
А на хабре еще любят зачеркивать слова, аль даже целые куски текста, хоть многие, как мне кажется, его все равно пытаются прочесть. И тут уж без разницы 16, аль 12 пикселей…
22'' 1680x1050 через файрбаг сделал текст поста в 16 пикселей. Непривычно, но довольно легче читать :)
Стоит задуматься.
Стоит задуматься.
Можно использовать яваскриптовые кнопочки для управления размером шрифта, видел на некоторых сайтах. Жамкнул А+, и шрифт стал крупнее, жамкнул А- и сделал помельче. Отличный выход из положения, и не надо рыскать по настройкам.
23'' FullHD масштаб 130% значительно проще и приятнее читается.
Автор статьи курил, непонятно что.
Переводчики зчем-то решили это перевести.
В комментариях какая-то вакханалия про пиксели и увеличение шрифтов.
При том, что уже лет пять, как всем советуют использовать девайсо-независимые размеры типа em для того, чтобы на всех экранах и DPI получить одинаковый физический размер шрифтов.
Пример — на каком-нибудь information architects
Переводчики зчем-то решили это перевести.
В комментариях какая-то вакханалия про пиксели и увеличение шрифтов.
При том, что уже лет пять, как всем советуют использовать девайсо-независимые размеры типа em для того, чтобы на всех экранах и DPI получить одинаковый физический размер шрифтов.
Пример — на каком-нибудь information architects
Да как-то давно уже привык в хроме для статей нажимать кнопочку плагина iReader'a – там оптимальный размер шрифта (к тому же, настраиваемый) и вытаскивает только текст самой статьи.
Этот плагин – аналог кнопочки Reeder в Safari.
Эти вещи появились как раз в силу того, что большинство сайтов с текстовым контентом именно такие, как пишет автор.
Хотя, конечно, странно, что этот дизайнер размер теста считает в пикселах.
Даже если посмотреть на комментарии здесь, то видно, что на одних и тех же 22" монитора у многих разные разрешения. Смотреть-то нужно на DPI, а не пикселы, но это я уже повторяю предыдущих ораторов.
Этот плагин – аналог кнопочки Reeder в Safari.
Эти вещи появились как раз в силу того, что большинство сайтов с текстовым контентом именно такие, как пишет автор.
Хотя, конечно, странно, что этот дизайнер размер теста считает в пикселах.
Даже если посмотреть на комментарии здесь, то видно, что на одних и тех же 22" монитора у многих разные разрешения. Смотреть-то нужно на DPI, а не пикселы, но это я уже повторяю предыдущих ораторов.
читаю хабр в FF, использую увеличение шрифта ctrl-+, ctrl-+ (2 раза)
посмотрел в firebug'е — основной текст получился 15.6px
автор прав — 16px оптимально
p.s. зрение не айс
посмотрел в firebug'е — основной текст получился 15.6px
автор прав — 16px оптимально
p.s. зрение не айс
Сайты, на которых я не могу увеличить шрифт, я вообще стараюсь не читать. Дизайнеров, которые делают 3-х колоночную вёрстку с шириной смыслового столбца пикселов 150 и нестандартными цветами, считаю необходимым бить железной трубой по голове вплоть до понимания идеи: «Интернет — он для чтения, а не для дизайна!»
Обычно кручу колесо до размера 18-20, если дизайн ещё не совсем разваливается. А если на сайт каждый день захожу (как на хабр), то Stylishем превращаю его в одноколоночный со шрифтом где-то 22px.
Мониторы у меня 22-24", 1680x1050/1920x1080.
Обычно кручу колесо до размера 18-20, если дизайн ещё не совсем разваливается. А если на сайт каждый день захожу (как на хабр), то Stylishем превращаю его в одноколоночный со шрифтом где-то 22px.
Мониторы у меня 22-24", 1680x1050/1920x1080.
Все так. Вообще все элементы сайта надо делать крупнее. в этом плане мне нравится страница логина на Хабре. Во первых много девайсов сейчас с мелкими экранами, попробуй ткни пальцем или даже стилусом на какую нибудь малюсенькую кнопочку на странице.
Но самое главное. Мой отец все файлы на компе называет с капслоком. Другой знакомый мужик использует эту же технику. То есть эта проблема для них действительно актуальна! Надо брать на вооружение. Так как количество пользователей интернета кому перевалило за 40 неуклонно продолжает расти.
Но самое главное. Мой отец все файлы на компе называет с капслоком. Другой знакомый мужик использует эту же технику. То есть эта проблема для них действительно актуальна! Надо брать на вооружение. Так как количество пользователей интернета кому перевалило за 40 неуклонно продолжает расти.
Категорически согласен с автором, пользоваться большинством сайтов без увеличения шрифтов очень бьет по глазам.
Основной браузер Opera — хорошо что там в настройках есть возможность выставить минимальный размер шрифта. Сейчас 18px, и то я не считаю, что это слишком крупные символы, наоборот, иногда приходится терпеть все ещё недостаточно крупные. Да, не все сайты сохраняют корректную верстку при такой настройке, но здоровье важнее.
Кстати, расскажу историю. В далекие-далекие времена, когда мониторы были стекляными, пришлось поработать пару лет за 15", а потом за 17". Работал в текстовой консоли FreeBSD (админил хостинг), и выбор стоял между стандартным текстовым режимом 80х25, нестандартными VESA режимами типа 90х50 и т.д., и Х-ми с их 1024х768 (больше на 17" было ставить бесполезно). Адекватный нестандартный текстовый режим подобрать не удалось, Х-ы слишком мылили пикселы, пришлось остановиться на обычном древнем текстовом режиме, как в страшном черном DOS ;). Кто помнит DOS, или во что разворачивался FAR менеджер через Alt-Enter — понимает о чем речь ;). Ничего, привык, обустроил, интернет через links, аська через centericq, картинки на работе рассматривать было некогда.
Так вот, что хорошо запомнилось о тех временах — это насколько легко глаза читали текст, много-много текста, целый рабочий день несколько лет, пока не сменил монитор. Это сейчас приходится одевать в офисе плюсовые очки при работе за компом, чтобы глаза сохранить (это отдельная история). А тогда, повторюсь, целый день читал текст и глаза не уставали совершенно!!! Т.е. вообще никак.
Основной браузер Opera — хорошо что там в настройках есть возможность выставить минимальный размер шрифта. Сейчас 18px, и то я не считаю, что это слишком крупные символы, наоборот, иногда приходится терпеть все ещё недостаточно крупные. Да, не все сайты сохраняют корректную верстку при такой настройке, но здоровье важнее.
Кстати, расскажу историю. В далекие-далекие времена, когда мониторы были стекляными, пришлось поработать пару лет за 15", а потом за 17". Работал в текстовой консоли FreeBSD (админил хостинг), и выбор стоял между стандартным текстовым режимом 80х25, нестандартными VESA режимами типа 90х50 и т.д., и Х-ми с их 1024х768 (больше на 17" было ставить бесполезно). Адекватный нестандартный текстовый режим подобрать не удалось, Х-ы слишком мылили пикселы, пришлось остановиться на обычном древнем текстовом режиме, как в страшном черном DOS ;). Кто помнит DOS, или во что разворачивался FAR менеджер через Alt-Enter — понимает о чем речь ;). Ничего, привык, обустроил, интернет через links, аська через centericq, картинки на работе рассматривать было некогда.
Так вот, что хорошо запомнилось о тех временах — это насколько легко глаза читали текст, много-много текста, целый рабочий день несколько лет, пока не сменил монитор. Это сейчас приходится одевать в офисе плюсовые очки при работе за компом, чтобы глаза сохранить (это отдельная история). А тогда, повторюсь, целый день читал текст и глаза не уставали совершенно!!! Т.е. вообще никак.
Хабр в хром-плагине stylebot настроен сейчас на 17px (19'', 1280*1024). При масштабировании средствами браузера зачастую разъезжается верстка. Когда-то в опере масштабировался только текст, потом и она стала как все.
Большой размер шрифта позволяет комфортно читать хабр, откинувшись на кресло на расстоянии 90 см (специально измерил). Стандартный размер могу нормально читать лишь наклоняясь к монитору на 60 см. Это не так удобно и больше напрягаются глаза.
Большой размер шрифта позволяет комфортно читать хабр, откинувшись на кресло на расстоянии 90 см (специально измерил). Стандартный размер могу нормально читать лишь наклоняясь к монитору на 60 см. Это не так удобно и больше напрягаются глаза.
Читая в Safari, в том числе и habr, почти всегда использую reader (встроенный плагин для чтения основного текста). В нём шрифт как раз около 16px.
>> Позвольте мне спросить: какой процент ваших читателей составляют люди за 40? Чтобы прочитать текст, их глаза должны работать в два раза больше, чем глаза 20-летнего.
Не факт. Работа глаз нелинейно зависит от попадаемого в них света.
Остальные утверждения тоже сомнительны. Но я согласен, что шрифту надо уделать больше внимания.
Не факт. Работа глаз нелинейно зависит от попадаемого в них света.
Остальные утверждения тоже сомнительны. Но я согласен, что шрифту надо уделать больше внимания.
Уже давненько написал юзерстиль, с которым мне комфортно читать хабр. И все потому что Chrome не умеет масштабировать только текст, не портя картинки увеличением. Может кому-то придется по душе:
.post .content {
font-size: 16px;
font-family: Arial;
}
.comments_list .comment_item .message {
font-size: 16px;
line-height: 130%;
font-family: Arial;
}
.comments_list .comment_item .message code {
font-size: 13px;
}
.post .infopanel,
.post .infopanel .author a,
.post .infopanel .published,
.post .infopanel .comments a {
font-family: Verdana;
font-size: 12px;
}
.post .infopanel .favs_count {
font-family: Verdana;
height: 13px;
font-size: 12px;
}
.comments_list .comment_item .info .voting .mark {
font-size: 17px;
}
body {
font-size: 15px;
padding-bottom: 20px;
}
#header .userpanel .charge,
.comments_list .comment .reply a.reply,
.comments_list .comment .info a.link_to_comment,
.comments_list .comment_item .info a.username,
.comments_list .comment_item .info time {
font-size: 14px;
}
.page-nav #nav-pages {
font-size: 18px;
}
.post ul.tags {
font-size: 12px;
}
.comments_list .comment .info {
font-size: 14px;
}
.comments_list .comment .info time {
font-size: 13px;
color: #888;
}
.editor .text-holder textarea,
#preview_placeholder {
font-size: 16px;
font-family: Arial !important;
}
textarea {
font-family: Arial !important;
}
#preview_placeholder {
font-family: Arial !important;
padding: 1px;
border: 1px dashed #EEE;
}
.profile-header .karma .mark,
.profile-header .habraforce .number,
.profile-header .habraindex .number {
font-size: 330%;
}
.userinfo dl {
margin: 0 0 3px 0;
}
.dl_logic_wrap {
margin: 0 0 5px 0;
}
.editor .panel .can_use_html {
font-size: 12px;
}
Вконтакте 11px Tahoma. Никто почему-то не жалуется. Меня тоже устраивает.
Вашу мать, это точно сайт, где собрались профессионалы? о_О Какие нахрен пиксели?
«16 пикселей идеальны» — при каком DPI? 96? 120? Или, может быть, на мобильных девайсах?
«16 пикселей идеальны» — при каком DPI? 96? 120? Или, может быть, на мобильных девайсах?
Автор поста ратует за удобочитаемость текста, а сам использует у себя уродские маргинальные веб-шрифты вместо давно зарекомендовавших себя Verdana, Arial и так далее. Более того, его гарнитура для основного текста у меня вообще сглаживается очень плохо, читается просто ужасно. Ну и как теперь это связать с его утверждением «Веб-дизайн — это не только то, что нравится дизайнерам»? Ну и, конечно, рекомендация использовать именно пиксели тоже не оставляет равнодушным. Использовать надо пункты, так как плотность пикселей на дюйм во всех экранах разная.
Насчет автора и его поста я имел в виду это:
www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
Вообще-то, насколько я могу видеть при помощи «Context Font», гарнитура для основного текста у него — Georgia, а гарнитура подзаголовка первого уровня — Arial, а гарнитура заголовков второго уровня — Impact, и заголовок первого уровня также оформлен Impact, только с тенями.
Это всё запасные шрифты к тем, что не смог отобразить Firefox (насколько мне известно, вы используете именно Fx). А вот Опера и Хром сумели показать первоначальные шрифты автора: Limelight Regular — для заголовка статьи, Ostrich Sans Rounded Medium — для надписи сразу под ним, TeX Gyre Schola — основной текст. Хром, в отличие от Оперы, хорошо сгладил основной текст, но не справился с заголовком. Fx и IE не показали веб-шрифты вообще (я бы сказал, что повезло :).
Остался один вопрос к переводчику после прочтения статьи: «почему она не 16 шрифтом сделана?» :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Мнение: основной текст в 16px