x
 
↑
15 •
Май
3 •
8 •

6 •

11 •
↓
Виталий Ким
28 мая 2007

Артем, добрый день.

Сейчас мы осваиваем Индизайн как среду макетирования сайтов. Не могу разобраться с кеглями. Как кодер должен понять, какой кегль он должен выставить, смотря на макет?

Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто.

Вы совершенно правы, 12 пунктов — это 12 пикселей. В адобовских продуктах используется виртуальное разрешение 72 точки (пикселя) на дюйм. А в дюйме как раз 72 пункта. Опять же, округленных адобовских пункта.

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

 См. также
А. Лебедев. Жизнь и необычайные приключения типографского пункта

Поделиться
Отправить

Комментарии

28 мая 2007

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

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

и  указаны размеры 80 %, то внутри

уже будет иметь кегель размером в 64 %. В сложных документах это иногда приводит к путанице и невозможности точно сделать два размера одинаковыми; приходится намного внимательнее писать CSS.

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

Было бы интересно услышать от других советчиков какие-нибудь интересные соображения (или хотя бы ссылки) по поводу использования ИнДизайна для веба вообще. Несколько раз слышал о том, что он предпочтительнее Фотошопа, но самостоятельно разобраться с тем, как бы его приручить, не смог.
Юра Ткаченко
28 мая 2007

Тоха Герасименко писал в ЖЖ (http://gerasimenko.livejournal.com/….html (http://gerasimenko.livejournal.com/31163.html) ), что рисовал макет сайта http://www.rrost.com/ и http://www.sozdaikino.ru/ в индизайне.

28 мая 2007

Пара интересных ссылок от анонимного читателя.

http://riddle.pl/emcalc/
Перевод пикселей в em.

http://www.alistapart.com/…/elastic (http://www.alistapart.com/articles/elastic/)
Статья о резиновом дизайне.
Роман Добровенский
31 мая 2007

px — это пиксель. Чтобы изменить размер пикселя нужно сменить разрешение экрана. Если Опера при нажатии на кнопку «+» масштабирует величины, заданные как px, то это поведение, логически не правильное.

pt — это пункт. Он имеет вполне конкретное значение при типографской печати и измеряется в метрических единицах. На каждом мониторе он будет отражаться по-разному в зависимости от диагонали. Опять же изменять значение pt при нажатии на «+» — не правильно логически. pt — это неудачная попытка подогнать типографские стандарты под Веб.

Я промолчу о процентах, так как никогда ими не пользовался по причине того, что не видел смысла.

А вот em — это размер шрифта, относительно текущего. Это не фиксированная единица измерения, она зависит в том числе от настроек браузера. Если пользователь предпочитает не стандартный шрифт, а крупнее, и это отражено в настройках, то em будет отталкиваться именно от этих настроек, а px будет выдавать по-прежнему маленькие неудобные буковки.

Классическое применение px — это задание размеров шрифта, который несет не только смысловую, но и оформительную нагрузку. Например, пункты меню или слоган в шапке сайта, где произвольное изменение шрифта недопустимо, должны использовать px.

Проблемы с вложенностью тегов, на которые указал Илья Бирман, на мой взгляд, несколько надуманы. Вообще большое число размеров шрифтов на одной странице — это признак того, что со страницей что-то не в порядке. Но даже если и есть такая потребность, унифицированное действие каждого тега — разумное и логичное поведение. Например, хорошо задать тегу small указание на уменьшение шрифта, скажем, на 20% в независимости от его местоположения. Если действие тега small зависит от его положения на странице — то это уже вносит путаницу и слово «хорошо» к такой верстке становится не применимо. В крайнем случае можно указывать классы и задавать поведение small для разных классов (класс задавать для базового элемента, а не для small) — это будет тоже вполне логично.
Ренан Асадов
31 мая 2007

Пользователям мака: виджет Designers Toolbox.
Универсальный конвертер, также переводящий пиксели в em.

http://www.apple.com/…/designerstoolbox.html (http://www.apple.com/downloads/dashboard/calculate_convert/designerstoolbox.html)

3 июня 2007

Я несколько смущён приведёнными тут конвертерами пикселей в эмы. Это величины по определению не могут быть преобразованы одна в другую. Они не находятся в каком-либо наперёд заданном соотношении друг с другом; у них разный физический смысл. Два эма в одном случае — это 2 пикселя, а в другом — это весь экран.

Если человеку пришло в голову преобразовать пиксели в эмы или наоборот, то это может быть только по одной причине: он не понимает, что такое эм. Здесь Роман Добровенский всё чётко расписал, повторяться я не буду.

Что касается «нелогичности» поведения Оперы при масштабировании, то я, как пользователь и поклонник Оперы хотел бы вступиться за неё :-) Как писал Якоб Нильсен, «After all, it's my screen, my computer, and my software, and they should do what I say». Какое дело пользователю до того, что и в каких единицах указал разработчик в CSS’е? Пользователь вообще не отличает пиксели от пунктов, а проценты от эмов. Он понимает только то, что шрифт надо сделать «побольше», когда он мелкий. И это должно работать.

Якоб Нильсен, Алертбокс, Let Users Control Font Size
http://www.useit.com/alertbox/20020819.html

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

Но кстати, именно благодаря тому, что Опера пропорционально масштабирует вообще весь контент, а не только шрифты, взаимное расположение всего относительно всего сохраняется при изменении масштаба. Можно просто считать, что пиксели Оперы — это не пиксели экрана, а виртуальные пиксели, которые могут быть равны экранным при масштабе 100%, а могут быть и не равны при другом.

4 июня 2007

Уважаемые советчики, прошу заметить, что использовать букву ё разрешено только Бирману. Это для того, чтобы он чувствовал себя маргиналом.

Cсылаться на Якоба Нильсена разрешено тоже только Бирману.
Дмитрий Зимин
25 ноября 2007

>> Это величины по определению не могут быть преобразованы одна в другую.

Могут, если есть «точка отсчета». Скажем, 16px=1em, тогда 0.5em=8px.
Просто во многих браузерах по умолчанию настроено 16px, отсюда и считают.

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
1 • Куда поставить ссылку: на поля или в текст? 2 •