Десять смертных грехов веб-типографики

[@Lite]

Будете смеяться, но забыл статью в черновиках. Тем не менее, лучше поздно, чем никогда. :)

[@easyman]

Статья хорошая
Освежил память
А картинок в ней нет — у меня ни одной не отображается.

[@ident]

похоже на ограничение доступа к картинкам по доменному имени

[@Heath]

Коллега, есть несколько неточностей.

1. «Машинная кавычка» « не используется для обозначения дюймов. Для этого есть специальный знак «двойной штрих» (см. habrahabr.ru/blogs/typography/25531/).

2. «Bold-, italic- и smallcaps-» лучше перевести как «полужирное, курсивное начертания и капитель».

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

[@OmSoft]

Картинок нет ;(

[@Supercharged]

Есть спорные моменты. Особенно насчет border-bottom у ссылок.

[@mutation]

Вот насчет border-bottom однозначно с вами согласен.

[@xstb]

В описанном в п. 7 примере border-bottom: solid 1px #00f; в общем случае следует отказаться от явного указания цвета (синего в данном случае).

[@Rational_Yurij]

В русском и украинском языках это вообще менее актуально, т.к. в нашей кириллице за опорную линию текста выступают только «р», «у», «ф». Незначительно выступают «д», «ц» и «щ», но от этого они не становятся менее узнаваемыми.
В английском же языке выступают «g», «j», «p», «q», «y». Будучи перечеркнутыми снизу, они становятся похожи на «o», «i»,«o»,«o»,«v» соответственно. В русском языке подобное происходит только с буквой «р» и то в зависимости от длины палочки…

[@Co0l3r]

а я полностью согласен с 7, жалко что я сам до такого раньше не додумался

[@negodnik]

a {
display: block;
border-bottom: 1px solid;
}

Покажет, что этого делать не нужно

[@kurtkrut]

картинок действительно нет

[@nooze]

Чтобы появились картинки — я зашел на оригинал — там картинки открылись, и сразу подгрузились и в окно хабра (в опере проканало). Наслаждаюсь :)

[@mcm69]

картинки ограничены реферерами с SM, гугл-ридера и ещё каких-то рсс-радостей, так что придется вам их перезалить ;)

[@Lite]

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

[@Lite]

Кстати, если кто может порекомендовать правильный и бесплатный хостинг для таких картинок, то тому моя благодарность. Плюс ещё что-нибудь переведу. ;)

[@alexshelkov]

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

[@1999]

funkyimg.com/
например

[@mcm69]

picamatic.com

[@ivlis]

www.picamatic.com

Очень инетерсная статья — спасибо.

[@mcm69]

Да, а почему вы HTML-мнемоники вроде — заменили на альт-коды при переводе?

[@mcm69]

а, понял, парсер постарался. извините)

[@xaja]

Типографы — рулят, помогают исправить 50% этих вот ошибок.

[@yaroslavpat]

тире тут не нужно ;)

[@Sp1ke]

Да можно и без картинок, понятно все и так. Спасибо за науку — символ троеточия раннее я считал анахронизмом…

[@preprocessor]

Тёма так и считает — tema.livejournal.com/107311.html

[@loreley]

> Придуман он для моноширинного набора и экономии байтов, однако пользоваться им для верстки книг, а также газет и журналов — нельзя.

конкретно в той статье он даже не упоминает про необходимость употребления/неупотребления для веб, речь идет о бумажной типографике

[@ivlis]

Тёма как всегда категоричен. В шрифте Computer Modern (де-факто стандарт LaTeX и как следствие научной литературы) многоточие и три точки выглядят совершенно по разному, причём 3 точки выглядят наредкость коряво.

[@dime]

Он стандарт де-фекто в англоязычной научной литературе. Традиции английской типографики отличаются от традиций нашей типографики. А «наше» многоточие — всё таки три точки.

[@funnyless]

Он про полиграфию.

[@Sp1ke]

Тёма не придумывает стандарты.

[@preprocessor]

Дайте линк на стандарты и тех кто их придумывает, пожалуйста.

[@upir]

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

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

[@Sp1ke]

Первый и самый главный — учебник русского языка из школьного курса.

Второе — неуловимые ГОСТы, найти которые в интернете маловероятно. Но эти стандарты обсуждают очень много аспектов.

Третий — этот блог. Чем отличается от «Ководтсва» и прочих Лебедевских высказываниях? А тем, что пишется не одним человеком, и комментируется в большинстве своем профессионалами.

[@preprocessor]

Как чем? Авторитетом конечно. Кто-то будет спорить с этим?

Если бы кто-нибудь составил подборку этих ГОСТов, то это было бы в миллион раз интереснее сотой статьи о что есть «—».

[@octavian]

У Темы все сперли…

[@Tathagata]

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

[@mmoo]

Не, про фотошоп нельзя :)

[@maxshopen]

Согласен со всем кроме 2-x пунктов.

7. Ссылки. Мне кажется более верно было бы уменьшать количество текста, который является ссылкой до минимума, нежели изменение text-decoration на border-bottom. И уж в любом случае это не смертный грех :)

10. Uppercase. Этот пункт вообще к типографике никакого отношения не имеет, это уже скорее семантика

[@Apocalepse]

Это все описано и сказано уже миллион раз. Сколько можно писать топики «n ошибок программиста, дизйнера etc»

[@Lite]

Извините. Хотел написать насчёт «хабр уже не тот, но рано нам сваливать, так как коллайдер везде достанет фрилансера (даже занятого коворкингом).». Рука дрогнула. :)

[@ivanr]

судя по тому как верстаются сайты, то это можно повторить еще миллион раз… много не будет :)

[@eterevsky]

Действительно, есть спорные моменты.

1. Двойной дефис на месте тире — это всё-таки лучше, чем одинарный.

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

4. Длинный пробел в конце предложения в русских текстах никогда и не ставился.

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

[@zencd]

В памяти есть нечёткие воспоминания про различие в поведении «& mdash;» и «Alt+0151» (в пользу мнемоники) — кто что помнит на эту тему?

[@ISpy]

Что-то такое припоминается… По-моему в некоторых кодировках просто не отобразятся нормально (или не сохранятся) все эти дополнительные символы. Ведь ascii-таблица состоит из 256 символов, причем 0-127 это US, а остальное национальная кодировка, поэтому куча всяких левых символов туда просто не влезает. А мнемоники состоят из нормальных ascii-characters и поэтому спокойно преобразуются в нестандартные символы браузером, в редакторах конечно такое не покатит.

Небольшой пиар utf-8: в нем вроде бы никаких проблем с этим нет ;)

[@Apocalepse]

P.S. и раз уж пишем о типографике, то никак не «шрифт» а гарнитура кажется, нет?

[@mezastel]

Есть также использование x вместо × (times). А вообще согдашусь с другими комментаторами – уже сотню раз про это слышал. Есть аналогичные темы поинтересней – когда будет карма, напишу.

[@Sp1ke]

Поднял вам в надежде, что вы исполните обещание.

[@enzo2u]

остается только выложить таблицу всех «нужных» символов…

[@cc00ffee]

Насчет многоточия: а как же лебедевское «тук тук тук»?..

[@loreley]

habrahabr.ru/blogs/typography/36654/#comment_961692

у «тук тук тук» он обозначил область применения — не веб

[@piloter]

По поводу кавычек. Стоило уточнить, что этот перевод касается только английского написания. В русском текстовом наборе приняты «ёлочки» на первом уровне и „лапки“ на втором. Подробнее в ководстве, на хабре и в википедии.

[@thecoder]

Сразу после запятой внутри кавычек Штирлицу стало понятно, что статья переводная. :)

[@piloter]

т.е. английский слов в примерах не было достаточно? :)

[@vintikzzz]

Странно что в статье нет упоминания про использование nbsp; В книге Кирсканова про это было много написано!
Довольно тонкий момент с кавычками… „Надо помнить что в русском языке кавычки открываются снизу, а закрываются сверху” (патриотично выглядит).

[@Sp1ke]

Насколько знаю, что такие кавычки имеют право на существование, но, субъективно, глазу приятнее такие: «».

[@cehkmop]

Мне почему-то казалось, что обычно в печатных изданиях принято использовать «ёлочки», а такие кавычки используются на письме…

[@4eese]

Допустимы оба варианта. И те и те чередуются, когда есть вложенные кавычки. Например:
«Я сказал: „Идите Вы!“».

[@yaroslavpat]

У вас последняя кавычка неверная ;) мнемоническое правило такое: 9966, а у вас 9999. habrahabr.ru/blogs/typography/36654/#comment_962180 тов. 4eese поставил верные.

[@the_toon]

Для маководов, вдруг кому-то пригодится:
— em-dash (alt+0151) — Option + Shift + — — многоточие (alt+0133) — Option +;
— кавычки («») — Option + \, Option + Shift + \
— копирайт — Option + G
— registered — Option + R

Хотя, наверное, маководы это и так знают…

[@the_toon]

Парсер, как-бы, лох — первые две строчки читать вот так:

— em-dash (alt+0151) — Option + Shift + -
— многоточие (alt+0133) — Option +;

[@upir]

Продолжая тему выложу свой набор спец. символов:
alt+0151 —
alt+0150 –
alt+0171 «
alt+0187 »
alt+0132 „
alt+0147 “
alt+0169 ©
alt+0149 •
alt+0183 ·
alt+0167 §
alt+0198 Æ
alt+0174 ®
alt+0153 ™

[@nikola]

ilyabirman.ru/tools/typography-layout/

[@4eese]

У меня ноутбук. Дополнительной цифровой клавиатуры нет, поэтому «Alt+0151» не работает. Как ставить тире?

[@ISpy]

Ммм… На ноутах вроде есть кнопочка Fn, которая активирует цифровую клавиатуру, которая в свою очередь, обычно, недалеко от Enter'a =) Возможно не на всех ноутбуках она есть, не уверен.

[@4eese]

Клавиша Fn есть, а как она работает, чтобы включить цифровую клавиатуру — понять не могу. Буду сам разбиратсья дальше. Спасибо.

[@ISpy]

Нужно ее зажать, и также зажать Alt и набирать на цифровой клавиатуре нужную комбинацию. Правда у меня иногда курсор начинает скакать при этом и вводимый символ оказывается черте где :)

[@upir]

Сам ноутбука не имею, но вроде когда зажимаешь Fn активируются клавиши такого же цвета как и Fn, синии или зеленые, где как. То есть зажимаете альт+фн и набираете цифирки которые заменяют доп. клавиатуру.

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

[@idkfa]

Спасибо за перевод. Про символ многоточия не знал. Можно еще поспорить на счет 7-го пунткта (неправильное подчеркивание гипертекстовых ссылок), благо всё решается лишь заменой стилей.
p.s.
Стандарты кодирования не только для языков программирования существуют :)

[@DarkPhoenix]

Я извиняюсь, но всё это было описано до вас. В незабвенном Ководстве.

[@devnull]

По любезно предоставленным горячим клавишам (alt+0151) я понял, что автор оригинала использует Windows и не осведомлён о существовании других ОС. :)

А приведённые «грехи» – это не самые грубые типичные ошибки начинающего верстальщика. Склоняюсь к мнению, что автор оригинала не так долго занимается версткой. Могу ошибаться.

[@Sharn]

Все гениальное — просто ©

[@cehkmop]

Отдельное спасибо за первые два пункта (и пятый)! А то как Чукча всё время копипейстил эти символы…

[@ngg]

Таблица символов вам в помощь.
В Windows:
пуск → все программы → стандартные → служебные → таблица символов

[@iZENfire]

Кавычки-ёлочки:«так», Alt+0171 и Alt+0187

Кавычки-лапки:„так“, Alt+0132 и Alt+0147

Апостроф: д’артаньян, Alt+0146

Дефис:(<неразрывный _пробел>-), Alt+01

Тире:(<неразрывный _пробел>—), Alt+0151

Короткое тире, настоящий минус:(<неразрывный _пробел>–), Alt+0150

Многоточие:(…), Alt+0133

Параграф:(§), Alt+0167

Копирайт:(©), Alt+0169

Регистермарка:(®), Alt+0174

Торговая марка:(™), Alt+0153

Плюс/минус:(±), Alt+0177

Знак градуса:(°), Alt+0176

Точка:(·), Alt+0183

Жирная точка:(•), Alt+0149

[@yaroslavpat]

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

[@iZENfire]

Да, это так.
Но некоторые текстовые редакторы, если не хватает места в строке, переносят дефис на другую строчку, отрывая его от предшествующего слова. «<неразрывный _пробел>» надо воспринимать именно в этом ключе.

[@yaroslavpat]

Но это не пробел. Тогда уж это просто no break (в случае html — тэг nobr), но никак не пробел, вы же согласны?

[@yaroslavpat]

> Вы можете даже использовать исключительно заглавные буквы

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

[@404]

Насколько я помню, достаточно только знака ©, либо слова Copyright. И то, и другое вместе — тоже сродни ошибке.

[@aleksandrit]

Я особенно раздражаюсь, когда не соблюдаются первые три пункта, а они не соблюдаются практически повсеместно (среди немногочисленных приятных исключений — Хабр и Википедия). Кстати, в Википедии есть полезный JS-инструмент под названием «Викификатор» — кроме исправления разметки, он исправляет и типографику…

[@MASe]

только не бейте меня больно, но раз речь идет и о веб-типографике, то придется влезть с SEO запарами… а именно насчет многоточия…
всем известно, что точка разделяет пассажи слов в тексте… а вот будет ли поисковиками восприниматься символ многоточия как явный разделитель пассажей — вопрос…

по поводу подчеркивания ссылок — с точки зрения типографики может и правильнее, но с точки зрения фундаментальных основ CSS, валидности и проч. — огород еще тот…

[@leshaogonkov]

а почему нет, собственно?

[@Sotis]

Насчёт многоточия — момент спорный. Многие кричат «Даёшь троеточие!» — и кто же прав?

Да и это — далеко не всё из нынешних проблем…

[@Novikov]

И Тема ныне за три точки.

[@beavis_1]

чудесная копия мыслей Лебедева…

[@nicothin]

на данный момент реально встречаю только неправильные кавыски (кстати, в разных языках правильными являются разные варианты), многоточие тремя точками (сам грешен...) и идиотизм с капсом.
что до подчеркивания — вопрос спорный.

[@Sabiko]

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

Абсолютно не поняла, о чём речь в первом пункте. Прерывание мысли с помощью em dash или «дефисоминуса» у нас одинаково не практикуется — только многоточие. Но и в английских книжках я как-то не видела, что оно использовалось с отбивкой пробелом и в середине фразы — или всё же имелось ввиду не прерывание мысли, а обычное тире?

Седьмой пункт семантически уродлив — хотя бы потому, что бордер не «ловит» цвет текста.

[@octavian]

Так сперли все ПОЛНОСТЬЮ у Темы.

Ворюги блин. Копипастеры.

[@yaroslavpat]

Очнитесь, это перевод smashingmagazine им на Тему наплевать, они его и не видели никогда и не слышали о нем.

[@kruzhkova]

спасибо!

[@Novikov]

Пункты 1-5 — фигня полная, с этим справляются роботы. Более того, иногда требуют, чтобы тире были не спецсимволом, а именно двумя дефисами — чтобы потом верстальщики не мудохались с разными видами тире, самовольно вставленными автором. То же и с многоточиями.