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

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

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

• титры в кино (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‐ й параграф «Ководства» Артемия Лебедева.

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

Опубликована новая версия Jevix — 0.9.5.

Основное отличие новой версии в том, что с этих пор Jevix можно использовать как средство для всестороннего контроля и преобразования текстовых данных больших интернет-проектов с «User-Generated» материалом.

Теперь Jevix умеет не только применять правила типографики, унифицировать HTML/XML разметку, но и контролировать перечень допустимых тегов с возможностью определения списка допустимых атрибутов для каждого тега отдельно. Также предусмотрена возможность предотвращения вероятных XSS-атак, скрытых в HTML-коде.

Отличнейшая статья Джоэла Спольски об отличиях отрисовки текста на компьютерах под управлением Mac OS X и Windows, а также о неприятии пользователями Windows того, как Safari рендерит тексты на экране. Написана простым языком, доступно и без нагружающих деталей.

Оригинал

 

Понадобилось сделать немецкую версию сайта. Озаботился вопросом стандартной немецкой типографики.