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

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

Для начала, я сразу оговорю две вещи: во-первых, ни в коем случае не думайте, что я собираюсь «наехать» на rumkin’а — автора статьи. Статья очень хорошая, качественная, и я был бы рад, если б на Хабре статей такого уровня было как можно больше. Просто у меня возникли некоторые разногласия с автором, и я хотел бы поделиться ими с вами.
Во-вторых, я не профессиональный дизайнер/верстальщик, и на звание оного претендовать не хочу. Тем не менее, у меня есть интерес,, и вкус.
Можно сказать, что я просто ценитель и любитель этих искусств, по этому всё, что я буду писать дальше, основано на моих личных вкусах и пониманиях, нежели на богатом профессиональном опыте.

Теперь, когда вышесказанное вам известно,

Полиграфисты относят математические работы к каторжным...
Д.Э.Кнут. Математическая типография.

Больше года назад, когда я решил, что перейду на полностью лицензионный софт, выбор покупать Microsoft Office или перейти на OpenOffice сильно не стоял — студенту очень сложно найти лишние деньги. Счастье от того, что OO выполняет почти все что от него требуется закончилось довольно быстро в момент, когда я открыл встроенный редактор формул OO.Math. Сказать, что он плох — это ничего не сказать. Было понятно, что нужно искать другой инструмент.

Первоначально выбор пал на Design Science MathType, который позволял работать почти в том же редакторе, что и MSO (MS Equation ничто иное как урезанный MathType), но работа с OLE объектами была утомительна и так и не поддавалась автоматизации. К тому же, меня тяготела мысль о том, что при переходе на Linux систему, я опять потеряю возможность работы с формулами.
Перебор других средств расширяющих функционал или заменяющих ОО.Math не дали ничего кроме разочарования. Все проекты были очень сырыми или недостаточно функциональными.
Я продолжил поиск и был вознагражден: я нашел OOoLaTeX.

По просьбам трудящихся коснёмся темы «типографских» раскладок клавиатуры. То есть, как системных средств Windows, так и сторонних программ, позволяющих вводить различные специальные символы с помощью клавиатуры (обычно, правой клавиши Alt, она же AltGr).

Большинство вспомнят раскладку Ильи Бирмана, но она не идеальна для нужд контент-менеджера или дизайнера. Заслуга её в том, что Рунету был продемонстрирован путь создания таких раскладок.

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

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

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

Очень интересная и сложная игра.


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

Играем и выигрываем! Желаю удачи.

Единственный чит код, который я знаю — www.myfonts.com/WhatTheFont

P.S. Кстати сам сайт ilovetypography.com очень оригинален, красив и полезен всем, кому не равнодушны шрифты. Очень рекомендую.

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

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

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

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

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

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

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

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

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'а: «мой» и стандартный.

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