Идеальная ширина столбца для веба

Недавно я создал инструмент, который может помочь вам установить идеальную длину  строки текста на веб-странице. Вы можете регулировать несколько таких переменных, как font-family и язык. При перемещении ползунка можно увидеть, какое  количество слов или символов находится в строке. Теперь вы можете выбрать идеальный размер, основываясь на той теории, которая вам больше нравится (10 слов или что-нибудь между 45 и 75 символов). Согласно мнению типографа Роберта Брингхёрста это самый лёгкий способ определить идеальный размер.

В своей книге "Основы стиля типографики" он пишет, что размер или длина строки обычно в 30 раз больше кегля, но строки от минимум 20 до максимум 40 величин кегля вполне вписываются в желаемый диапазон. Поэтому я счастлив, что работаю в вебе. Размер кегля любого элемента всегда равен 1em. Поэтому это правило, описанное Брингхёрстом, можно перевести, как 30em (или что-нибудь между 20 и 40em, хотя я на самом деле думаю, что 40em – это слишком много для многих шрифтов.)

Если вы вынуждены использовать такие «странные» единицы, как pt или px, то вам придётся высчитывать размер. Если ваш размер шрифта равен, например, 14px, то вам нужно 14*30. В принципе, это не очень трудно, но всё равно сложнее, чем 30em независимо от размера шрифта. Если вы вдруг решили изменить размер шрифта на 17px вместо 14, то вам придётся пересчитывать снова. Но поскольку мы используем em, в этом нет необходимости.

Перевод статьи The ideal measure on the web с сайта http://nerd.vasilis.nl/, автор Vasilis van Gemert.

P.S. Это тоже может быть интересно:

4 Комментарии

  1. Дмитрий

    А не лучше ди ориентироваться на макет.

    1. SelenIT

      Это скорее инструмент для создания самого дизайна. Который сейчас становится модно делать прямо в браузере)

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

  2. uggallery

    — выравнивание только по ширине
    — только латиница
    — переносы по слогам (это уже стало стандартом де-факто?)
    — невозможно использовать веб-шрифт
    — соответственно, при выборе Гельветики, на PC показывается Ариал
    — не меняется не только кегль, но и межстрочное, это уж совсем не по Брингхёрсту

    Это не инструмент, это студенческий этюд — поделка. То есть даже не студенческий, а школьный. Я уж не говорю про наивный текст статьи в духе «заставь дурака богу молиться». В Рунете мало мусора, ребята? Зачем всякое тащить?

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

    1. SelenIT

      Спасибо за конструктивную критику. Жаль, что она обрывается на такой не совсем конструктивной ноте(.

      Насчет статьи про элемент <center> — она предполагалась не как практический совет (надеюсь, это достаточно очевидно), а как повод для дискуссии. То, что Реми Шарп написал такое, меня удивило не меньше. С другой стороны, HTML5, с его «pave the cowpaths» и т.п., с самого начала шокировал веб-идеалистов: навсегда узаконил необязательные теги (и даже Quirks mode!), вернул и переосмыслил всякие <b>, <i>, <small> и <hr>, и т.п. И этот процесс ползуче продолжается (не знаю, связано это с магнитным полем или нет:), особенно, как ни странно, в W3C-ветке (от возвращения <cite> для авторов цитаты до де-факто легитимизации табличной верстки при role="presentation"). Резонный вопрос: насколько далеко это может зайти, где точка невозврата? И я не исключаю, что Реми действительно не троллил, а добросовествно взял на себя роль «адвоката дьявола». Тем более, что как минимум одна «фича» многострадального <center> (действие на дочерние блоки) в нынешнем CSS в принципе не реализуется — другой вопрос, нужна ли она (имхо — нужна, но в CSS). Может, еще передумаете?..

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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