Web-типографика — четыре золотых совета

[Gaen]

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

[shaggysmile]

ага. будет супер, а то никак не могу найти

[Gaen]

http://rapidshare.com/files/92850771/ned… рапида
http://dizigner.nnm.ru/kniga_o_dizaiyne описание и скриншоты оглавления

[shaggysmile]

спасибо! :)

[zencd]

Пятый золотой совет — точка в конце вашего заголовка не ставится.

С «царствованием» IE1.0 вы некорректно обошлись — разве ж это царствование? Так, существование какое-то: «Internet Explorer 1.0, как и Internet Explorer 2.0, выпущенный в ноябре 1995 года, широкого распространения не имел» ©

[shaggysmile]

спасибо - это верно ) Word сволочь точку поставил :)
не заметил.

[yerzintimur]

Полезная статья, надо дать почитать заказчикам, особенно про размер шрифта.

[arestov]

вы лучше в них этим тыкайте ;)

[nooze]

Спасибо, очень интересуюсь типографикой последнее время и такие статьи как раз к месту

[Fragster]

А я читаю на кпк белый текст на черном фоне - иначе слишком ярко, даже на минимальном уровне подсветки. А книги так не делают - потому что краски слишком много надо для заливки такой, и бумага не впитает все - будет одна каша вместо текста. Ну в общем дешевую книгу так не сделаешь - а дорогие я в таком оформлении видел (тот же мой рок-н-ролл, кажется). И про способ измерения контрастности - беда - зеленый шрифт на красном фоне - слишком контрастен даже, а в оттенках серого бужет равномерно серым.

[Fragster]

про белый текст на черном фоне - все зависит от шрифта. просто большинство современных шрифтов не предназначены для этого.

[winter_night]

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

[dmitry_h]

Для тех кто не в теме (на счет книг) - можно без проблем (относительно дешево) напечатать книгу белыми буквами на черной бумаге (называется печать белилами). Мы печатали брашуры, они как раз и были выполнены на идеально черной бумаге. Но читать художественную или техническую литературу в таком исполнении будет сложно.

[Fragster]

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

[bubuq]

Какой процент аудитории смогли оценить отсылку к суфле Gordon Ramsay?

[Heath]

Robert Bringhurst — Роберт Брингхёрст
Serif — шрифт с засечками (анти́ква)
Sans-serif — шрифт без засечек (гроте́ск)
Gordon Ramsay — Гордон Рэмзи, популярный великобританский шеф-повар

[magic4x]

 Heath, не подскажете почему многие дизайнеры терпеть не могут когда заголовки (да и вообще, помоему любой текст) пишут прописными? Мол «не модно» или «старье». Чем это аргументировано? Что прописными пишут только аббревиатуры?
Вот тут пользуются этим приемом и ничего, даже замечательно (всегда у меня во вкладке весит в качестве хорошего примера, кстати :)

[Heath]

Во-первых, тут используются не прописные, а имитация капители, это разные вещи. Дизайнеры не могут терпеть текст, набранный прописными, потому что он очень плохо читается. А читается он плохо потому, что все буквы имеют одинаковый рост, в отличие от строчных. Кроме того, выделение прописными буквами в тексте нарушает цвет текста, его однородность. Для выделения в наборном тексте лучше уж использовать капитель, специально созданную для данного шрифта.

Что касается заголовков прописными, это ещё более дибильно. Помимо затруднённого чтения, добавляется многократное выделение: и размером, и жирностью, и цветом, ещё и прописными. Мне, честно говоря, и капитель в заголовках обычно не очень нравится.

[magic4x]

Про маразм в «ворде» понятно. Я имел ввиду эти самые капители, просто до Вашего комментария считал их прописными. Теперь буду знать. Спасибо.
В википедии об этом написано немного, но хоть что-то. Значит будем гуглить :)
По поводу заголовков: я заметил, что на уличных вывесках проще читаю заголовки написанные сплошь прописными (у меня -2,5) пусть это даже «плохо» с точки зрения некоторых дизайнеров, «недодизайнеры» выполняют свою задачу — я вижу текст из далека. А люди значит это используют неправильно, т.е. пишут прописными вместо капителей.

[Heath]

Если написать заголовок «недодизайнера» строчными того же размера (с учётом выносных элементов), то читаться будет не хуже, я думаю.

Это не «неправильно», в типографике вообще «неправильно» (как в любом неформализуемом деле) — понятие довольно расплывчатое. Многие акцидентные шрифты вообще не имеют строчных букв, так что заголовки на улице, в афишах, и т. п. — вопрос отдельный.

[Tilli]

Heath, есть ли хоть в одном из «безопасных» шрифтов капитель?

Если в Ворде в свойствах шрифта выбрать «малые прописные» откуда он их берёт? Тупо уменьшает прописные ведь?
Мне нужно именно для текста в Ворде, не для веба. Внедрять шрифт в документ — не вариант. Есть ли в стандартных капитель?

[Heath]

Я точно не скажу, но по-моему нет. Первые качественные шрифты в Windows с капителью — семейство из Vista, которое также есть в Windows 7: Calibri, Constantia, Candara, Segoe UI — там кажется везде есть капитель. А также маюскульные и минускульные, моноширинные и пропорциональные цифры, набор лигатур и т. п.

Что касается Arial, Courier, Times New Roman — там народ 15 лет назад типографической красотой не заморачивался.

[Tilli]

Если в Ворде выбрать «малые прописные» для Calibri он, все равно набирается тупо уменьшенными заглавными.

Новая загвоздка: как набрать в Ворде текст капителью? :]

[Heath]

А какая версия Ворда? По-моему, 2007 при выборе «Small caps» использует честную капитель. Или я ошибаюсь?

Вот рисунок цифр в Ворде и всякие flourishes точно выбирать нельзя, хотя в Индизайне — уже можно использовать минускульные цифры того же Калибри.

[megalol]

Люди глотают слова целиком. ПРОПИСНЫЕ ЗАСТАВЛЯЮТ ЧИТАТЬ ПО СЛОГАМ И СПОТЫКАТЬСЯ. Как в первом классе. Этот тормоз может быть хорош для заголовков, но 'недодизайнер' усложняет человеку чтение и это бесит.
Если плохо видно, проще увеличить шрифт. Для примера можно посмотреть оформление европейских городов (например, в фильме Helvetica). Получается читаемо и ненавязчиво.

[magic4x]

Я понимаю, что это некруто — писать несколько слов прописными, другое дело когда заголовок состоит из одного или двух слов. Я заметил, что когда слова написаны капсом, я читаю их проще — четко вижу первую букву, затем вторую, третью и словарный запас подставляет слово целиком («глотаю его целиком»), а если прописная только первая, то я напрягаю глаза пытаясь прочитать слово. Особенно это бесит когда проезжаешь мимо дома по адресу типа А_нифига_не_вижу, тут надо быстро схватывать — ул. АРБУЗНАЯ :)

[megalol]

Надеюсь, прокатит и браузер выдаст одинаковый размер букв как задумано.
Ср.: ул. АРБУЗНАЯ versus ул. Арбузная

[Heath]

Кстати, выше выложили ссылку на книжку. Хорошая книжка для начинающих, несмотря на некоторые неточности в переводе терминологии. Так вот, там написано следующее (стр. 93 файла .djvu).

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

[magic4x]

Нет, я не набираю текст прописными, просто хотел понять почему так не советуют делать. Спасибо.

[Heath]

«Я не рекомендую вам набирать текст только прописными буквами» — это начало цитаты из книги. :) Короче говоря, резюме такое: никто не говорит, что этого делать нельзя. Можно, но оправдано это сравнительно редко.

[bebopkid]

> И еще не забывайте о межстрочном интервале, расстояние должно быть равно 140% от размера вашего шрифта (свойство CSS line-height).

В оригинале: «должно быть минимум 140% от размера шрифта».

[katremer]

Тоже думаю, что точные рекомендации здесь неприменимы, но ещё считаю, что можно и меньше 140%. От шрифта зависит. Шрифты с засечками, имхо, лучше читаются со стандартным междустрочным.

[bebopkid]

Вот я и удивился, что на iLoveTypography так написали — полез проверять. А от 140% они написали, думаю, потому, что слишком большой интерлиньяж в вебе гораздо чаще встречается, чем слишком маленький.

[Heath]

Может, наоборот? :)

[shaggysmile]

спасибо... у меня явно проблемы с очепятками

[georgthegreat]

Имхо это все было в Ководстве. Повторяться незачем. Цель типографики - подача материала.

[yurka]

Полезная статья, спасибо. Очень важно было бы более подробно описать "пространство между блоками текста" - стараться разбивать текст на большее количество абзацев, делая расстояние между ними.

Иногда встречаешь довольно интересные тексты, но читать их просто невозможно - один или два абзаца на всю страницу. Получается эффект "много букв"

[rachiu]

Хоть я не специалист в дизайне, но мне кажется, что выделять куски прописными буквами не очень правильно. И на картинке очень плохо смотрится I'M.

[untone]

Статью переводил робот? Иначе, становится понятно, ппц в голове отчего такой. лять, дети, учитесь писать по-русски.

[p01]

А у вас как минимум одна лишняя запятая.
И гипербатон слишком сложный для такого простого поста. ;р

[savvdm]

Стоит заметить, что результат перевода в grayscale сильно зависит от метода, которым это делается. Этому посвящена целая глава в классической книге Маргулиса про Фотошоп.

[Svetlyak]

Да, тоже самое хотел написать. Кроме того, перевод в Grayscale, каким бы способом он не выполнялся, не позволит оценить цветовой контраст, кторый тоже оказывает значительное влияние на восприятие информации.

[icCE]

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

1) Какой из доступных/свободных/бесплатных шрифтов лучше использовать для печати ? (12/14 кегль )
2) Для чтение с Электронных устройств ? (тут начинается с 10)
3) Для чтение на черным фоне белым (кстати какой именно черный использовать ? и какой белый ?)
4) и то же самое , что и 3 :) только зеленые буквы (ну люблю я такое сочитание :) )

[Kvakes]

Хорошая шутка про "небезызвестного Тима Бернерс-Ли". Предлагаю так теперь его и называть.

[shaggysmile]

это моя шутка :)

[Timursan]

Понравилась шутка про обезъян :) Жалко, что шутка - это тоже просто перевод, а то бы плюсанул. Да и не могу я плюсовать.

[yaroslavpat]

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

[yaroslavpat]

Кстати, про 140% — это тоже зависит от случай. Надо брать в расчет ширину колонки, шрифт и кегль.

[yaroslavpat]

переводите точнее, там даже курсивои написали at least. Слишком уж вы вольны в переводе.

[yaad]

Хорошие советы, но для ознакомления с типографикой стоит прочитать Брингхёрста.

И посмотреть документальный фильм «Гельветика», чтобы проникнуться её духом.

[k48]

На данный момент, ситуация иная.
В последнее время, в моду стали входить
Особенно, это модно

Мы имеем достаточно средств, для грамотного оформления текста на web-странице.

Мы, имеем, достаточно средств, но, к, сожалению, текст, тоже, грамотно, писать, нужно :)

Это я так, придираюсь, статья на самом деле интересная.

[Meredian]

ИМХО это чистой воды балабольство и предубеждение, что текст, написанный "белым по черному" (и прочие подобные изыски) читается плохо.
Почему так книжки не оформляют - ежу понятно, это туева куча краски.
Но мне, например, так читать гораздо удобнее. Когда в браузере читаю большие статьи, всегда мышкой текст выделяю, даже так удобнее - это при том, что выделение само по себе дает довольно яркий синий цвет, с черным еще удобнее.

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

[Heath]

Всё правильно говорите. «Минус» выворотки (когда пишут светлым по тёмному) только в том, что текст в результате визуально кажется меньше, а линии букв — тоньше (особенности восприятия). Если это компенсировать, то всё будет в порядке.

Эх, вспомнилась мне любимая тема для Волков Коммандера, с зелёным текстом на чёрном фоне. :)

[Gaen]

а код на чёрном фоне - вообще сказка! :)
http://img410.imageshack.us/img410/2411/…

[cherneen]

Лучшая книжка по типографике, которую я читал это: «Джеймс Феличи. "Типографика: шрифт, верстка, дизайн"»
Подробнее на _http://oz.by/books/more1010537.html
Краткая рецензия на книгу: _http://www.eldesign.ru/book/typo/typo01

[Heath]

Это далеко не самая лучшая книга, я об этом писал. Книги получше перечислены в записи, к которой этот комментарий и был дан.

Из рецензии: «На настоящий момент ничего более информативного по типографике на русском языке вы не найдете». Так вот, с 2005 года уже появились если не более информативные, то как минимум более точные издания.

[cherneen]

Я не претендую на объективное мнение по данному вопросу. Я выскал лишь то, что мне эта книжка понравилась. И спасибо за ссылку на пост. Очень полезно оказалось.

[despoth]

Все это попахивает Якобом Нильсеном, Владом Головачом, Артемием Лебедевым и другими апологетами якобы-юзабилити, где есть лишь одна мысль: «все, что не по законам столетней давности - уё%ищно по определению». На самом деле, современная типографика не ограничивается одними лишь банальными определениями «нельзя больше двух гарнитур» или «чёрное на белом лучше белого на чёрном». Всё это студенты полиграфических даже не вузов, а техникумов изучали 50-60 лет назад. Удручает, что как раз подавляющее большинство «дизайнеров» и IT-специалистов с высшим (или кучей высших) образованием не знают даже столь очевидных и простых понятий. А ещё более удручает, что постоянно находятся умники, провозглашающие аксиомы о том, как писать с «ять» и почему «нам не нужна буква ё». Да и, ежели честно, исследования на тему соответствия 34534 кодов Unicode всем разновидностям пробелов, чёрточек и точечек — уже утомили нипадеццки.
Как сказал один мой знакомый: «В интернете всегда так. Если больше не о чем сказать, подавляющее большинство начинает тупо гуглить и википедить, дабы показать свою неискоренимую значимость и продвинутость»...

[Heath]

Хм. Дело совсем не в этом. Ведь действительно, если человек не понимает азов, то лучше ему заранее сказать, что так-то делать… не «нельзя», но «в большинстве случаев не рекомендуется». А когда глаз уже будет намётан, человек сам поймёт, почему одно лучше другого, и когда общими рекомендациями можно пренебречь.

[winter_night]

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

[DeadlyShadow]

> А насчет обезьян – это была шутка ;)

а я поверил=)


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

[Heath]

Видите ли, фраза «я думаю если смотриш на сайт и нормально всё читаеться» некоторыми читается нормально, а некоторыми — нет. Поэтому одно субъективное впечатление недостаточно образованного в данной области человека — не показатель.

[EKLEKELEKTRIK]

«Как сказал Robert Bringhurst, типографика существует, для того чтобы сделать акцент на содержание.» [правильно: содержании]

Как-то особо жестоко мне сия ошибка резанула зрительный аппарат.

[Stam]

«Cуть web-типографики заключаться не просто…»