Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 41
Как показали последние эксперименты, дресированные мартышки безошибочно распознают Гельветику в 90% случаев.На иллюстрации, следующей за этой фразою, изображён (по крайней мере, сейчас) орангутан, а вовсе не мартышка. Полагаю, что мартышки безошибочно распознали бы и это обстоятельство.
Самец это, наросты же.
(Нет, я тоже не специалист по орангутанам)
(Нет, я тоже не специалист по орангутанам)
Я кошку Гельветикой назвал =)
… например, заглавные буквы для заголовков...
Ну вот, рекомендуют то, что делать нежелательно. :(
Для аббревиатур допустимо, а для обычных слов — нет.
Ошибочка. Для аббревиатур нужно, а не допустимо.
> Ну вот, рекомендуют то, что делать нежелательно
Обоснуйте.
Обоснуйте.
Не хочу начинать холивар, но я не поддерживаю использование прописных букв там, где это не нужно.
Здесь, например, всё сказано за меня.
Здесь, например, всё сказано за меня.
Это западная традиция
Есть small caps, ими, я думаю, вполне можно оформлять короткие заголовки
Мне кажется, что этот график несколько путает понятия, отделяя типографику в Интернете от бумажной. Обе тесно связаны, компьютерные шрифты следуют традициям печатных. При чтении печатной продукции и интернет страницы особенности человеческого восприятия во многом схожи.
Есть подозрение, что этот график говорит вот о чём: с 1995 огромное количество людей, далёких от типографского дела получила возможность оформлять тексты. Не желая разбираться в истории вопроса, некоторые дизайнеры заявили, что Интернет — «терра нова», пользователи интернета — «хоминес интернети», и, вообще, надо срочно всё придумать заново.
Есть подозрение, что этот график говорит вот о чём: с 1995 огромное количество людей, далёких от типографского дела получила возможность оформлять тексты. Не желая разбираться в истории вопроса, некоторые дизайнеры заявили, что Интернет — «терра нова», пользователи интернета — «хоминес интернети», и, вообще, надо срочно всё придумать заново.
Ну вот, положили все картинки.
Пустой текст. Ни о чем
Уточнения насчет веб-типографии:
0) Главная и самая наичудовищнейшая ошибка — сама попытка сделать чтобы текст на экране выглядел «как напечатанный в книжке». Как говорится, без комментариев.
1) Вторая ошибка типографов — попытка подменить понятие «сделать так чтобы везде выглядело одинаково юзабельным» понятием «сделать так чтобы везде выглядело одинаково».
2) Насчет размеров шрифта. Как ни крути, тридцатидюймовый FullHD монитор и маленький экранчик наладонника это слишком разные вещи. Для них нужны отдельная верстка, отдельный дизайн и отдельная типографика.
3) Красиво выглядящий текст != Удобочитаемый текст. Особенно это касается технических текстов, исходных кодов и прочих замечательных вещей, где структура должна визуально отслеживаться, зачастую даже в ущерб внешней красивости.
4) Попытка сделать текст слишком контрастно-выделяющимся. Люди иногда не только читают текст, но и вчитываются (см. выше про технические тексты), и очень нехорошо когда текст «бьет по глазам» уже после получаса вчитывания.
0) Главная и самая наичудовищнейшая ошибка — сама попытка сделать чтобы текст на экране выглядел «как напечатанный в книжке». Как говорится, без комментариев.
1) Вторая ошибка типографов — попытка подменить понятие «сделать так чтобы везде выглядело одинаково юзабельным» понятием «сделать так чтобы везде выглядело одинаково».
2) Насчет размеров шрифта. Как ни крути, тридцатидюймовый FullHD монитор и маленький экранчик наладонника это слишком разные вещи. Для них нужны отдельная верстка, отдельный дизайн и отдельная типографика.
3) Красиво выглядящий текст != Удобочитаемый текст. Особенно это касается технических текстов, исходных кодов и прочих замечательных вещей, где структура должна визуально отслеживаться, зачастую даже в ущерб внешней красивости.
4) Попытка сделать текст слишком контрастно-выделяющимся. Люди иногда не только читают текст, но и вчитываются (см. выше про технические тексты), и очень нехорошо когда текст «бьет по глазам» уже после получаса вчитывания.
А можете смысл ошибок раскрыть? Иначе ощущение, что вы сделали надстройку в виде «правил» над пустяковыми проблемами.
0) Вы про хинтинги, клир-тайп и цветовые модели? И что, сделаю я как напечатанный в книжке, что плохого в этом будет?
1) Поясните примером, пожалуйста, неясно, о чем вы.
2) Верстка и дизайн — согласен, а типографика чем вам не угодила? Что конкретно вы имеете ввиду под типографикой? Я вот считаю, что смело могу делать как основной текст, так и заголовки одинаковыми и для FullHD, и для QVGA. В чём я неправ?
3) Если для меня красота это в первую очередь удобочитаемость, то Красиво выглядящий текст = Удобочитаемый текст. Хотя стоит отдавать себе отчет, что это вообще ненаучные понятия, и точных определений им не дать. Скорость чтения — другое дело, но она опять-же от привычки зависит.
0) Вы про хинтинги, клир-тайп и цветовые модели? И что, сделаю я как напечатанный в книжке, что плохого в этом будет?
1) Поясните примером, пожалуйста, неясно, о чем вы.
2) Верстка и дизайн — согласен, а типографика чем вам не угодила? Что конкретно вы имеете ввиду под типографикой? Я вот считаю, что смело могу делать как основной текст, так и заголовки одинаковыми и для FullHD, и для QVGA. В чём я неправ?
3) Если для меня красота это в первую очередь удобочитаемость, то Красиво выглядящий текст = Удобочитаемый текст. Хотя стоит отдавать себе отчет, что это вообще ненаучные понятия, и точных определений им не дать. Скорость чтения — другое дело, но она опять-же от привычки зависит.
0) Слишком разный носитель. Монитор также отличается от книги как надпись в книге от надписи например на асфальте.
1) О попытке сделать то, что будет одинакого выглядеть везде (на бумаге, на большом мониторе, на маленьком экранчике,...). Зачастую этим процессом настолько увлекаются, что забывают о главном — о хорошем восприятии.
2) Один и тот же шрифт может восприниматся очень по-разному на большом мониторе и на экранчике кпк. Многие шрифты, красиво смотрящиеся на мониторе практически не читаемы на кпк. А кпк-шные шрифты на большом мониторе могут смотреться кондово.
3) Если это так, то рад за вас. Только так считают не все. Более того, очень многие типографику «тестируют» на бредотекстах типа «lorem ipsum», яндекс.весна и пр. А они очень далеки от реального технического текста, в первую очередь за счет структуры.
1) О попытке сделать то, что будет одинакого выглядеть везде (на бумаге, на большом мониторе, на маленьком экранчике,...). Зачастую этим процессом настолько увлекаются, что забывают о главном — о хорошем восприятии.
2) Один и тот же шрифт может восприниматся очень по-разному на большом мониторе и на экранчике кпк. Многие шрифты, красиво смотрящиеся на мониторе практически не читаемы на кпк. А кпк-шные шрифты на большом мониторе могут смотреться кондово.
3) Если это так, то рад за вас. Только так считают не все. Более того, очень многие типографику «тестируют» на бредотекстах типа «lorem ipsum», яндекс.весна и пр. А они очень далеки от реального технического текста, в первую очередь за счет структуры.
Ок, спасибо )
0) Так и что? Я вижу проблему лишь в том, что монитор резко сужает возможности отображения и настройки цветности, но почему-же не стараться от этого сделать текст как в книге? Почему попытка сделать «чтобы текст на экране выглядел как напечатанный в книжке» — «чудовищная ошибка»? (хочется понять, в чём ошибка, в каких именно деталях)
1) В каком плане «выглядеть одинакого»? Я правильно понимаю: если мой текстовый слэб-сериф хорош в тексте в листовке, на мелком кпк все-равно лучше использовать читабельный гротеск? Вы об этом? То есть читабельность и читаемость важнее стиля и узнаваемости?
2) Серьёзно, вы можете привести пример шрифта, который по-разному выглядит на разном разрешении экрана? Мне казалось, технология рендеринга шрифта одинакова, независимо от экрана (если брать дисплеи стандартных разрешений от 256 цветов). Или вы о сочетании шрифт-формат? Вообще не в курсе, чтобы было разделение на кпкшные и не-кпкшные шрифты. Если говорить о спец-дисплеях, другое дело.
3) Полностью согласен, ситуацию надо менять, чем и занимаюсь )
0) Так и что? Я вижу проблему лишь в том, что монитор резко сужает возможности отображения и настройки цветности, но почему-же не стараться от этого сделать текст как в книге? Почему попытка сделать «чтобы текст на экране выглядел как напечатанный в книжке» — «чудовищная ошибка»? (хочется понять, в чём ошибка, в каких именно деталях)
1) В каком плане «выглядеть одинакого»? Я правильно понимаю: если мой текстовый слэб-сериф хорош в тексте в листовке, на мелком кпк все-равно лучше использовать читабельный гротеск? Вы об этом? То есть читабельность и читаемость важнее стиля и узнаваемости?
2) Серьёзно, вы можете привести пример шрифта, который по-разному выглядит на разном разрешении экрана? Мне казалось, технология рендеринга шрифта одинакова, независимо от экрана (если брать дисплеи стандартных разрешений от 256 цветов). Или вы о сочетании шрифт-формат? Вообще не в курсе, чтобы было разделение на кпкшные и не-кпкшные шрифты. Если говорить о спец-дисплеях, другое дело.
3) Полностью согласен, ситуацию надо менять, чем и занимаюсь )
0) Монитор вовсе не сужает возможности отображения, а скорее имеет свои специфические возможности и ограничения отображения. И их следует учитывать. Если их правильно учитывать текст на мониторе можно будет сделать читабельным без напряжения. О чем, собственно я и говорю. Поясню на очень простом примере. Что такое белый лист с точки зрения отображения — это поверхность автоматически адаптирующаяся под освещенность помещения, а что такое белый фон окна в мониторе — это по сути люминесцентная лампа размера 34x27 см которая фигачит вам прямо в глаза во всю мощь вне зависимости ни от чего (я например, очень часто убавляю яркость монитора, потому иначе глаза очень сильно устают уже через час).
1),2) Да, я именно об этом. Все-таки надо заботиться о глазах пользователя, пусть это даже и будет ценой некоторого «гротеска». Всте-таки в тексте самое главное, что его будут читать, а для этого текст должен быть читабельным. Кстати, «технология рендеринга шрифтов» тут не при чем. У монитора и маленького экранчика разный размер пикселя, а это накладывает отпечаток. Я уже не говорю о такой «интересной особенности» мобильных устройств, что информацию с их экрана будут пытаться читать при разных освещениях.
P.S.: Кстати, у меня только что был «живой пример» как ушлый народ пользуется связью типографики и читабельности текста: Еду я сегодня с работы в метро и вижу напротив меня висят в вагоне две рекламы. Казалось бы ничего интересного, но вспомнил о нашем разговоре про типографику и обратил на них внимание. На одной из них была сноска «со звездочкой» внизу из мелкого текста. У второй же просто была область некрупного текста скраю. Причем, если сравнивать чистые «размеры» первого и второго шрифтов, то видно что они особо по размеру не отличались. Однако в глаза сразу бросился «хитрый трюк» выполненный за счет «хитростей типографики»: Во второй рекламе кусок небольшого текста про «натуральность продукта» легко и ненапряжно читался даже не вставая со скамейки и не напрягая зрения, однако при этом в первой рекламе чтобы успешно прочесть мелкий текст внизу «стоимость сообщений уточняйте у оператора», надо было как минимум встать, подойти и прочитать в упор. Вот вам «волшебство типографики» в действии :)
1),2) Да, я именно об этом. Все-таки надо заботиться о глазах пользователя, пусть это даже и будет ценой некоторого «гротеска». Всте-таки в тексте самое главное, что его будут читать, а для этого текст должен быть читабельным. Кстати, «технология рендеринга шрифтов» тут не при чем. У монитора и маленького экранчика разный размер пикселя, а это накладывает отпечаток. Я уже не говорю о такой «интересной особенности» мобильных устройств, что информацию с их экрана будут пытаться читать при разных освещениях.
P.S.: Кстати, у меня только что был «живой пример» как ушлый народ пользуется связью типографики и читабельности текста: Еду я сегодня с работы в метро и вижу напротив меня висят в вагоне две рекламы. Казалось бы ничего интересного, но вспомнил о нашем разговоре про типографику и обратил на них внимание. На одной из них была сноска «со звездочкой» внизу из мелкого текста. У второй же просто была область некрупного текста скраю. Причем, если сравнивать чистые «размеры» первого и второго шрифтов, то видно что они особо по размеру не отличались. Однако в глаза сразу бросился «хитрый трюк» выполненный за счет «хитростей типографики»: Во второй рекламе кусок небольшого текста про «натуральность продукта» легко и ненапряжно читался даже не вставая со скамейки и не напрягая зрения, однако при этом в первой рекламе чтобы успешно прочесть мелкий текст внизу «стоимость сообщений уточняйте у оператора», надо было как минимум встать, подойти и прочитать в упор. Вот вам «волшебство типографики» в действии :)
0) Это да, цветовые модели понятное дело. Мне просто интересно, в чём же разница. Вот я достал мелки, пошел и на асфальте гельветикой написал что-то о хорошем дне. Вот достал маркер, и написал футурой на стене какое-нибудь смешное замечание. Вот прогаю мобильный сайт, и ариал выбрал для основного текста. Вот делаю документ, и выбрал гарамонд для набора. А в чём разница, так и не смог понять.
Может, в той детали, что в типографике цветность регулируется тонким изменением светлоты шрифта, а на мониторе — выбором именно цвета шрифта? Или в том, что на мониторах советуют черный делать в 10% яркости вместо 0%, а белый делать в 95% яркости, вместо 100%?
2) О ppi — да. Если мы задаём размер шрифта не в пикселях, то выглядеть по-другому будет, вы правы. Важно, кстати, вот ещё что (как изменится типографика): формат кпк вертикальный и узкий, и с рекомендацией на читабельность интерлиньяж можно безболезненно уменьшать. А вот на крупных экранах строчки длиинные, интерлиньяж надо делать больше, как и шрифт.
Просто к чему все мои вопросы были :) Если пишите «негативные» правила (т.е. ошибки), то поясняйте так-же позитивным примером, как следовало делать. Иначе неясно, что имеется ввиду под «не делай так»)
Может, в той детали, что в типографике цветность регулируется тонким изменением светлоты шрифта, а на мониторе — выбором именно цвета шрифта? Или в том, что на мониторах советуют черный делать в 10% яркости вместо 0%, а белый делать в 95% яркости, вместо 100%?
2) О ppi — да. Если мы задаём размер шрифта не в пикселях, то выглядеть по-другому будет, вы правы. Важно, кстати, вот ещё что (как изменится типографика): формат кпк вертикальный и узкий, и с рекомендацией на читабельность интерлиньяж можно безболезненно уменьшать. А вот на крупных экранах строчки длиинные, интерлиньяж надо делать больше, как и шрифт.
Просто к чему все мои вопросы были :) Если пишите «негативные» правила (т.е. ошибки), то поясняйте так-же позитивным примером, как следовало делать. Иначе неясно, что имеется ввиду под «не делай так»)
… (например, светлый текст на тёмном фоне); часто ли мы видим, чтобы так оформлялись книги? Такой подход может быть очень уместен для коротких отрывков текста, но мне кажется, что читать подобный текст очень тяжело даже менее минуты.
Это дело привычки и/или личных предпочтений. Книги не оформляются так совсем по другой причине — стоимость краски.
Ну наконец-то дельная статья именно по типографике, а не правилам оформления текста!
[grammar nazi mode]
Может все-таки «В вебе»? Мы ж не на деревне. Типографика, конечно, на страницах, но внутри сети.
[/grammar naz mode off]
Может все-таки «В вебе»? Мы ж не на деревне. Типографика, конечно, на страницах, но внутри сети.
[/grammar naz mode off]
Я даже подумал, что автор Мицгол, но не угадал.
+1
Между вариантами «на паутине» и «в паутине» выбор как бы очевиден.
Хотя я не дизайнер и не типограф, так что не знаю — может это отраслевое арго? :) Ну типа как «осУжденный» у ментов, «клапанА» у бульдозеристов и «Алкоголь» (с ударением на первый слог) у врачей.
Между вариантами «на паутине» и «в паутине» выбор как бы очевиден.
Хотя я не дизайнер и не типограф, так что не знаю — может это отраслевое арго? :) Ну типа как «осУжденный» у ментов, «клапанА» у бульдозеристов и «Алкоголь» (с ударением на первый слог) у врачей.
Можно еще к этим четырем прописным истинам (которые в той или иной мере уже много раз были описаны на Хабре, ибо дальше вот таких вот аксиоматичных банальностей авторы зачастую не заходят… видимо, боятся делиться своим драгоценным опытом) стоило бы вспомнить еще десятка с три подобных важных правил. Например, о межстрочном расстоянии, о ширинах текстовых колонок, об отступах между заголовками и текстами, о кернинге и трекинге и многих прочих вещах. Поскольку в приведенных выше примерах ничего это не учтено, и потому они выглядят довольно уныло, несмотря на контраст, иерархию, размер и пространство. Текст — очень тонкая субстанция, его надо чувствовать. Четырьмя базисными правилами, которые должен знать даже непосвященный, текст не сделаешь идеальным.
Не хотите рассказать, как сделать текст идеальным? Или может ссылкой поделитесь или названием книги?
Извольте.
www.eldesign.ru/book/typo/typo01
Джеймс Феличи «Типографика: шрифт, верстка, дизайн»
Стандарт де факто для любого, работающего с типографикой. Хоть и написана для принт-дизайнеров, процентов 80 пригодно и для веб-типографики. Читать в обязательном порядке от корки до корки. После прочтения вопросов о том, как сделать текст идеальным, останется меньше. А если и останутся, то по существу. И без банальностей.
www.eldesign.ru/book/typo/typo01
Джеймс Феличи «Типографика: шрифт, верстка, дизайн»
Стандарт де факто для любого, работающего с типографикой. Хоть и написана для принт-дизайнеров, процентов 80 пригодно и для веб-типографики. Читать в обязательном порядке от корки до корки. После прочтения вопросов о том, как сделать текст идеальным, останется меньше. А если и останутся, то по существу. И без банальностей.
«Заключение
Помните: это не правила, а рекомендации.»
Какой-то непоследовательный комментарий от переводчика под статьёй:
«Однако эти простые правила не соблюдаются многими, и я не считаю лишним напомнить их тем, кто сегодня делает Веб.»
Так всё-таки правила или рекомендации?
Помните: это не правила, а рекомендации.»
Какой-то непоследовательный комментарий от переводчика под статьёй:
«Однако эти простые правила не соблюдаются многими, и я не считаю лишним напомнить их тем, кто сегодня делает Веб.»
Так всё-таки правила или рекомендации?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Типографика на Вебе