Комментарии 128
А разве «сегодня» font-size чем-то принципиально отличается от «раньше»?
НЛО прилетело и опубликовало эту надпись здесь
Поддержкой актуальными браузерами зума?
Мое мнение — в не мобильных приложениях при нормальной верстке зумом браузера пользуются единицы.
Ещё те, кто любит почитать с большого экрана на диване. Как Я :)
есть у меня ноутбук Dell с экраном 15" FullHD — без зума аж никак.
А вот это от верстальщика зависит. Если криворукий попался, то читать нифига неудобно (глаза ужас как устают от корявой верстки) и приходиться увеличивать.
P.S. экран 17', разрешение 1280x1024.
P.S. экран 17', разрешение 1280x1024.
Это очень зависит от остальной верстки. Если дизайнер нарисовал блок попиксельно и очень дорожит этим, ничего не остается, кроме как задать размер шрифта в px.
Обычно я задаю базовый размер (body font-size) в pt, производные в процентах и/или pt, line-height и отступы для вертикального ритма в em.
По факту можно хоть в попугаях считать, главное делать это правильно и консистентно.
Обычно я задаю базовый размер (body font-size) в pt, производные в процентах и/или pt, line-height и отступы для вертикального ритма в em.
По факту можно хоть в попугаях считать, главное делать это правильно и консистентно.
>По факту можно хоть в попугаях считать, главное делать это правильно
Правильно относительно пользовательских настроек считать. Но вот на картинках это не лучшим образом сказывается :(
Правильно относительно пользовательских настроек считать. Но вот на картинках это не лучшим образом сказывается :(
line-height нужно задавать в безразмерных единицах, иначе его приходится дублировать во всех элементах, в которых меняется размер шрифта.
Не обязательно. Если не задавать line-height у элемента вовсе, наследуется вычисленное значение (как ни странно).
Да. Как я и писал выше, #em h1 унаследовал вычисленное значение (1.2em относительно базового размера шрифта) у контейнера. Спасибо, что подтвердили примером мой комментарий, мне было лень.
Да, уточню на всякий случай (возможно, это не бросается в глаза) — в вашем примере #dimensionless h1 попадает в вертикальный ритм только при условии, что размер шрифта заголовка делится на базовый размер шрифта.
Что-то мне подсказывает, что этот ваш «вертикальный ритм» не имеет ничего общего с реальным миром. Вы же высоту картинок не задаете в em? А без этого они ломают «вертикальный ритм».
Мы живем в каких-то разных мирах. В том реальном мире, из которого я пишу это сообщение, понятие вертикального ритма в типографике появилось задолго до компьютерных сетей, а проблема с выставлением высоты изображения, кратной высоте строки, решается довольно просто.
Как же?
С интересом выслушаю ваш ответ :) Желательно со скриншотами не только из вашего любимого браузера, но и с разных систем и парочки устройств.
Вот в моём мире вертикальный ритм — это самая большая проблема. Любые CSS-фреймворки, пытающиеся это реализовать, неизбежно проигрывают.
Вот в моём мире вертикальный ритм — это самая большая проблема. Любые CSS-фреймворки, пытающиеся это реализовать, неизбежно проигрывают.
Проблема — безусловно, никто и не спорит. Но homm-овское «не имеет ничего общего с реальным миром» — очевидное трололо, поскольку вполне себе применяется же. Ну да не я тебе (вам) это должен рассказывать :3
Существуют частные решения, самый тупой вариант — это line-height в px и считать (на сервере, например) высоту строки или margin изображению. Или можно масштабировать изображения в CSS в удобной метрике (так иногда делают в т.ч. в @media-правилах для мелких экранов, видел пару раз). Или сделать обтекание текстом, например, если формат подразумевает. Нужно смотреть.
В случае же с line-height в безразмерных единицах — я не уверен, что решение в принципе существует (костыли на js, но это не решение, это именно костыли).
P.S. а блог кто будет вести? На RSS-фиде уже мох растет, с северной стороны :3
Существуют частные решения, самый тупой вариант — это line-height в px и считать (на сервере, например) высоту строки или margin изображению. Или можно масштабировать изображения в CSS в удобной метрике (так иногда делают в т.ч. в @media-правилах для мелких экранов, видел пару раз). Или сделать обтекание текстом, например, если формат подразумевает. Нужно смотреть.
В случае же с line-height в безразмерных единицах — я не уверен, что решение в принципе существует (костыли на js, но это не решение, это именно костыли).
P.S. а блог кто будет вести? На RSS-фиде уже мох растет, с северной стороны :3
В общем случае это справедливо, однако в небольших элементах (где дочерних нету или мало) — например, в кнопках с двустрочным текстом — можно line-height указывать и в пикселах, так человеку (верстальщику) проще сопоставлять размеры line-height и font-size, не вычисляя в уму пропорцию.
line-height и отступы для вертикального ритма в em
А почему не в ex?
Я думаю что всё зависит от проекта и дизайна.
Сам использую px.
Сам использую px.
В small, medium, xx-large и т. п.
em, при условии body { font-size: Npx }
Сорри за оффтопик, но вот это опрос так опрос — ничего лишнего, без полоумного юмора.
Я хоть свойство font-size никак не задаю, но плюсиком поддержал — может быть результаты опроса кому-нибудь пригодятся.
Я хоть свойство font-size никак не задаю, но плюсиком поддержал — может быть результаты опроса кому-нибудь пригодятся.
Мда, 21 век, более половины верстальщиков используют пиксели в задании размера шрифтов! Руки бы поотрывать. Удивительные результаты.
P.S. Сам вообще не трогаю базовый размер шрифта, заданный в браузере пользователя, только от него пляшу уже в em`ах.
P.S. Сам вообще не трогаю базовый размер шрифта, заданный в браузере пользователя, только от него пляшу уже в em`ах.
кому в 21 веке требуется уродский костыль в виде настройки базового размера шрифта, если есть нормальный zoom всего?
От зума уродуются растровые картинки. И зум работает не всегда — на некоторых сайтах размер букв увеличивается зумом браузера, но ширина колонок не меняется, в итоге получаем три слова в колонку.
В 21-м веке пора бы уже отказаться от задания размера шрифта в пикселях — пиксели у всех разные. И пока сидишь за обычным монитором в обычной винде, этого не замечаешь, но стоит пересесть за монитор с более высоким физическим разрешением, да ещё в другой ОС, как возникает желание поотрывать «дизайнерам» ноги (руки оставить, чтобы могли переделать).
Шрифт основного текста должен быть 100% и с дефолтными настройками — пользователь сам себе в браузере выберет самый удобный шрифт.
В 21-м веке пора бы уже отказаться от задания размера шрифта в пикселях — пиксели у всех разные. И пока сидишь за обычным монитором в обычной винде, этого не замечаешь, но стоит пересесть за монитор с более высоким физическим разрешением, да ещё в другой ОС, как возникает желание поотрывать «дизайнерам» ноги (руки оставить, чтобы могли переделать).
Шрифт основного текста должен быть 100% и с дефолтными настройками — пользователь сам себе в браузере выберет самый удобный шрифт.
что далеко ходить, возьмем тот же хабр, а именно полоску над этим самым комментарием.
если высокое dpi на мониторе, плохое зрение (или зачем там еще размер шрифта менять), то ник, дату, значки # и ↑ увеличивать надо, а иконки-ссылки избранного и голосования пусть так и остаются крошечными, что ли?
кстати, из всех популярных браузеров пункт «размер шрифта» в меню остался разве что в IE.
если высокое dpi на мониторе, плохое зрение (или зачем там еще размер шрифта менять), то ник, дату, значки # и ↑ увеличивать надо, а иконки-ссылки избранного и голосования пусть так и остаются крошечными, что ли?
кстати, из всех популярных браузеров пункт «размер шрифта» в меню остался разве что в IE.
Кстати о dpi. В Firefox, если мне не изменяет гугл и память, постоянно выставлено значение 96.
Так ведь CSS 2.1, раздел 4.3.2: 1px = 0.75pt, 72pt=1in — потому что «too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content».
НЛО прилетело и опубликовало эту надпись здесь
Написал же: для основного текста, т.е. для текста статьи и комментариев — того текста, который читаешь 95% времени на сайте.
Согласен, вот только растровые картинки всю малину портят… И бог с ними с иллюстрациями в тексте, а вот элементы дизайна…
Размеры картинок тоже в em задаёте? И фоновых?
Резина — это здорово, пока она не вылезает за границы разумного (и нарисованного). А пока картинки в пикселях измеряются, применять эту самую резину везде довольно рискованно.
Резина — это здорово, пока она не вылезает за границы разумного (и нарисованного). А пока картинки в пикселях измеряются, применять эту самую резину везде довольно рискованно.
Задаю в em при html { font-size: 100%; }
Зачем эти 100%? Вы точно понимаете, что именно делаете?
Единственное что могу придумать — был такой небольшой баг в IE 6-7, который лечился выставлением font-size: 100%
www.alistapart.com/articles/howtosizetextincss/
www.alistapart.com/articles/howtosizetextincss/
вот если бы дизайнеры не приставали с соответствием до пикселя… ставил бы по default… а так строго по px…
мм видимо я один такой нуб, что юзаю pt. Его даже в списке нет.
та не один вы. просто пункты не кошерно
А в чем проблема с ними?
Я просто по идее прогер, не верстальщик, не очень в этих тонкостях разбираюсь :(
Я просто по идее прогер, не верстальщик, не очень в этих тонкостях разбираюсь :(
с самими пунктами всё ок, они именно предназначены для измерения размера шрифта (кегля) и чётко определены размеры независимо от устройства (ну разница только там пункт снг или пункт сша). а так, неясно за что его игнорировать
Сложно свёрстывать с растровой графикой.
Простите, как это? Можно поподробнее?
Размеры шрифта физические (в дюймах, грубо говоря), размеры картинок в пикселях и физически они могут быть любые (в зависимости от физического dpi).
Хотя вот проверил, с каких-то пор фокс стал выдавать 96dpi независимо от разрешения. Да и иксы сами, причём xrandr всё чётко показывает (даже учитывает невидимую область монитора), а xdpyinfo — 96 из-за каких-то криворуких всё поломали :(
Если вы не верстальщик, получающий макеты дизайна со стороны, вам вряд ли когда-нибудь придётся добиваться попиксельного совпадения с макетом. А в большинстве случаев небольшие отклонения без потери читаемости и ухудшения внешнего вида возможны.
P. S. Я — программист (не профессиональный верстальщик), стараюсь задавать размер в пунктах. Если совсем никак и надо идеально подгонять под рядом стоящие растровые картинки — тогда жёстко прибиваю пикселями. В эмах размер не задаю никогда.
P. S. Я — программист (не профессиональный верстальщик), стараюсь задавать размер в пунктах. Если совсем никак и надо идеально подгонять под рядом стоящие растровые картинки — тогда жёстко прибиваю пикселями. В эмах размер не задаю никогда.
Многие не понимаю разницы, поэтому попробую объяснить технические премудрости.
Пункты определяют абсолютные физические размеры и с другими физическими размерами определена такая связь: 72 pt = 1 in = 2.54 cm = 25.4 mm = 12 pc, т.е. если бы все браузеры соблюдали правила CSS, то размер в 72 pt занимал бы ровно один дюйм на любом устройстве. Это очень удобно, если вы хотите показать пользователю прямоугольник с высотой в один дюйм, но не всегда удобно для отображения шрифтов. Например, размер шрифта в 14 pt будет легко читаться с экрана ноутбука или мобильного телефона, но, чтобы прочитать тот же шрифт на телевизоре, вам придётся сидеть рядом с телевизором впритык. Если вы попробуете прочитать те же самые буквы сидя на диване далеко от телевизора, то буквы сольются в одну линию.
Ещё замутнее обстоит дело с пикселями. Пиксель в CSS — это по определению тонкая, острая линия, которую может показать устройство, но он не имеет ничего общего с настоящими пикселями устройства. Точнее, имел, но в CSS2 это убрали. В CSS1 пиксель равнялся пикселям устройства. Представьте себе какая бы разница была в картинках на экране и на бумаге. Если на экране с разрешением 96 px на дюйм картинка в 960 px занимала бы 10 дюймов, то на бумаге у принтера с разрешением 600 px на дюйм — в 6 раз меньше! Технически это правильно, но для пользователей это часто контринтуитивно. Поэтому в CSS2 ввели два понятия: во-первых, связали пиксель CSS с абсолютным значением в 0.75 pt, а во-вторых ввели понятие референтного пикселя — он рассчитывается через визуальный угол, который занимает пиксель в 0.75 pt на экране устройства с разрешением в 96 px на дюйм c расстояния вытянутой руки. В этой ситуации пиксель занимает 0.26 mm. Теперь, используя этот угл, можно отойти от телевизора и сказать, что пиксель телевизора будет иметь размер 1.3 mm.
Так как теперь у нас возникла связь между физическими размерами в пунктах и нашим новым, выдуманным пикселем, то теперь можно смело писать сайты используя эти абсолютные единицы и не бояться, что куда-то что-то поедет. Между ними теперь есть чётко заданная связь. Теперь все проблемы с масштабированием свалили на браузеры и на пользователей.
Единицы CSS em и ex определяют относительные размеры и берут их из размеров шрифта. em — это просто размер шрифта. ex — размер маленькой буквы «x» этого шрифта, либо «x-height» свойство шрифта, либо 0.5 em. Если пользователь установил в настройках браузера, что ему нравится смотреть на сайт со шрифтом в 10 pt — то em будет пересчитан в эти 10 pt. Если 16, то в 16. Для дизайнеров засада состоит в том, что em пересчитывается для каждого элемента и за основу em берётся размер родительского элемента. Т.е. если у body установлено 2 em, а у дочернего элемента тоже 2 em, и размер базового шрифта = 10 pt, то размер дочернего элемента будет не 20 pt, а 40 pt.
В CSS есть ещё такая величина размеров как %. Там всё ещё запущеннее :) Когда указываются проценты, то для каждого свойства в документации есть описание откуда считать эти проценты. Если вы указываете высоту строки в 150% — это откуда считать? А если 150% высота рисунка? А если шрифта? А что делать, если проценты указаны для свойства, у которого нет родителя, с которого эти проценты считать? Расписывать долго, но могу сказать, что почти всегда это интуитивно понятно, и если возникают проблемы, то читайте документацию.
Сейчас разрабатываются ещё одни размеры для CSS: «rem» — считает как em, но только берёт размер от корневого элемента документа, а не от родителя; «vw» и «vh» — 1/100 часть ширины и 1/100 часть высоты экрана соответственно.
Пункты определяют абсолютные физические размеры и с другими физическими размерами определена такая связь: 72 pt = 1 in = 2.54 cm = 25.4 mm = 12 pc, т.е. если бы все браузеры соблюдали правила CSS, то размер в 72 pt занимал бы ровно один дюйм на любом устройстве. Это очень удобно, если вы хотите показать пользователю прямоугольник с высотой в один дюйм, но не всегда удобно для отображения шрифтов. Например, размер шрифта в 14 pt будет легко читаться с экрана ноутбука или мобильного телефона, но, чтобы прочитать тот же шрифт на телевизоре, вам придётся сидеть рядом с телевизором впритык. Если вы попробуете прочитать те же самые буквы сидя на диване далеко от телевизора, то буквы сольются в одну линию.
Ещё замутнее обстоит дело с пикселями. Пиксель в CSS — это по определению тонкая, острая линия, которую может показать устройство, но он не имеет ничего общего с настоящими пикселями устройства. Точнее, имел, но в CSS2 это убрали. В CSS1 пиксель равнялся пикселям устройства. Представьте себе какая бы разница была в картинках на экране и на бумаге. Если на экране с разрешением 96 px на дюйм картинка в 960 px занимала бы 10 дюймов, то на бумаге у принтера с разрешением 600 px на дюйм — в 6 раз меньше! Технически это правильно, но для пользователей это часто контринтуитивно. Поэтому в CSS2 ввели два понятия: во-первых, связали пиксель CSS с абсолютным значением в 0.75 pt, а во-вторых ввели понятие референтного пикселя — он рассчитывается через визуальный угол, который занимает пиксель в 0.75 pt на экране устройства с разрешением в 96 px на дюйм c расстояния вытянутой руки. В этой ситуации пиксель занимает 0.26 mm. Теперь, используя этот угл, можно отойти от телевизора и сказать, что пиксель телевизора будет иметь размер 1.3 mm.
Так как теперь у нас возникла связь между физическими размерами в пунктах и нашим новым, выдуманным пикселем, то теперь можно смело писать сайты используя эти абсолютные единицы и не бояться, что куда-то что-то поедет. Между ними теперь есть чётко заданная связь. Теперь все проблемы с масштабированием свалили на браузеры и на пользователей.
Единицы CSS em и ex определяют относительные размеры и берут их из размеров шрифта. em — это просто размер шрифта. ex — размер маленькой буквы «x» этого шрифта, либо «x-height» свойство шрифта, либо 0.5 em. Если пользователь установил в настройках браузера, что ему нравится смотреть на сайт со шрифтом в 10 pt — то em будет пересчитан в эти 10 pt. Если 16, то в 16. Для дизайнеров засада состоит в том, что em пересчитывается для каждого элемента и за основу em берётся размер родительского элемента. Т.е. если у body установлено 2 em, а у дочернего элемента тоже 2 em, и размер базового шрифта = 10 pt, то размер дочернего элемента будет не 20 pt, а 40 pt.
В CSS есть ещё такая величина размеров как %. Там всё ещё запущеннее :) Когда указываются проценты, то для каждого свойства в документации есть описание откуда считать эти проценты. Если вы указываете высоту строки в 150% — это откуда считать? А если 150% высота рисунка? А если шрифта? А что делать, если проценты указаны для свойства, у которого нет родителя, с которого эти проценты считать? Расписывать долго, но могу сказать, что почти всегда это интуитивно понятно, и если возникают проблемы, то читайте документацию.
Сейчас разрабатываются ещё одни размеры для CSS: «rem» — считает как em, но только берёт размер от корневого элемента документа, а не от родителя; «vw» и «vh» — 1/100 часть ширины и 1/100 часть высоты экрана соответственно.
а не могли бы про именованные размеры еще написать?
Именованные размеры делятся на два типа: абсолютные и относительные.
К абсолютным относятся значения xx-small, x-small, small, medium, large, x-large, xx-large, где xx-small — это самый маленький шрифт, а xx-large — самый большой. Здесь нет общего стандарта на размер, браузер должен сам высчитывать размеры как ему нравится, беря за основу настройки базового шрифта и приравнивая его размер значению medium.
Рекомендуется, чтобы заглавные буквы при значении xx-small были не меньше чем самый читаемый шрифт. Обычно это равно 9 px, либо устанавливается пользователем в настройках. Обычно шаг увеличения/уменьшения шрифта равен 1.2 от ближайшего размера, т.е. large = 1.2*medium = 1.2*1.2*small, но бывают и другие значения.
К относительным именованным значениям относятся smaller и larger. При этом браузер, опять же по своей логике, должен высчитать значение, которое обычно на 1.2 меньше или больше значения родительского элемента.
Эти значения лучше не использовать при дизайне страниц, потому что на них нет стандарта, и разные браузеры могут показывать их совершено в разных физических размерах.
К абсолютным относятся значения xx-small, x-small, small, medium, large, x-large, xx-large, где xx-small — это самый маленький шрифт, а xx-large — самый большой. Здесь нет общего стандарта на размер, браузер должен сам высчитывать размеры как ему нравится, беря за основу настройки базового шрифта и приравнивая его размер значению medium.
Рекомендуется, чтобы заглавные буквы при значении xx-small были не меньше чем самый читаемый шрифт. Обычно это равно 9 px, либо устанавливается пользователем в настройках. Обычно шаг увеличения/уменьшения шрифта равен 1.2 от ближайшего размера, т.е. large = 1.2*medium = 1.2*1.2*small, но бывают и другие значения.
К относительным именованным значениям относятся smaller и larger. При этом браузер, опять же по своей логике, должен высчитать значение, которое обычно на 1.2 меньше или больше значения родительского элемента.
Эти значения лучше не использовать при дизайне страниц, потому что на них нет стандарта, и разные браузеры могут показывать их совершено в разных физических размерах.
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, стало немного понятнее. Было бы здорово, если бы вы написали статью с более подробной информацией по всем этим pt, em и т.д. и самое главное — с практическими советами. Думаю, многим начинающим верстальщикам такое было бы полезно.
Скажем, я при вёрстке использую pt для шрифта и px для установки размеров блочных элементов. Правильно ли это? Какие подводные камни тут могут быть?
Что насчёт резиновой вёрстки — какие единицы измерения использовать там?
Скажем, я при вёрстке использую pt для шрифта и px для установки размеров блочных элементов. Правильно ли это? Какие подводные камни тут могут быть?
Что насчёт резиновой вёрстки — какие единицы измерения использовать там?
Подводные камни могут быть в том, что некоторые браузеры будут считать размеры в pt по старой методике, без привязки к референтному пикселю, либо считать их как настоящие физические размеры. Насколько я помню, W3C рекомендует использовать пункты, дюймы, сантиметры и прочие абсолютные размеры только когда они действительно необходимы. Привязка к референтному пикселю — это как бы такой костыль для ленивых дизайнеров.
Меньше всего проблем будет если вы будете использовать px, em и % для дизайна на экране. Причём нет какого-то общего, универсального решения. Для разных задач нужны разные категории размеров.
Меньше всего проблем будет если вы будете использовать px, em и % для дизайна на экране. Причём нет какого-то общего, универсального решения. Для разных задач нужны разные категории размеров.
Как я вижу ситуацию сейчас:
— есть устройства примерно с одинаковым разрешением и размером экрана — это различные ноуты или десктопы с дисплеями 14"-17"
— есть нетбуки 10"-12"
— есть планшетники 7"-10"
— есть мониторы 19"-22" и более
— есть смартфоны и телефоны с дисплеями < 4"
На всех этих устройствах сайт в идеале должен выглядеть одинаково хорошо. И встаёт вопрос — как этого добиться?
— есть устройства примерно с одинаковым разрешением и размером экрана — это различные ноуты или десктопы с дисплеями 14"-17"
— есть нетбуки 10"-12"
— есть планшетники 7"-10"
— есть мониторы 19"-22" и более
— есть смартфоны и телефоны с дисплеями < 4"
На всех этих устройствах сайт в идеале должен выглядеть одинаково хорошо. И встаёт вопрос — как этого добиться?
НЛО прилетело и опубликовало эту надпись здесь
Спасибо за подробное пояснение. Теперь намного понятнее все стало.
я тоже так подумал. я хоть и не верстальщик но люблю использовать pt
В em, a в body font-size 100%
Тем, кто пользуется пикселями, вопрос.
Допустим в макете есть участок, где базовый размер шрифта меньше, чем в остальном макете. Например, для контента 14px, а для сайдбара 12px. Будете ли вы задавать новые размеры (относительно 12px) для заголовков, индексов и прочего? Если да, то для каких элементов?
P.S. сам использую пиксели, но писать конструкции типа .sidebar h2 {} всё больше надоедает.
Допустим в макете есть участок, где базовый размер шрифта меньше, чем в остальном макете. Например, для контента 14px, а для сайдбара 12px. Будете ли вы задавать новые размеры (относительно 12px) для заголовков, индексов и прочего? Если да, то для каких элементов?
P.S. сам использую пиксели, но писать конструкции типа .sidebar h2 {} всё больше надоедает.
pt
Странно, что pt не включен в список.
Странно, что pt не включен в список.
Тоже pt, и тоже удивлен. Хотя нет, судя по количеству псевдонаучных статей про еденицы размерности текста, ни капли не удивлен.
Вы бы ещё килограммы попросили включить. Тоже единица измерения.
Если вам нравится писать font-size:10pt, то почему вы не пишете font-size:3.528mm? Это ведь равнозначно…
Если вам нравится писать font-size:10pt, то почему вы не пишете font-size:3.528mm? Это ведь равнозначно…
Килограмы и «mm» не являются стандартными еденициами измерения, описанными в каком либо из стандартов CSS. А вот 'pt' — является. Так что отсутствие 'pt' сотается совершенно непонятным.
Миллиметры вполне себе описаны в стандарте CSS, ссылка.
Однако. Я был не правнасчет «mm». Сыграло то, что в жизни их не разу не встречал в CSS, а спеку читал бог весть сколько лет назад :(
Да, я тоже никогда не видел практического применения этому.
В спецификации CSS3 описано в каких случаях стоит применять абсолютные значения (пункты, миллиметры и т.п.): www.w3.org/TR/css3-values/#absolute0 — когда конечные размеры источника вывода известны.
Не позорьтесь: www.w3.org/TR/css3-values/#absolute0
И я по прежнему не вижу там описания килограммов. А если же вы про «mm», то про него я уже написал выше.
Речь о том, что килограммы, миллиметры и пункты — это единицы измерения, которые имеют отношение к реальному миру и должны использоваться тогда, когда мы применяем их к реальным объектам. Самый яркий пример — пункты для размера шрифта и миллиметры для полей при печати. Для остального — пикселы или мета-единицы (em, rem, проценты), которые браузеры всё равно приводят к пикселам.
И чем же тут pt хуже других?
Тем, что нет чёткой связи между пунктами и пикселами. Ни практической, ни идеологической. Вообще. Пункты — это «ворд и фотошоп» для реального мира, потому, что 1pt = Nmm, в зависимости от традиций страны проживания.
Ммм… Вы про те «правильные» pt или всё же про CSS? Если про вторые, то там связь достаточно прямая.
Вот значит как, теперь уже есть «правильные» и «неправильные» пункты. Я говорю о пунктах, как таковых. CSS-пункты при выводе на экран — это сложная попытка соединить несоединимое, я очень сомневаюсь что размер пункта во всех современных браузерах чётко привязан к DPI экрана и соответствует реальному пункту.
Сила тока не измеряется в килограммах, а размеры на экране в пунктах. Для меня это настолько прозрачно, что я даже не знаю что добавить. Зачем вам пункты?
Сила тока не измеряется в килограммах, а размеры на экране в пунктах. Для меня это настолько прозрачно, что я даже не знаю что добавить. Зачем вам пункты?
Про неправильные пункты хорошо написали выше. Очень часто такой вариант реализации приемлем.
Зачем использовать пункты? А всё дело просто в том, что часто на верстку отдается PSD файл, где шрифты как раз заданы в пунктах. И вот именнно для того, чтобы не заниматься переводом всё в пикселы и обратно — в CSS попадают те самые pt. Да, мы не получим полного соответствия PSD, но результат обычно всех устраивает.
Зачем использовать пункты? А всё дело просто в том, что часто на верстку отдается PSD файл, где шрифты как раз заданы в пунктах. И вот именнно для того, чтобы не заниматься переводом всё в пикселы и обратно — в CSS попадают те самые pt. Да, мы не получим полного соответствия PSD, но результат обычно всех устраивает.
Страшно подумать, чем вы займётесь, когда вам пришлют макет в CMYK…
А вы, кстати, не пробовали настраивать фотошоп? Я не уверен, но если в настройках поставить везде пикселы, то панелька может конвертировать всё в пикселы сама. Попробуйте.
Но вообще странно. Как люди верстают — берут базовый размер текста на странице, назначают его для BODY, а дальше уже пляшут: больше-меньше. И сколько есть базовых размеров шрифтов? Ну, 11-12-13-14px — неужели на глаз не определить? Ну ошибся, пускай даже пару раз. Но ведь это делается один раз для каждого макета.
Но сначала, конечно же, надавать по рукам дизайнеру. Если это возможно.
А вы, кстати, не пробовали настраивать фотошоп? Я не уверен, но если в настройках поставить везде пикселы, то панелька может конвертировать всё в пикселы сама. Попробуйте.
Но вообще странно. Как люди верстают — берут базовый размер текста на странице, назначают его для BODY, а дальше уже пляшут: больше-меньше. И сколько есть базовых размеров шрифтов? Ну, 11-12-13-14px — неужели на глаз не определить? Ну ошибся, пускай даже пару раз. Но ведь это делается один раз для каждого макета.
Но сначала, конечно же, надавать по рукам дизайнеру. Если это возможно.
К сожалению дизайнеры, очень многие, не сильно пекуться об интересах пользователя, философия веб'а для них пустой звук. Текст в фотошопе никуда не скачет, никогда, так что шедевр вышедший из под руки маэстро должен быть повторен до пикселя, а масштабом балуются 0,5 процента каких-то идиотов (маэстро в этом уверен абсолютно, он ведь так не делает), для них заморачиваться не стоит.
10 лет назад начитавшись юзабелистов делал в em, на «будущее». Когда понял что «будущего» скоро не будет, стал делать в px, мне так проще.
Задаю body { font-size: 12px }, а внутри элементов — в em. Это позволяет, в случае чего, быстро изменить размер всего текста в шаблоне.
а где вариант small, medium, large etc.?
базовый размер в пунктах, остальные в %
НЛО прилетело и опубликовало эту надпись здесь
Я делаю в px — 13px/14px. Так и вправду проще.
Но для h1, h2 выставляю в % соотношении, 200%, 150%
Но для h1, h2 выставляю в % соотношении, 200%, 150%
Реквестирую топик по пуленепробиваемому заданию font-size.
Задаю в «em». Но недавно узнал про новую единицу измерения «rem».
а почему нет самого православного варианта — пунктов?
Использую метод «Yahoo!», который, к моему позору, до этого опроса считал собственным велосипедом. Прельщает возможность изменить одним «взмахом» размеры шрифтов целого блока с сохранением относительных пропорций.
С помощью pt или em.
емы очень удобно считать при 62.5%, поэтому проголосовал туда
Как правильно заметили выше, сегодня пиксели в CSS — это виртуальные значения, которые браузер считает относительно настроек DPI в ОС. Поэтому стоит их и использовать в большинстве случаев.
Насчёт изменения шрифта пользователем. Я не знаю ни одного человека, который бы так делал. Обычно все желающие меняют DPI общесистемно и ваши em-ы превратятся во что-то непредсказуемое.
Вобще, пиксели и ничего кроме пикселей.
Насчёт изменения шрифта пользователем. Я не знаю ни одного человека, который бы так делал. Обычно все желающие меняют DPI общесистемно и ваши em-ы превратятся во что-то непредсказуемое.
Вобще, пиксели и ничего кроме пикселей.
Когда как, все от дизайнера зависит — как попросит так и сделаю. Но в большинстве случаев в px.
Обычно «em», но совершенно не брезгуем «px», если дело того требует :)
Задаю в body размер в px, а потом использую только em.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как вы задаете свойство font-size сегодня?