Основы web-типографики пришли к нам из далекого 1991 года, еще от небезызвестного Tim Berners-Lee :)

Если оглянуться назад, в страшные времена царствования IE 1.0, то web-типографика (я не говорю о web-дизайне) находилась в зачаточном состоянии. На данный момент, ситуация иная. Мы имеем достаточно средств, для грамотного оформления текста на web-странице.

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


Рис. 1: Как показали последние опыты, 90% тренированных обезьян правильно отличают шрифт Helvetica.

Мы поговорим о web-типографике как о рецепте, содержащем четыре основных компонента. Если вы когда-нибудь пытались приготовить суфле, то скорее всего, смогли ощутить насколько важен рецепт его приготовления.

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

Линда Фэйн собирает статистику по предпочтениям внешнего вида текстового блока на специальной страничке «Text Prefs».



На странице нужно повыбирать шрифт и понажимать на кнопки увеличения/уменьшения кегля шрифта, межстрочного расстояния и ширины колонки, создав наиболее удобочитаемый для вас на данном мониторе блок текста. Чем сильнее мы пропиарим эту страничку Линды, тем полнее будет статистика (пусть и англоязычную, но это уже будет хоть что-то; может быть, кто-то надумает сделать кириллическую?).

После того, как статистика будет опубликована, обязуюсь доложиться в этом блоге. Ссылка была обнаружена через блог I Love Typography, за что спасибо Джону Бордли.

Сегодня Дизайнер Всея Руси совершил типографический наброс на вентилятор в своём личном блоге в Livejournal.

Так вот, ребята. Знак многоточия состоит из трех точек. «Тук, тук, тук», — именно такие звуки должна издать ваша клавиатура. Ни в коем случае нельзя пользоваться символом, называемым многоточием (…). Этот символ один содержит все три точки в себе. Придуман он для моноширинного набора и экономии байтов, однако пользоваться им для верстки книг, а также газет и журналов — нельзя.

Собственно, половина леммингов начала радостно принимать распоряжение Дизайнера Всея Руси.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть IV

Итак, настала пора выяснить, какие шрифты и с какой долей вероятности могут оказаться установленными в тех или иных операционных системах либо в результате каких-то особых ситуаций (например, при установке пакетов Microsoft Office, Adobe Creative Suite или CorelDRAW! Suite), либо в «девственно чистых» ОС (что, несомненно, наиболее приемлемый вариант). А также узнать, какие из этих шрифтов пригодны для использования и в каких конкретно случаях.

Традиционно, в Web, типографика не является основой дизайна. Но, она может
доминировать, преобладать и быть повсюду! Весьма смело…

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть III

Оказалось, что аж ещё со времён Windows 98 в стандартный комплект включается шрифт под названием Lucida Sans Unicode, который особо нигде не используется. Попробуем заменить им эппловский Lucida Grande.

Многие согласятся, что стандартных Arial, Times, Verdana и т.д. зачастую не хватает.
Тут на помощь вроде как должен прийти css правило @font-face, которое позволяет использовать свой шрифт. Но к сожалению нормальной поддержки браузерами нет. В качестве теста можно использовать http://www.alistapart.com/d/cssatten/stef.html.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть II

Во-первых, увеличились размеры экранов, улучшилась чёткость отображения и качество передачи цветов. В наше время всё реже используются старые ЭЛТ-дисплеи с небольшим разрешением, выпуклым экраном, мерцанием или ограниченной цветопередачей (помните CGA/EGA/VGA?). Фактически, количеством таких мониторов по сравнению с современными плоскими ЖК-дисплеями уже сегодня можно смело пренебречь. Изменились и негласные стандарты de facto и для разрешения: если в самом начале сайты создавались под размер экрана в 640х480 пикселей, потом для 800х600, то сегодня используется стандарт 1024х768. С появлением широкоэкранных (wide) мониторов начал было маячить новый стандарт 1280х960, но большую популярность в последнее время приобрели компактные устройства вроде Asus eeePC или Apple iPhone, так что не исключён факт возвращения в качестве стандарта разрешения меньшего, чем 1024х768. Впрочем, в данном случае это не столь важно, поскольку в любом случае на сегодняшний день разрешение экрана напрямую зависит от его физического размера, а величина одной отображаемой точки достаточно мала по сравнению с пикселями десятилетней давности, что позволяет на любых современных устройствах отображать шрифты одинаково качественно. Это, кстати, приводит и ко второму фактору.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

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

Британский сайт I Love Typography, посвящённый типографике, опубликовал список с примерами отличной типографики. Этот список составлен по итогам II кв. 2008 года. Предыдущие «хит-парады» можно найти здесь и здесь.

Каждый пример сопровождается кратким комментарием, а нажатие на скриншот ведёт на оригинальный сайт.

Seed Conference

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

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

Иногда, работая в текстовом редакторе с моим любимым моноширинным шрифтом Lucida Console, я сталкиваюсь с тем, что не могу отличить неразрывный пробел от обычного или длинное тире от дефисо-минуса. И мне пришла в голову идея изменить шрифт таким образом, чтобы можно было видеть различия между символами.

Уже после публикации заметки о раскладках клавиатуры наткнулся ещё на один перл, мощнейшее дополнение к FireFox с названием abcTajpu (пока что работает только в версиях 1.5 — 3.0b3).

После установки дополнение фактически заменяет клавишу Compose при работе в FireFox. С помощью abcTajpu можно легко набирать всякие хитрые символы (å℃≈Łķē¾Æ) без шаманских плясок с раскладками, а также задавать любые пользовательские замены (например, два пробела заменять на  ).

Прочие статьи о «типографских» раскладках на Хабре:

• Типографика: «Типографские» раскладки клавиатуры
• Убунтариум: И снова о раскладке Бирмана
• Типографика: Решение проблем с типографской раскладкой Ильи Бирмана
• Типографика: Об использовании длинного тире и пр.

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

Для начала, я сразу оговорю две вещи: во-первых, ни в коем случае не думайте, что я собираюсь «наехать» на 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. ;)