Типографика *

Большинство веб-сайтов нашпиговано мелким текстом, читать который — сплошное мучение. Для чего? Нет никаких причин для того, чтобы ужимать так много информации на один экран. Это — просто дурацкое коллективное заблуждение, восходящее к временам, когда экраны были очень, очень маленькими. Поэтому…

Не заставляйте нас изменять размер шрифта

Мы не хотим постоянно менять настройки размера шрифта в браузере при посещении каждого нового сайта.

Не доказывайте нам, что переполненные страницы лучше выглядят

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

Не втирайте нам, что прокрутка страниц — это плохо

Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.

Не говорите нам, что текст не важен

95 % того, что обычно называют веб-дизайном, — это типографика.

Не требуйте, чтобы мы начали носить очки

Лучше вместо этого перестаньте тереться носом об экран, откиньтесь в кресле назад (!) и продолжайте чтение этой статьи в расслабленной позе.

Эх… Опять про тексты, написанные роботами. Developers! Developers, научитесь, наконец, делать пользователям ваших творений приятно.

Вот, например, «Семейно-строительный институт им. Ленин» — приятно? И Ленину не приятно… Да, склонять имена пользователей — дело не благодарное. Ну и не надо. Всегда можно сформулировать мысль таким образом, чтобы имя осталось в неизменной форме. Например, в заголовках персональных страниц пользователей Хабра можно писать «Apostol на Хабрахабре», «Apostol's хабрацентр» или «Хабрацентр „Apostol“» вместо «Хабрацентр им. Apostol».

Вместо «Последний раз был на сайте 2 мая 2008 05:25» гораздо лучше выглядит и читается «… был на сайте 2 мая 2008-го в 5:25».

Вместо кирпич башка попадёт «Вы искали водка, найдено 82 совпадения, соответствующих запросу, из них 2 пользователя, 20 хабратопиков, 60 комментариев» лучше вывести «По запросу „водка“ найдено 82 совпадения, из них 2 — в профилях пользователей, 20 в хабратопиках и 60 в комментариях».

Ситуацию надо менять. До начала изменения ситуации осталось секунд: −166860421. ;)

По следам хабралинча имени Рюмкина коснёмся темы правильного типографического оформления чисел. В голову пришли следующие темы, если что-то вдруг забыто — пишите в комментариях, добавлю в статью.

• Минускульные и маюскульные цифры
• Целые числа и десятичные дроби
• Простые дроби
• Буквенные сокращения (тысяча, миллион, миллиард)
• Диапазоны
• Порядковые числительные и числительные в составе сложных слов

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

Если применить к рекламе правила русской типографики и грамматики, то можно найти сразу две нелепейшие ошибки:

Первая, «56,500» — это не по-русски, по-русски вот так «56 500», а тут получилось пятьдесят шесть целых и пятьсот тысячных рабочих станций.
Вторая, если станций не пятьдесят шесть с половиной, а все-таки пятьдесят шесть тысяч, то при попытке всё это прочесть опять получается какой-то бред: «для управления… рабочих станций.»
Вот такая вот русификация! 

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

Пока что удалось обнаружить два вида интересных с точки зрения типографики видеороликов:

• титры в кино (movie title sequence),
• кинетическая типографика (kinetic typography).

Под хабракатом приведу несколько роликов-иллюстраций и дам ссылки на дальнейшее копательство в YouTube.

Для приобщения дизайнеров к теме экранной типографики, хочу рассказать про очень интересный и удобный инструмент typetester, кстати вот он:

Бывают такие ситуации, когда нужно подобрать гарнитуру для сайта и при этом проверить как она выглядит в различных браузерах и как сочетается с другими гарнитурами, а ещё бы и готовый CSS всего этого получить. Более того, если не доступен визуальный редактор, который, последнее время я вообще не использую, то хочешь-не хочешь а Шрифтестером пользоваться придётся. Симпатичная графика сочетается с повышенным удобством программы! В общем must use.

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

Список книг будет разбит на группы по темам, и каждая из них — на группы «обязательно прочесть и иметь» и «можно прочесть и иметь» (это выделение безусловно субъективно, так что спорить насчёт него не буду точно). В принципе, большинство книг есть в широкой продаже, в том числе и в крупнейших российских интернет-магазинах. Некоторые есть в отсканированном виде и их можно найти в Интернете.

Я решил охватить следующие темы, которые либо всё время всплывают в процессе работы, либо необходимы для общего образования дизайнеров, интересующихся веб-типографикой, и контент-менеджеров:

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

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

(Начало фильма. О продолжении читайте ниже.)

В течении часа Фрай рассказывает о первопечатнике, учавствует в воссоздании печатного станка, делает бумагу и льет литеры. Документальный фильм производства BBC на английском языке.

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

Вообще в «Типографику» постинг записан чисто формально. Он настолько же, если не более, уместен и в «Стартапах», и в «Будущем здесь», и в «Моем бизнесе». Чего стоит только пассаж про кризис проекта с последующей заменой носителя — бумаги вместо пергамена.

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

via

Ещё одна мелочь, на которую не вредно обращать внимание — оформление знака охраны авторского права (который часто неграмотно называют «копирайтом»). К сожалению, на сайтах этот элемент подвала страницы зачастую ставят «чтобы был», и оформляют кто во что горазд. Однако, на сей счёт есть не просто сложившиеся правила, а целый ГОСТ Р 7.0.1—2003 (PDF, 652 КБ).

Ничего сложного в оформлении знака охраны авторского права нет, нужно просто знать определённые правила.

Одна из наиболее распространённых ошибок, встречаемых на работающих сайтах, в макетах дизайнов и в документах, заключается в злоупотреблении прописной буквой в вежливом обращении «Вы».

На самом деле, всё очень просто, и на сей счёт есть чёткое устоявшееся правило.

В этой заметке пойдет речь о довольно интересной технологии sIFR (Scalable Inman Flash Replacement). Путем комбинации Flash JavaScript и CSS на вашей XHTML-страничке можно создать текст, выполненный абсолютно любым шрифтом. При этом xhtml абсолютно валиден, текст будет выделяться, а отсутствие flash или JavaScript приведет всего лишь к отображению текста стандарным шрифтом с CSS стилями.

Заметка не претендует на абсолютно полное описание технологии, но в конце вас ждут ссылки на документацию и небольшой пример, который вы сможете скачать одним файлом и «поиграться» с ним на досуге.

Как следует из заголовка, речь в статье пойдёт о неотъемлемой части любого русскоязычного (и не только) текста — о пробеле. Мы затронем историю пробела, виды пробелов, вопросы употребления пробела в веб-типографике.

Вообще говоря, пробел — это любое пустое место в рукописном, печатном или отображаемом на любом другом носителе тексте. Так что пробелы бывают разные:

• спусковые (большие вертикальные пропуски в первой полосе издания) и концевые пробелы полосы,
• абзацные отступы и концевые пробелы абзаца,
• межстрочные пробелы (между строками текста),
• межсловные пробелы (между словами в одной строке),
• межбуквенные пробелы (между буквами в слове).

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

Сервис «Типограф», созданный и поддерживаемый Spearance, предупреждает о своем закрытии. WTF?! На мой взгляд, один из самых качественных типографических сервисов — и такие новости?

 

Почти все сайты использующие тег SUP никак не инструктируют браузер как его отображать. А ведь отображение по-умолчанию откровенно хромает — тег этот рвёт тексты, высота строки где присутствует SUP увеличивается и в результате нам предстают хаотично разбросанные строки, а не параграф. Сложно даже быстро понять, является ли такое экстра-пространство разбивкой между строками, или между параграфами.


Два варианта superscript'а: «мой» и стандартный.

Самое интересное, что такое поведение можно легко исправить, достаточно добавить глобальный стиль навроде этого:

Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Стараясь исправить это досадное недоразумение, мы коснёмся двух вопросов: типографического оформления цитат (в той части, где чаще всего допускаются ошибки при вёрстке) и реализации этого оформления в HTML-коде.

Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

Для начала представлюсь. Зовут меня Евгений (Eugene Spearance) — автор небезызвестного сайта и технологии Типограф.
Просиживая вечера в сладком безделии решил написать несколько статей посвящённых теме компьютерной вёрстки, раскрыть секреты собственного Типографа, а так же поделиться кое-какими соображениями о будущем развитии типографики.

Некоторых людей, использующих бюджетный «Оптимус» от Ильи Бирмана, постигает одна серьёзная неприятность: радость после успешной установки типографских раскладок сменяется разочарованием, поскольку в списке используемых раскладок к пунктам «Английская (типографская раскладка Ильи Бирмана)» и «Русская (типографская раскладка Ильи Бирмана)» упорно сам по себе добавляется пункт «США». Это может показаться странным, но постоянное появление третьей (да ещё и ущербной с типографской точки зрения) раскладки создаёт просто невыносимые условия для работы.

Надеюсь этой записью открыть серию статей, посвящённых типографике в целом и веб-типографике в частности.

Логически следующая статья будет посвящена использованию разнообразных пробелов и разделительных интервалов (такой заказ был в комментариях к статье о тире и дефисах пользователя besisland).

Итак, тезис статьи: «до тех пор, пока браузеры не имеют возможности динамически расставлять переносы в словах, вебмастеры должны забыть выключку по ширине как страшный сон».

Это значит, что нужно забыть CSS-конструкцию «text-align: justify;» и, если вы этого до сих пор не сделали, то выжечь калёным железом все воспоминания об «align="justify"».

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.