Совет использовать крупный шрифт можно назвать классикой нашего жанра. Даже заметных споров по этому вопросу не ведется: дизайнеры и юзабилисты легко соглашаются, буквы должны быть такого размера, чтобы читателю было комфортно. Но, вот ирония, страницу с крупным шрифтом не сыщешь днем с огнем.
Фактически упомянутый совет воспринимается так: не используйте слишком мелкий шрифт. Однако «крупный» и «не слишком мелкий» — не одно и то же. Когда на сайте статьи набраны Верданой в 11px — говорят, это слишком мелко, а когда Эриалом в 13px — все вроде бы довольны. Но большая ли разница?
Если читаю статью, например, на alistapart.com, то увеличиваю шрифт до тех пор, пока штрихи не станут заметно толще.
Как есть
Как я люблю
Ни разу не видел статьи, набранной настолько крупно. Чувствую, сайт, на котором шрифт изначально такого большого размера, посетителя смутит. Шрифт слишком крупный.
Максимум, что встречалось, это
Verdana 16px на сайте Якоба Нильсена,
Arial 16px в блоге «Точка с запятой»,
Trebuchet MS 16px у Ильи Бирмана (сейчас уже Calibri).
Мне читать такой набор не удобно — штрихи по-прежнему тонкие, а пустот чересчур много. То есть шрифт-то крупный, но масштаб мне всё равно приходится менять. Полумера, как ни крути.
Так почему все, и я в том числе, говорят, но не делают? Я бы сказал, что дело в браузерах, которые при рендеринге шрифтов утолщают штрихи поздновато. Или может в самих шрифтах.
Если знаете, как сделать качественный крупный шрифт на сайте, было бы интересно послушать.
Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
Комментарии
Azs, 12.05.2008 15:41
А я делаю «Свойсва экрана» — «Параметры» — «Дополнительно» — 120 точек/дюйм. И мне дивья.
Serhiy, 12.05.2008 18:13
http://seleckis.lv - тут шрифт большой и статьи есть на эту тематику.
Дмитрий Сергеев, 12.05.2008 18:29
Забыл я про никитин сайт, там и вправду крупный шрифт.
Тормоз, 12.05.2008 22:25
А я обычно в CSS для размера шрифта использую ключевые слова, на мой взгляд, так лучше. Чаще всего medium, но иногда делаю и large как основной. Так что бывают, разработчики, которые и крупный текст делают изначально...
Правда, потом находятся же пользователи, которым кажется, что это крупно. И вот тогда я понимаю, что на самом деле самая основная проблема - это повальная компьютерная безграмотность. Малый процент пользователей знает, что колесиком мыши с зажатым ctrl можно увеличивать и уменьшать текст.
Немного оффтоп, но тут же вспоминается мерзкий target='_blank'. Никогда его не использую, именно поэтому неоднократно в мою сторону летели претензии, типа «что за фигня, почему ссылки не в новом окне открываются?!» То есть даже возможностью открытия ссылок в новых вкладках средней кнопкой мыши (вроде во всех нормальных браузерах уже давно так) пользуется совсем небольшой процент людей.
Очень жаль, что так всё. И ещё более жаль, что люди и не хотят хотя бы немного чему-то научиться, хоть чуточку эффективнее использовать инструмент, с которым они работают большую часть времени.
Дмитрий Сергеев, 12.05.2008 23:14
>> А я обычно в CSS для размера шрифта использую ключевые слова...
Размеры шрифта по-хорошему, я слышал, надо задавать в em, и чтобы в начале какой-нибудь reset.
Ключевые слова, насколько понимаю, неоднозначно понимаются браузерами. В результате имеем еще одно бесконтрольное звено и менее предсказуемый размер шрифта на выходе. А это многим дизайнерам не понравится.
Разрешение экрана, настройки шрифтов в ОС, браузерные пресеты, отсутствие договоренностей по поводу ключевых слов -- сложный макет может не выдержать.
>> Правда, потом находятся же пользователи, которым кажется, что это крупно.
Это точно :)
>> То есть даже возможностью открытия ссылок в новых вкладках средней кнопкой мыши…
Я привык зажимать Ctrl и кликать по ссылке левой кнопкой. Причем в FF можно настроить, перейдешь ли ты автоматически на новую вкладку или страница фоном будет грузиться. Очень удобно изучать новые сайты: наоткрываешь штук 10 вкладок фоном и читаешь потом.
Александр, 25.05.2008 20:01
>Очень жаль, что так всё. И ещё более жаль, что люди и не хотят хотя бы немного чему-то научиться, хоть чуточку эффективнее использовать инструмент, с которым они работают большую часть времени.
Поверь, большинству пользователей нет дела до того, что можно открывать ссылки колёсиком мыши и ещё как-то.
Так же как и нехочется учиться эффективно пользоваться автомобилем. Ведь можно просто кататься, а можнл умело управлять и передвигать в три раза быстрее.
Тормоз, 12.05.2008 22:26
И P.S., извини...
1. «Сохраните мои личные данные до следующего раза» не работает как надо, видимо. Недавно же комментировал твою заметку про истории успеха, но поля оказались пустыми.
2. Почему же на твоем блоге шрифт крупный только в форме ввода комментариев? ;)
Дмитрий Сергеев, 12.05.2008 23:23
>> «Сохраните мои личные данные до следующего раза» не работает как надо, видимо...
Да, какой-то старый не шибко рабочий модуль. Рецепт прост: стираешь куки с этого сайта, заполняешь все поля, ставишь галочку и отправляешь комментарий. Всё должно запоминаться.
Проблемы по-моему возникают, когда кука уже стоит, а люди хотят что-то изменить для следующих своих комментариев. Ужасно не удобно за этот баг, давно обещаю починить, но пока не хватает запала.
>> Почему же на твоем блоге шрифт крупный только в форме ввода комментариев?
Боюсь распугать неискушенных посетителей :)
Константин Михайлов, 13.05.2008 18:55
А вот можно чтобы страница при нажатии на кнопку <<Ответить>> не перезагружалась, а показывалась форма отправки коммента сразу?
P.S. А что за модуль такой? А то я тут начал Drupal осваивать, вот и интересуюсь на какие модули стоит обратить внимание.
Дмитрий Сергеев, 16.05.2008 00:01
>> А вот можно чтобы страница при нажатии на кнопку не перезагружалась, а показывалась форма отправки коммента сразу?
Посмотрите настройки на странице admin/content/comment/settings
Тормоз, 12.05.2008 23:43
Нормально всё воспринимается. Я тоже много чего слышал и читал, но практика расставила всё по местам.
Насчет недовольства дизайнеров. Ну, к счастью, я лишь пару раз в жизни верстал по чужому дизайну, потом мне вообще нафиг надоела работа на заказ. Поэтому я сам себе дизайнер, но всё же выскажусь насчет дизайнеров, про которых ты написал выше: очень плохой дизайнер, если он не учитывает возможность изменения размера шрифтов, возможность отстуствия каких-либо шрифтов вообще, не учитывает вероятность отключенных картинок и т.п.
Именно поэтому я считаю, что дизайнер для WEB обязан просто хотя бы примерно понимать HTML, а не просто творить размашиство в «фотошопе».
А насчет открытия новых вкладок, так у меня точно также всё, только без ctrl, а просто средней кнопочкой. Удобно.
Артём Курапов, 13.05.2008 00:04
Я думаю что проблема в пиксельной сетке - при маленьких размерах шрифты без засечек лучше воспринимаются, а при достаточно больших винда начинает сглаживать. Помоему в промежутке 14-20px округлости не так хорошо смотрятся. Сглаживание Safari не в счёт.
А учитывая что надо вместить не только текст но и навигацию, картинки, кучу других блоков, увеличение шрифта (вместе с рекомендуемой кем-то line-height:130%) может придать впечатление игрушечности (aka Comic Sans).
Имхо главное это относительные размеры (в процентах или в em), что-бы пропорции при ручном изменении размеров сохранялись
Дмитрий Сергеев, 13.05.2008 11:26
>> …надо вместить не только текст но и навигацию, картинки, кучу других блоков…
Поэтому думаю, что весь сайт можно делать стандартными размерами, а статьи, которые находятся на отдельных страницах без тяжелого сайтового обвеса можно набирать крупнее.
Всё равно, чтобы прочитать пару абзацев новостей на главной, я масштаб не буду менять. Выигрыш заметен на длинных текстах.
Антон, 13.05.2008 05:43
Включите сглаживание шрифтов у себя в системе.
Дмитрий Сергеев, 13.05.2008 11:19
>> Включите сглаживание шрифтов у себя в системе.
Так мне у себя не нужно. Я ищу шрифт, которым можно было бы набирать длинные тексты, и чтобы всем читателям было комфортно.
Дмитрий Белицкий, 13.05.2008 16:10
Я ищу шрифт, которым можно было бы набирать длинные тексты, и чтобы всем читателям было комфортно.
А что толку? Пока что им нельзя воспользоваться без применения flash'a. Шрифты, разработанные для чтения с экрана стоят в большинстве операционок - новый из-под полы не достанешь.
Дмитрий Сергеев, 13.05.2008 16:19
>> ...новый из-под полы не достанешь.
Я не ищу новый. Пытаюсь выбрать лучший вариант из того, что есть.
Дмитрий Белицкий, 13.05.2008 15:37
Интересная тема, есть оригинальный метод, которым я в ближайшее время собираюсь воспользоваться http://habrahabr.ru/blog/typography/39604.html
Дмитрий Сергеев, 13.05.2008 15:42
Насколько я знаю, sIFR не годится для сколько-нибудь длинных текстов.
Дмитрий Белицкий, 13.05.2008 16:05
Да, пожалуй что так, нагружает наверное порядочно машину. Хотя нужно определиться что такое "крупный текст". Думаю что для статей подобной обсуждаемой - он вполне подойдет, но надо тестить.
Я же хочу использовать его для заголовков - идеальный кандидат.
Вообще я доволен тем как отображаются шрифты в моем браузере (сафари на маке). Уверен, улучшать устройства отображения - лучше и перспективнее чем придумывать костыли. Кроме этого - пусть пользователь сам выбирает какой ему размер нравится и каким шрифтом. Обычно можно переопределить браузерные настройки по-умолчанию - запретить исользовать стили сайта, а написать свои, с нужным размером, гарнитурой, кернингом, интерлиньяжем, насыщенностью.
Дмитрий Сергеев, 13.05.2008 16:30
>> ...пусть пользователь сам выбирает, какой ему размер нравится и каким шрифтом.
Я не верю, что пользователь в состоянии выбирать. Девять человек из десяти даже не думают об этом: если шрифт мелкий, они щурятся, придвигаются к монитору, надевают очки, распечатывают. Изменить масштаб в браузере, настроить ОС на отображение более крупных шрифтов, включить сглаживание -- это фантастика.
Поэтому нужно быть чуточку гуманистом и сделать Trebuchet MS 16px :)
Дмитрий Белицкий, 13.05.2008 16:48
Согласен :)
Продолжу тему про поиск "лучшего шрифта из возможных" - есть два типа шрифтов - с засечками и без. Это самый глобальный выбор - решить что лучше для чтения. Многие книжные дизайнеры утверждают что шрифты с засечками лучше читаются, однако же есть и некоторое количество дизайнеров которые утверждают что на экране нужно использовать шрифты без засечек, так что тут - большей частью дело вкуса и оформления. Остальное - например ариал или вердана или таймс или требушет - все это платформо-зависимые шрифты, у меня например используются другие.
К чему это? Да к тому что особо не повыбираешь. Остается еще упомянуть про то что рекомендованый минимум размера шрифта для веба - 16px., думаю что меньшие величины - в ущерб пользователям и их глазам. Хотя и тут под водой рифы - разрешение мониторов - оно разное и зависит от размера пикселя.
Для себя я понял что нужно ставить размер по-умолчанию в 16px и сделать ЗАМЕТНЫЕ кнопки "+" и "-", чтоб можно было изменять размер без поиска по меню браузера.
Дмитрий Сергеев, 13.05.2008 18:01
Мой Firefox 2 под WinXP с выключенным ClearType сглаживает Таймс Нью Роман и Джорджию очень плохо (видимо дело в засечках). Рубленые шрифты в этом смысле выглядят лучше. Так что если я буду делать крупно, то скорее всего без засечек.
Кнопка «Увеличить размер шрифта» — это вообще-то мысль. Только не в том виде, как сейчас принято (буква «А» и треугольник где-то на отшибе). Я бы ее поставил недалеко от заголовка в паре с кнопкой «Распечатать».
Мне кажется, достаточно двух позиции: стандартный шрифт и крупный. Кнопка «Увеличить» при нажатии становится кнопкой «Уменьшить».
Денис Судилковский, 13.05.2008 15:49
Я тоже стараюсь делать покрупнее шрифт на сайтах (сам близорукий), но сразу же находятся "зрячие", которые кричат громче слепых "Сделайте меньше! Столько места не продуктивно используется! Пальцы устают скролировать через каждых пять строк!" (:
Всем не угодишь (;
miripiruni, 14.05.2008 01:17
Почему же никто не делает?
Из англоязычных сайтов мне сразу вспоминается 37signals.com
Дмитрий Сергеев, 16.05.2008 00:04
>> Почему же никто не делает? Из англоязычных сайтов мне сразу вспоминается 37signals.com
Там не такая уж и крупная Georgia, и она только в коротких текстах на главной. Посмотрите, как набраны тексты подлиннее ;)
deerstop, 17.05.2008 02:41
Согласна, было бы очень удобно читать действительно крупный шрифт, но не думаю, что в скором времени кто-то всерьез за это возьмётся. Скажем, 16px Verdana только раздражает. Буквы по-прежнему тонкие, пользы никакой. Значит, надо делать минимум 18 пикселей, а следовательно, и увеличивать пустоты между блоками. Наверное, на страницу не будет влезать практически ничего - пара абзацев максимум. Ведь люди хотят читать не только с удобствами, но и быстро, то есть охватывая глазом крупные блоки текста. Например, я не читаю статью сразу, сначала проглядываю, чтобы оценить объем, полезность, время, которое придётся затратить и так далее. Как и с книгами, никто не читает текст построчно.
А откуда вообще взялась эта привычка делать мелкие шрифты? *чешет репку* Если от маленьких мониторов 800х600, то с увеличением размера экранов и шрифты будут увеличиваться.
Дмитрий Сергеев, 18.05.2008 20:31
Спасибо, deerstop, всё четко расписали.
Пришел к выводу, что буду как и раньше пользоваться стандартными размерами. А для большого сайта с объемными статьями возможен вариант с кнопкой «Увеличить шрифт».
azait, 20.05.2008 17:28
http://blogistan.ru/ - там надо e-mail в форму забить - размер шрифта впечатляет!
Tiahin, 02.06.2008 15:47
Размер шрифта нужно задавать с относительных единицах - pt или em. И ни в коем случае не в абсолютных - px!
Dojd, 08.06.2008 20:49
Сделайте у себя на сайте такой шрифт, коакой вы указали как любимый и и наблюдайте отток посетителей. Вопросы отпадут под натиском факта. Инногда проще пользоваться статистикой чем пытаться найти обьяснения тому или иному факту.
Педагог, 09.06.2008 02:25
Всем не угодишь, восприятие разное, настройки мониторов разные. Если выбирать между крупным и мелким, я лучше буду читать крупный шрифт.
Петр, 09.06.2008 15:25
Если честно маленький шрифт выглядит более цивильние чтоли
VolCh, 23.06.2008 02:03
На всех точно не угодишь, мне вот шрифт этого блога мелковатым кажется, точнее тонковатым, с ctrl++ через чур крупным и разряженым, а шрифт которым сейчас комент этот набираю - вообще огромным как будто за слепого меня принимают :)
Правда монитор меня несколько нестандартный по нынешним меркам 19" ЭЛТ и разрешение 1400x1050 (1600x1200 на 100Гц не держит, да и ближе всего разрешение к стандартному 96dpi). А по статистике LI большая часть (>30%) серферов юзает 1024x768 (то ли старье, то ли обычные 15" ноуты, то ли еще что - непонятно) , чуть меньше (>25%) 1280x1024 (стандарт для обычных 17-19" ЖК) и еще чуть меньше (>15%) 1280x800 (наверняка 15-17" ноуты и 17-19" мониторы 16:10, то есть самые "продвинутые" юзеры). Эти три группы "держат" три четверти "рынка", на них и надо ориентироваться, но вот беда угадать что за монитор там стоит не ошибясь хотя бы на пару дюймов не реально.
По идее надо дизайнеру/верстальщику ставить размеры шрифта в пунктах или других физических единицах исходя из общего концепта, юзабилити, и разрешения в 96 dpi, а уж железу, драйверам, ос, браузеру, админу и юзеру доверить сначала правильную, а потом желаемую интерпретацию этих размеров
VolCh, 23.06.2008 02:05
Вот еще следствие непривычного размера шрифта - кучу ошибок допустил, обычно меньше
Nikolay, 02.07.2008 16:11
Я считаю 14px - это нормальный шрифт .Кроме Сtrl + колёсико и Сtrl "+" или Сtrl "-" во многих браузерах есть окошко масштаб страници в процентах, там тоже удобно менять размер шрифта.
Wincert, 11.07.2008 20:23
А мне нравятся крупные шрифты, слепну наверно потихоньку. Чем дальше тем крупнее.
Сергей Юрьевич, 17.08.2008 14:08
А чем шрифт Нильсена не понравился?
podarok, 31.12.2008 20:26
Я пробовал делать дизайн крупным шрифтом.
Есть с этим несколько проблем.
Первая - отображение шрифтов разными браузерами - даже с резетом.
Если опера, експлорер и сафарь - нормально сглаживают крупное, то мозилла (оно же гекко) - суют в шрифты все что попало.
На мелких - это не особо заметно. Но крупный - сразу глаза режет, посему сложно это.
Вторая - большая проблема гармонирования большого шрифта с графикой. Как-то не всегда оно сводится к чему-то удобоваримому.
PS. Кстати, вариант с большим шрифтом для поля коментария мне к примеру очень понравился. Писать оччень даже приятней - меньше напряга для глаз, когда перечитываешь собственную же писанину...