Комментарии 37
Пожалуйста, не надо на маленьких экранах уменьшать шрифты. Пользователь ставит в настройках системы тот размер шрифта, который ему комфортно читать. Используйте это значение. И наоборот, не надо вываливать на больших экранах гигантские буквы — их так же не комфортно читать. Вообще, размер шрифта должен зависеть от размера экрана примерно никак.
Все таки я не соглашусь с тем, что размер шрифта зависит от размера экрана примерно никак. Отображать один и тот же размер шрифта на экране iphone 5 и на экране широкоформатного телевизора вряд ли уместно. Если я, конечно, правильно понял о чем Вы.
У каждого приема есть свои нюансы и особенности, в том числе и свои ограничения. Нельзя сказать, что это универсальная техника для всех на все случаи жизни. В моем приложении это сработало и об этом я хочу рассказать в следующей своей публикации. В том числе и про нюансы и ограничения этого приема, с которыми можно столкнуться.
Вы не теоретизируйте, а проверьте как показывается один и тот же "размер" шрифта на разных девайсах. Везде разные "css пиксели".
Не очень понимаю, что значит "не теоретизируйте" в данном контексте. И как утверждение: "везде разные "css пиксели"" связано с тем, что пользователю с экраном iphone 5 и широкоформатного телевизора нужно показывать один шрифт. Если Вы клоните к тому, что на телевизоре 4K размер шрифта 14px будет выглядеть так же, как и на iphone 5 (из-за разного размера этих пикселей) и давать одинаковый UX, то из исходя чисто из практики это далеко не так.
Именно к этому и клоню. Если на каком-то телевизоре размер css-пикселей не является удобочитаемым, то это проблема конкретной модели и у неё эти проблемы на всех сайтах.
Правильно ли я понял, что имеется ввиду настройка (например) в настольной версии гугл хром: Внешний вид -> размер шрифта? Если да, то к сожалению ее игнорирует хабр, на котором мы сейчас находимся. Или допустим возьмем такой сайт, как google. Попробуйте поставить очень крупный шрифт в настройках и перейти на google.com. На основной странице вы увидите увеличенные буквы, но как только вы наберете что-то в поиске и нажмете enter, страница с выдачей окажется игнорирующей эту настройку. Если пойти еще дальше и перейти в Настроить шрифты -> Размер шрифта и там выставить максимальные 72, то страница с выдачей поведет себя еще интересней. Сами шрифты проигнорируют эту настройку, а вот все расстояния на странице будут сильно увеличены.
Там есть еще одна настройка — Минимальный размер шрифта. На нее будет реагировать и хабр и сайт с этой техникой. Если указанный в ней минимальный размер шрифта будет больше, чем тот, что на посещаемом сайте. Но если размер шрифта на сайте больше, то хабр это тоже проигнорирует. Как и гугл. Но это логично исходя из названия настройки.
Из браузера мы же не имеем доступа к настройкам размера шрифта телефона — а как тогда «использовать это значение»?
font-size: 1remдля больших экранов h1- 4rem, будет вполне нормально выглядеть
Не будет.
Но какое это имеет отношение к системным настройкам шрифта в системе пользователя? Возьмём к примеру IOS и системные настройки Text Size. Изменение системного Text Size в любую сторону никак не влияет на размеры шрифтов на веб-страницах в браузерах IOS.
Конечно же размер шрифта зависит от экрана. Обе эти сущности основаны на занимаемой площади и контрасте. На большом экране количества информации больше, поэтому заголовки приходится выделять сильнее, чтобы выделять структуру документа. На мобиле это практически не требуется.
Поэтому решения по адаптивности размера и отступов очень и очень хороши. www.npmjs.com/package/rfs
Тут на хабре h1 32px. В мобильной 22px. Ужасно было бы сделать везде h1 заголовки 22px. Это технически абсолютно приемлиемо, но убежден, что статиситически в любом слепом тесте больший размер шрифта на десктопах будет восприниматься как более одобряемый. Так сделано, наверное, в 90% всех популярных сайтов.
В мобильной 24px, а в ленте на десктопе 28px. И эту разницу вы на глаз не заметите. А вот что вы заметите, так это то, что заголовок из 3 слов не влезает по ширине и начинает переноситься.
а при 8 еще сильнее.
Если говорить о словах, то о каких именно, если о «сказ о css» то и при 40px не перенесется. А если о «сложности синтеза тетрагидропиранилциклопентилтетрагидропиридопиридина» то никуда не влезет.
Влезет или нет это отдельная история. Не думаю, что есть некий универсальный размер куда прям явно можно попасть, чтобы не было висячих строк и смотрелось норм. обычно чуть крупнее основного на мобиле, а то и вообще можно обойтись одним strong иногда, а на десктопе эта минимальная разница не так важна и может быть увеличина 2-4 раза. Накупят себе 32 мониторов. У них там все заголовки как чешуйницы в туалете. Все от идеи.
Хороший и правильный вопрос. Это как раз из тех моментов, о которых стоит помнить при использовании этой техники или любой другой техники отзывчивых шрифтов. В моем случае все свёрстано таким образом, что вереска не едет, но все увеличивается пропорционально изменившемуся масштабу. Для моего приложения и моих пользователей это приемлемое поведение, но если вы считаете, что ваши пользователи будут пользоваться увеличением экрана, то возможно эта адаптивная техника не подходит. Постараюсь подробно описать в следующей статье в больших деталях. Спасибо за вопрос.
h1 {
font-size: clamp(.7cm, 5vw, 1.5cm);
}
Во-первых, это бессмысленно.
Во-вторых, ломает браузерное масштабирование.
2. Проверено в ff и хроме — прекрасно масштабируется и ничего не ломается.
2. Плохо проверяете. Если указать размер шрифта в единицах vw, то он перестаёт реагировать на масштабирование. Совершенно понятно почему: при увеличении масштаба виртуальный размер вьюпорта уменьшается в такое же количество раз, во сколько увеличивается размер css-пикселя. Одно сокращается на другое, получается тот же самый размер в физических пикселях.
В точке 2048px шрифт примерно 20px, а должен быть 24px. Или я что-то не верно понял?
Полностью отзывчивый дизайн — это больше, чем просто медиа-запросы