В каких единицах актуально верстать?

Question

[Максим Гречушников]

px, em, pt?

Всегда использую px, был опыт с em, но не реализовал надежд.

Сейчас все чаще стали дизайны в pt приходить. Начинаешь верстать и сетка едет, шрифты скачут.

Складывается впечатление, что pt изза разнообразия экранов становится более правильным выбором

Answer 1

[Евгений Петров]

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

Всегда использую px, был опыт с em, но не реализовал надежд.

Каких ещё надежд?
Почему нужно задавать в em, а не px?

Сейчас все чаще стали дизайны в pt приходить.

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

А вот типа веб-дизайнеры смогли. Ну и вот результат — шрифт в вебе, оказывается, в pt. Потрясающе. Это ничего, что pt (inch, pc, cm, mm) используются для печати?

Складывается впечатление, что pt из-за разнообразия экранов становится более правильным выбором.

Глупость. Без комментариев.

Т.е если что-то серьезное, то лучше использовать em.

Почему нужно задавать в em, а не px?

Так-же про % не забывайте.

А есть отличие от em?

Comments

[sim3x]

>Почему нужно задавать в em, а не px?
если б люди еще помнили зачем верстали в ем...

[Евгений Петров]

@sim3x я тоже не понимаю эту напасть — делать то, что нелогично, но зато на слуху.

[Александр Борисович]

@Petroveg "программу ретуширования растровых изображений Photoshop" меня глубого поразили ваши знания по этому продукту. Это немного некомпетентно.

[Александр Борисович]

@Petroveg
"Сейчас все чаще стали дизайны в pt приходить." Ну вообще это единицы измерения это локальные настройки Фотошопа)) Они не могут "приходить". Укажешь в пиках, будут тебе размеры в пиках. И кстати в шопе pt и px не отличаются ни чем.

[Евгений Петров]

@Alexufo и чем же являлась эта программа изначально и чем она является для печати и поныне?
А потом скажите — чем является Fireworks, и зачем появляются программы типа Sketch или Avocode.
Немного некомпетентно считать, что Photoshop — это программа для макетирования сайтов.

[Александр Борисович]

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

[Евгений Петров]

@Alexufo ну наконец-то моя мысль дошла:) Photoshop изначально был разработан для подготовки изображений к печати. И размер шрифтов в нём задаётся исторически в физических единицах. В тех единицах, что для монитора являются чем-то странным.

Я даже не буду обсуждать, почему не отличаются pt и px в Photoshop, или почему вы так считаете. Это не имеет к вебу, к стандартам и реализации в браузерах ни малейшего отношения.

[Евгений Петров]

@Alexufo вы абсолютно не понимаете в единицах измерения, это я понял.

[Евгений Петров]

указание размеров в pt позволит вам вывести на экран картинки в физически точных размерах независимо от плотности экрана. Если вы хотите отобразить печатный дизайн в масштабе 1 в 1 на любом экране - ретина, мобила и пр., то ничего лучше физичеких единиц и не нужно.

@Alexufo сохраню обязательно. Как пример абсолютного непонимания работы с единицами размерности.

[Александр Борисович]

@Petroveg то что появляется сейчас, это уже сейчас. Любая новая программа для сайтов поразумевает новый стандарт веба, в котором все затрахались верстать с psd. Так как всем давай адаптивность, сетку, а ее рисовать уже не имеет смысла и верстать. Новые продукты появиляются, заметьте, ТОЛЬКО появляются как попытка уйти от других программ.
Отчего же это в программе ретруширования есть режим антиалисинга шрифтов под LCD экран это вам не интересно, ровно как почему есть в екторные формы с динамическими уголками.

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

[Александр Борисович]

@Petroveg вам бы не собирать цитаты, а заменить, что под pt я, наверное, имел ввиду in. В фотошопе можете сами проверить, что pt не отличаются от px для текста. Про работу этих единиц в браузерах вы додумали за меня, увы.)

[Евгений Петров]

@Alexufo Fireworks, который Adobe закрыла, был единственной программой для вёрстки макетов в вебе. Досталась эта программа от Macromedia, да толком распорядиться ей не смогли.

Если вы не работали с этой программой, то расскажу — в ней изначально строятся векторыне объекты, и ваш пример с динамическими уголками просто смешон, ибо Fireworks всегда умел это делать и делать намного круче. А закладка Pages роднит её с InDesign, которая создана для вёрстки макетов для печати.

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

С учётом скорой могилы для Flash, полного отсутствия интереса к Dreamwever и самостоятельного закрытия Fireworks делает Adobe банкротом в веб. Компания сделал ставку на говнокодеров, выпустив Adobe Muse. Ну и флаг ей в руки.

[Евгений Петров]

под pt я, наверное, имел ввиду in

@Alexufo простите, кого вы имели ввиду? Я не знаю такой единицы. Если же речь идёт про inch, то какая нафиг разница — 12 пунктов всегда равны 1 дюйму.

Это как сказать, что дескать я говорил, будто сигарета длиной 80 мм, ну вы же понимаете, что на самом деле она 8 см? А то, что вы не имеете понятия про единицы измерения, я уже говорил.

[Александр Борисович]

@Petroveg Как я уже говорил, и вы это прекрасно знаете, раньше сайты были слишком насыщены графикой, которую все равно все делали в шопе. Когда вы называете правильной программой для сайта, вы что имете ввиду? Такую правильную программу Fireworks, которую закрыли из за низкой популярности? Тогда вы называете всех клиентов адоби некомпетентными. Они то и не знали в чем им работать. Ее гениальные уголки просто добавили в шоп, а ее прикрыли.
Я вас должен, простить, раз просите, ведь должны же вы знать, что такой незнайка как я, говорил о дюймах,которые в верстке обозначаются именно через "in". А 80мм сигарета может делиться точно по 8 частей если нужно, вличие от 8 см сигареты, из которой уже куда сложнее без хитрых коэфицентов преведения сделать блок 13in.

[Евгений Петров]

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

Если для вас уголки есть суть крутизны программы для вёрстки, то разочарую — это одна из мелочей. Основа любой программы для вёрстки — это страницы, у каждой из которых есть свои слои, направляющие, слайсы и т.д. Слои можно сделать общими для всех страниц, что невероятно упрощает работу с однотипными вариантами. Это есть в InDesign — программе для печатной вёрстки, это есть в Fireworks — программе для вёрстки веб-приложений.

Кроме этого в Fireworks есть состояния, которые используются для демонстрации действий в рамках одной страницы, а также для лёгкого создания анимированных GIF, в которых надобность всё больше и больше пропадает.

Тот факт, что большинство какбэ дизайнеров дальше Photoshop ничего не видит, только подчёркивает массовый уровень. Так что в компании Adobe сидят нормальные маркетологи — они сделали ставку на говнокодеров, переключившись на Muse. А в принципе, как не могла Adobe сделать ничего толкового для веб самостоятельно, так и не может. Жаль только Macromedia, которая двигалась в верном направлении.

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

[Анна Бакурова]

@Petroveg

1em — текущий размер шрифта. В большинстве не-мобильных браузеров шрифт по умолчанию имеет размер 16px. Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.
1% — процент от другого свойства, какого — зависит от того, размер чего ставим. Например, при установке свойства margin-left:1%, процент берётся от ширины родительского блока, т.е. margin-left будет размером в 1% ширины родителя. Лишь при установке font-size процент берётся от текущего размера шрифта.
Это отличается от em, который привязан к шрифту всегда.

Это к слову о различиях.
По поводу фш, то не вижу в нём проблем, так как дизайнер знающий эту программу может всё что угодно рисовать от сайтов до простых рисунков. ИМХО там есть всё необходимое, не раз в нём сама рисовала и трудностей не было. pt менять в настройках нужно, а то что некоторые дизайнеры ставят текст 11.45px или pt ну сами лохи... Тут не прога виновата, других претензий нет.

[Евгений Петров]

@Libris 1em === 100% для размера шрифта. Именно про него мы и говорим, а к чему эта простыня, и не пойму даже.

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

[Анна Бакурова]

@Petroveg это к тому что Вы спросили "А есть отличие от em?"
Иногда и % нужны а не em, но это редкие случаи, к примеру у body шрифт лучше установить в 100% а не в em, хотя Я вообще px использую, но для простоты дальнейшей адаптивности лучше установить % - так проще. Относительно шрифта разницы у em и px нет, кроме удобства, но вообще разница конечно присутствует.

[Евгений Петров]

@Libris про em и % я спросил применительно конкретно к размеру шрифта. И разницы нет. Совсем. В любых правилах можно заменить font-size с em на проценты и наоборот — это одно и то же.

к примеру у body шрифт лучше установить в 100% а не в em

Уже интересно:) И чем же лучше? Что вы ещё придумаете?

Относительно шрифта разницы у em и px нет, кроме удобства

Что?))

но вообще разница конечно присутствует

Граждане судьи, он не виноват, хотя, конечно, виноват.

[Анна Бакурова]

@Petroveg Вы кусками читаете то что Вам пишут? И осмысливаете тоже кусками?
Я уже написала для простоты дальнейшей адаптивности лучше установить % - так проще.
Про px и em описалась.
Относительно шрифта разницы у em и % нет, кроме удобства, но вообще разница конечно присутствует.

[Анна Бакурова]

@Petroveg мне в вёрстке приятнее видеть 100% для шрифта у разрешения 640, 75% - для 480 и 50% для 320 - согласитесь тут % будут приятнее смотреться - это всё касается адаптации путём изменения только одного значения у body.
Не знаю правда почему Эрик использует именно % в reset...

[Евгений Петров]

@Libris если вся разница в удобстве восприятия — безусловно, что нравится, то и стоит применять в силу равнозначности em и %.
А вот за принудительную установку правил, которых отродясь в элементах не было, и за обнуление всего и вся я бы просто наказывал.

[Анна Бакурова]

@Petroveg а чем плох на Ваш взгляд reset Эрика?

[Евгений Петров]

@Libris я же написал — принудительным обнулением и кучей бессмысленных правил. Он давно устарел, многие правила там уже никто объяснить не может, но применяет.
Вот, к примеру, зачем нужен body: font-size: 100%? Сможете объяснить?

[Александр Борисович]

был уверен, что мобильные девайсы через апи успешно получают значение ppi c экранов. Фиг. Тупо 1in = 96px. На десктопных мониторах физические размеры совпадают, для мобильных через css просто так в физические елиницы не попасть. Тут я поспешил с советом. Признаю.

[Анна Бакурова]

@Petroveg для правильного масштабирования текста в некоторых браузерах, разве нет? em кстати выдаёт чуть другие значения при масштабировании шрифта в ie - но это Я смотрела когда весь шрифт в em и только body в %

[Евгений Петров]

@Libris да вы просто проверьте. А потом скажете — где это правило хоть на йоту что-то изменило.

[Александр Борисович]

@Petroveg сложно винить фотошоп за говномакеты, сомневаюсь я, что fireworks что-то изменил бы в истории...

Answer 2

[Alexander Mischuk]

Font Size Idea: px at the Root, rem for Components...

Answer 3

[Евгений Низамиев]

Лично я юзаю только em и px.
px там, где нужно сверстать быстро и просто.
em там, где нужно сверстать красиво, и чтоб потом код можно было редактировать проще.

Т.е если что-то серьезное, то лучше использовать em. Так-же про % не забывайте.

Comments

[Максим Гречушников]

% вообще не использую напрямую. юзаю scss + css фреймворки. у них там гриды в процентах.
А вот как ваши шрифты в пикселях смотрятся на девайсах iphone 6 и обычный монитор с 72 dpi

[Евгений Петров]

@maxyc_webber монитор с 72dpi??? Можно ссылочку на такое чудо? И почему ppi вдруг стали dpi?

[Максим Гречушников]

ой я сглупил. пардоньте сударь

[Максим Гречушников]

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