Пользователь
0,0
рейтинг
7 апреля 2009 в 14:54

Разработка → 8 простых способов улучшить типографику в вашем дизайне перевод

Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.

1. Размеры



Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

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

Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:
p {
font-size: 10px;
max-width: 300px;
}

Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

2. Интерлиньяж



Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

Правильный интерлиньяж

Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}


3. Обработка кавычек



Обработка кавычек должна проводиться на полях текста. Если кавычки сливаются с текстом, то они разрывают левое поле и нарушают рифму блока текста. Обработка кавычек не нарушает выравнивания по левому краю и баланса и поэтому – улучшает читабельность.

Кавычки надо обрабатывать на полях

Это легко достигается с помощью CSS, используя элемент blockquote:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}


Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм



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

Вертикальный ритм, использование сетки

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}

p {
margin-bottom: 15px;
}


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

5. Верхние и нижние висячие строки



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

Вдовы и сироты

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение



Важно выделять слова не отвлекая читателя. Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.

Выделение не должно 'разрывать' текст

Вот несколько способов выделения с помощью CSS:
span {
font-style: italic;
}

h1 {
font-weight: bold;
}

h2 {
text-transform: uppercase;
}

b {
font-variant: small-caps;
}

Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб



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

Типографический масштаб

Пример типографического масштаба определенного в CSS:
h1 {
font-size: 48px;
}

h2 {
font-size: 36px;
}

h3 {
font-size: 24px;
}

h4 {
font-size: 21px;
}

h5 {
font-size: 18px;
}

h6 {
font-size: 16px;
}

p {
font-size: 14px;
}


8. Подчищаем рваные края



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

Мягкий и рваный край текста

Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы.

Что то страшное

Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.

Ресурсы для дальнейшего изучения



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


Об авторе



Антонио Карусон (Antonio Carusone) это графический дизайнер из Нью-Йорка и автор AisleOne, блога посвященного графическому дизайну и типографике, The Grid System, неуклонно расширяющегося ресурса о сеточной системе и части Thinking for a Living Network.

О переводчике


Перевод выполнил я Ворон или Silent Imp.
Я вольнонаемный верстальщик, программист.
И очень надеюсь, что кому то эта статья доставит удовольствие или даже принесет пользу.
Буду очень рад вашим отзывам.
Перевод: Antonio Carusone
Антон @SilentImp
карма
134,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (110)

  • +15
    спасибо, действительно полезный матриал.
    • +3
      Да, хороший, но 5й пункт несколько раз перечитал чтобы понять… так и не понял что за «окна» и «абзацевые строки», пока не понял что имеются ввиду — «висячие строки». У нас в России, вроде, они так называются и никак иначе.
      • 0
        Да они вроде и «у них» так же как то называются. Типа "hanging punctuation" или «hanging quotes».
        • +1
          Нет, про «висячую пунктацию» написано в третьем пункте, а здес другое.
          • +2
            • +1
              Ага, правда автор все равно ошибся. Перевел «widow» как «окно». А по вашей ссылке в википедии как раз об этом рассказывается.
              • 0
                Вот и я подумал что с переводом что-то не то)
                • 0
                  Тогда просим автора подправить статью, которая, кстати, хорошая)
            • 0
              Спасибо вам! Большое при большое.
              Поправил.
              Я сам долго пытался понять, что за «окна».
              Так как не специалист в области типографики и сам только учусь, а статья переводилась с 2 часов ночи до 6 утра, то ошибки действительно встречаются.
          • 0
            А, точно, ошибся.
            • 0
              Ага, бывает)
  • +2
    Кратко и по сути, вот так мне нравится!
  • +1
    типографиКа
    Типография — это место где печатают книги.
    • 0
      Сейчас исправлю. Спасибо большое.
  • +2
    4. Вертикальный ритм


    В примере «хорошо» заголовок получился ближе к предыдущему абзацу, чем к следующему (или равноудаленным от обоих). Так что, по-моему, это, скорее, даже «плохо», чем «хорошо». Теория близости.
    • 0
      Даже с учетом теории близости можно располагать заголовок на сетке.
      Я согласен, теория близости — полезна и верна.
      Но в данном случае иллюстрировали именно использование сетки.
      Должно быть автор просто не хотел отвлекать внимание на что то еще.
      • 0
        По-моему, странно жертвовать одним важным правилом, чтобы продемонстрировать другое (причем, какое из них важнее — вопрос спорный). Ведь многие люди повторят даже не задумываясь, и при этом будут уверены, что поступают «хорошо». :)
        Но вообще статья полезная, спасибо.
        • 0
          Я думаю, что человек может получать из статьи знания но необходимость думать что, как и где использовать это никак не отменяет.
          Мне кажется что иллюстрация должна быть простой и понятной.
          Если в нее добавлять посторонние элементы, то возникнут вопросы — «Ой, а почему здесь так?».
          Вопросы, на которые статья не даст ответа, так как рассматривает совершенно другие моменты.
          Вывод: в любом случае найдется масса людей, которые все поймут не верно.

          Я очень рад, что перевод понравился.
  • +2
    Пиксели, пиксели, пиксели… Всегда думал, что указание в пикселях размера шрифта, равно как и ширины текстового блока зло, ибо ломается масштабирование в ИЕ (может ещё где). Или я не прав?
    • 0
      Есть проблемы с переводом в емы?
      Родительский размер шрифта × кол-во пикселей = емы
      • +2
        Да я о том, что тут кругом пиксели, поинты и прочие фиксированные единицы, что создаёт свои проблема. Например:
        Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры.
        А не проще написать: 1.2em. А то «на 2-5pt больше» это как-то из серии «добавьте там чуть-чуть».

        И потом пиксели в емы просто так не конвертируются, если пытаешься сделать по-настоящему гибкий дизайн, легко и правильно масштабируемый пользователем.
        • 0
          Абсолютно согласен. В данной статье я сам ожидал увидеть em.
          Конечно дизайн приходится привязывать к px в случае наличия растровой графики, но я не вижу ни единой причины, почему они фигурируют тут. «Простота вычислений» — бред, помоему.
        • –1
          То что я тоже хотел написать.
    • 0
      Если бы только пиксели.
      Пассаж про «висячие» строки применительно к вебу или рекомендации с использованием js-переносов вообще диковато смотрятся.
  • –1
    Спасибо, очень ценный материал. Забрал в мемориз.
  • +3
    Первый из описанных способов имеет важный недостаток: описанные в нём цифры, равно как и метод Роберта Бринхёрста (Robert Bringhurst), годятся только для англоязычного текста, в котором узкие буквы (i, f, j, l) нередки.

    В русском алфавите настолько узких букв нету. Более того: в русском алфавите есть широкие буквы (ш, щ, ы, ж, ю). Соотношение поэтому должно быть другим, и ширина колонки текста должна стать другою.
    • 0
      А какая ситуация с русскоязычным текстом?
      У нас есть «идеальная длинна строки»?
      Возможно кто то встречал материалы на эту тему. Если такие люди есть — поделитесь, пожалуйста.
      • 0
        В отношении русскоязычных текстов, в том числе по результатам исследований, «идеалом» является в среднем 65 символов на строку. Посчитать в том числе в em — это можно, и сформировать для конечного пользователя удобоваримый текстовый блок по средствам js не большая проблема.
      • +1
        По-моему в книге у Брингхерста это тоже есть. Он там упоминает, что в русском языке и слова длиннее и буквы шире. Я точно об этом где-то видел, а поскольку сейчас читаю именно «Основы стиля в типографике», то скорее всего я это там увидел.
        • +1
          Непонятно почему минусуют вас, вы совершенно правы в русском издании Брингхерста (издатель Дмитрий Аронов, 2006) очень хорошие комментарии переводчика/редактора, там все различия — все по полочкам расписано, вероятно вы их и читали.
          • 0
            А ну точно, потому что там редакция и примечания Владимира Ефимова.
          • 0
            Ой, заминусовали. :) Ну и ладно, наверняка просто у кого-то день не сложился. :)
  • 0
    полезная статья) спасибо)

  • –1
    Эта статья — самое полезное для меня на Хабре за 3 месяца.

    Кто-то пробовал распечатывать материалы с Хабра? Размер шрифта просто гигантский. Одна статья занимает пол пачки листов.
  • +1
    не «о авторе», а «об авторе». и еще — человек не может быть «это».
    мелочи, а именно из этого и складывается отношение к тексту, какой-бы там типографика ни была.
    • 0
      Спасибо вам за замечание. Поправил.
      • +1
        не «об переводчике», а «о переводчике»)
        • +2
          Мне стыдно.
          • +1
            Да ничего)
  • +1
    Всё бы хорошо, но многие советы — про вёрстку неизменяемого текста, причём сферического и в вакууме. Как вы будете следить за окнами, дырками и висячими строками, если текст приходит из базы и обновляется по сто раз на дню? Да никак. особенно если вспомнить, что у юзера и шрифты могут быть разными…
    • 0
      Мне кажеться, проблема немного надумана. Ничего не мешает вам задать интерлиньяж, длину строк, расстояния между блоками в css для различного текста. Плюс есть автоматические типографы для всяких кавычек, дефисов/тире, мягких переносов и т.п. А текстом из WYSIWYG тоже можно управлять (смотрите, например, HTMLPurifier).
      • +1
        Кажется вместо кажеться.
    • 0
      Js + математика вам в помощь. Не вижу проблем для формирования правил для текстов по средствам данного тандема.
      • 0
        Дырки в наборе — это только ручными правками лечится…
        • 0
          под дырками подразумевающийся образовывавшиеся пространствам при «джастифай» выравнивании? Если, да то в статье он не приводиться как пример.
  • +1
    Замечательная статья, большое спасибо!

    PS В заголовках точки в конце не ставятся… извините :)
    • +1
      Поправил. Спасибо вам.
      • 0
        Вот и за что я получил все эти минусы в комментариях?
  • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Пожалуйста (счасливый).
  • –2
    автор сам-то читал, то что перевёл?
    2/2
    • 0
      Автор читал статейку и переводил ее для окружающих.
      Если я где то ошибся при переводе &mdash то, пожалуйста, укажите на ошибку.
      Я охотно ее исправлю.
    • 0
      И, да, я читал результат перевода.
  • –1
    Читал тоже самое сначала в оригинале, а потом увидел ваш перевод.

    Ну ничо, все равно спасибо ;-)
  • 0
    Отдельное спасибо за пункты 1, 3 и 4. Особенно четвертый пункт, возьму на вооружение :)
  • 0
    молодцом :) взял главную с первого поста?
    • +1
      Рад тебя видеть.
  • 0
    Спасибо автору :)
    Жаль что некоторые замечания реализуются только руками

    + line-height: можно задать в процентном соотношении
  • +1
    «… длина строки...», поправьте ошибку.
    • +1
      Поправил. Спасибо!
  • 0
    спасибо за перевод. статью читал на днях, понравилась очень
  • –2
    примного блогодарен, лучшая статья на хабре про типографику.
  • +2
    Перевод местами очень неуклюжий. Вот в 8 пункте просто режет глаз:

    rag — рваный край, а не хвост и не грань
    uneven — неровный, а не нечетный

    Ну и еще подобные места есть. Тщательнее надо переводить.
    • +1
      Спасибо. Буду стараться.
  • 0
    спасибо за перевод. очень полезная статья.
    однако некоторые правила невозможно применить, по причинам:
    1. никого кроме дизайнеров не интересует качество типографики.
    2. идеальное решение не может быть достижимо в вэбе, так как 80% контента динамично, т.е. можно контролировать только размер шрифта и интерлиньяж.
    • +1
      Вы не совсем правы.
      1. Я, например, — верстальщик. И мне не все равно.
      Если вы имеете в виду заказчиков — нужно понимать что они могут в этом совершенно ничего не понимать. А значит ответственность за типографику проекта лежит на дизайнерах, верстальщиках, копирайтерах и редакторах проектра.
      2. Да. Верстальщика, работающего в вебе трудно назвать гордым «метранпаж». Да, мы ограничены в инструментах. Но все же стоит старатся и делать как можно лучше. Даже с оговоркой «для веба».
      Все описанные в статье приемы так или иначе можно контролировать в веб. И, даже если контент у сайта быстро пополняется и динамически формируется, редактор может подправить этот контент так, что бы он обладал наилучшей читабельностью.
      • 0
        1. именно заказчиков, а также пользователей.
        практически все проекты делаются не дизайнерами, а дизайнерами совместно с заказчиком. (у меня 10 лет стаж и клиенты от «америкосов» до местных «операторов мобильной связи»).
        2. я знаю что можно контролировать. но редакторы на это кладут, так как для них важно что бы новость была вовремя опубликована.

        ясно, что мои комментарии касаются реальных обычных условий работы, а не некоторых разработчиков, которые могут себе позволить…

        энивэй — я только За Идеальные решения.
        • +1
          Надо не на редакторов пенять, а на программистов, которые суют им стыренный TinyMCE с 40 кнопками (работа на уровне школьника 8 класса). И на дизайнеров, которые не прорабатывают все стили для текста (h1-h6, ol, ul, blockquote, em, strong, address… что там еще).

          Давайте редактору возможность использовать только разрешенные стили офомления и цвета. Не можете заставить его ставить длинное тире — прикрутите типограф.

          Другой вопрос, захочет ли заказчик платить за эту малозаметную работу.
          • +1
            0. Дизайнер должен знать, как использовать свой инструмент. В данном случае — WYSIWYG. И тем более он должен разбиратся в типографике гораздо больше, чем программист, который, как правило, весьма смутно представляет какие именно возможности нужны хорошему редактору. Впрочем это просто перекладывание ответственности с одного на другого. Все они должны быть компетентны и надо ругать менеджера, за то, что не узнал что нужно редактору и не объяснил этого программисту.
            1. А какой WYSIWYG вы рекоммендуете? Или дело именно в настройке и отсекании лишних функциональных возможностей?
            2. Поясните, пожалуйста, что такое типограф, который вы советуете прикрутить.
            3. Если включать это в стоимость услуг по верстке/пополнению материалов — у него просто не останется выбора. Правда он может обратится к другому специалисту… Но насколько нам нужны заказчики, которые не хотят платить за качественный, всесторонне проработанный продукт?
            • 0
              Дизайнер? Извините, редактор.
            • +1
              Дизайнер должен (если конечно от него это требуется) задать оформление для различных элеемнтов, которые могут встретиться в тексте: списки, картинки, таблицы, цитаты, ссылки и т.д. указать набор цветов и стилей для выделения текста. А программист должен все это воплотить в редакторе, так что контент-менеджер не сможет вылезти за рамки гайдлайнов.

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

              По поводу типографа  — можно скриптом проверять и расставлять тире, неразрывные пробелы и прочее. Хооршо бы также внедрить проверку орфографии и пунгктуации (но это очень сложно и дорого). Можно убивать попытки выравнивания текста пробелами, или перевордами строки. Мног оможно сделать.

              И делать этодолжен программист.

              Объяснить каждому контент-менелджеру, что оформление стоит отделять от содержания, вряд ли получится.

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

              А всунуть TinyMCE — дело 10 минут, но и результат будет соответствующий (некачественный сайт).
              • 0
                Да, настроить редактор нужно. Но надо помнить, что оформление текста так же зависит от места в разметке, в котором текст находится. В редактор встроить такое разделение затруднительно. Возможно, конечно, все. Но как минимум такое разделение придется менять от проекта к проекту.

                Возможно стоит использовать редактор типа WYMeditor. Это решает проблему, отчасти. Но мне сам редактор не понравился, а аналога не нашел.
                • 0
                  Зато идея хорошая. А аналоги и не надо искать, надо писать самому. Я бы кстати заодно выкинул из редактора Jquery, там она совсем не нужна.
                  • 0
                    Лучше вместо того, что бы отказаться от jQuery, добавить graceful degradation.
                    А писать самому… Да. Вы правы. Главное что бы жизни хватило все написать, что хотелось и хотя бы приблизительно так, как хотелось.
                    • 0
                      Там есть degradation, в отсутсвие яваскрипта остается просто textarea, и можно ручками править HTML.

                      Правда не проверяется поддержка iframes.
          • 0
            в том-то и дело. получается, что вопрос качественной работы — менеджмент.
            обычно, я, как дизайнер должен был отстаивать законы типографики. а менеджеры сидели тихонечко.
            вобщем-то и за код отвечали сами производители, но ни как не выпускающий брэнд.
  • +1
    Читал в оригинале, и как-то мне очень сомнительно на счёт идеальности 65 символов в одну колонку — может во всём виноваты мои привычки, но читать сплошной ткст узкой полосой мне не удобно.
    • 0
      Узкой полосой — никому не удобно.
      Но 65 символов — не такая уж и узкая полоса.
      Только что взял первую попавшуюся под руку книгу: ~40 символов печатного текста с учетом пробелов.
      А, как мне кажется, на книги стоит в данном случае ориентироваться.
      • 0
        я тоже посмотрел: 40 — только в детской литературе; ~65 — в «покетах» (карманный формат).
  • 0
    Зело пользительный матерьялец и ссылки.
    Огромное спасибо.
  • 0
    Спасибо, интересная статья. Много нового для себя узнал.
  • +1
    > Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

    Позор такому верстальщтку, надо писать 30em а не 300px, так как сами же ширину текста задаете в символах. Вы пробовали в сафари, ИЕ6 или Хроме увеличить шрифт? Убого слепленные сайты сразу же ползут и разъезжаются. Ничего сложного в использовании em нет.

    p.s. А про вертикальный ритм — это правда, и всюду так стоит делать или выдумки? Кто знает, ответьте пожалуйста.

    p.p.s Не советую использовть какие-то сомнительные, тяжелые плагины для выравниванимя текста, замедляющие работу сайта, в общем случае лучше пройтись по тексту вручную или скриптом-типографом.
  • 0
    “Widows” и “orphans” так дословно и переводятся, как «вдовы» и «сироты» — это термины из английской типографики, у нас приятно оба вида называть просто, как «висячие строки».

    Непонятно, зачем в заголовках использовать какой-то юродивый шрифт, когда можно было бы использовать стандартную “Georgia”.
  • –1
    Я думаю двойку за font-size: 12px; ставить можно. А em зачем?

    Может люди плохо видят;
    • 0
      Уже упоминал — сам был удивлен px. Но статья все таки не про доступность. Да и, трезво смотря на вещи, нужно понимать, что какие то проблемы это может вызвать только у пользователя ie6. Браузера, который хотя и медленно, но все же неотвратимо покидает сценцу. Причем, под крики «Побыстрей бы уже!».
      Хотя, конечно, не все со мной согласны: http://www.saveie6.com/
  • 0
    По выравниванию строк в тексте не сильно понятна позиция по игнорированию атрибута джастифи у тэга текст-элайн. При такой ширине столбца % корявости минимален, а выигрыш — очевиден. Лично мне не очень нравятся «тупо переводы» без мысли переводчика, это, как-то, не сильно правильно и в итоге интересно.
    • 0
      Мысли переводчика имеют ценность только тогда, когда он профессионален в тематике статьи. Я пока только изучаю вопросы связанные с типографикой и не хочу зря болтать языком.
  • 0
    А по какой лицензии распространяется статья? Можно ее в CMS документацию вложить(со ссылкой на источник разумеется)?
    • 0
      А что такое «CMS документация»?
      • +1
        Извиняюсь за загадочное предложение, я имел в виду документацию по CMS.

        Наша компания сейчас разрабатывать «Еще одну дурацкую open source CMS». После того как доделаем первую Бета версию хочется сделать нормальную документацию для пользователей.

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

        В вашей статье много полезной информации на эту тему, отсюда и вопрос: можно добавить ее в документацию со ссылкой на сайт Вашей студии, страничку на Хабре или на любой другой сайт по Вашему усмотрению?
        • 0
          Я обожаю «дурацкие open source CMS». И я буду очень рад, если вы используете в документации мой перевод. Ссылка на мой сайт — в разделе «о переводчике». На сайт автора — в разделе «об авторе». Если вы дадите ссылки на хабр и на оригинал статьи — будет совсем здорово. Но, на деле — поступайте так, как сочтете правильным. Я сделал перевод, что бы он принес пользу. И рад, что он может это сделать.
        • 0
          А что за CMS, если не секрет?
          • 0
            «Еще одну дурацкая open source CMS» :)
          • 0
            Ничего эпохального:
            1. Модульность.
            2. Многоязычность любого контента(просто страницы, новости, каталог, интернет магазин и т.д.)
            3. Очень хочется сделать нормальную документацию (как для пользователей так и для разработчиков), но не знаю получится ли опыта в написании маловато, да и способности четко излагать мысли у меня не очень. В крайнем случае попробуем найти на фрилансе человека который переведет с моего языка на нормальный.

            P.S. Быстро я на вопросы отвечаю (:

            • 0
              Ага. И подробно.
  • 0
    Спасибо, очень полезно и своевременно!
  • 0
    Спасибо) Очень полезная статья. В избранное однозначно!
  • 0
    Кстати, на сайте по линку «Ворон или Silent Imp.» интерлиньяж очень сомнительный.
  • +1
    Приветствую. К сожалению в статье пропали все картинки, а без них она становится менее читабельной.
    • +1
      Строго говоря вообще не читабельной.
      Извините. Это я на своем аккаунте без задней мысли протестировал работу класса по работе с API Яндекс.Фотки.
      Сегодня или завтра (как только немножко освобожусь) верну картинки.
      Прошу прощения за это недоразумение и большое спасибо вам за то, что написали.
    • +1
      Вставил оригинальные картинки. Это приемлемо?
      • 0
        Да, большое спасибо. Теперь понятно про что речь!
  • 0
    Картинок все еще нет, или опять нет?
    • 0
      Оу. Пропали.
      Освобожусь сейчас немного и починю
      • 0
        Не починили )

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