Мобильная типографика

[Mithgol]

Спасибо за привлечение внимания к проблеме типографики на мобильниках и планшетах.

Но, говоря про такую единицу измерения размера, как rem, уместно подчеркнуть, что IE8 не понимает её.

(А равно и Safari на iOS 3.2 не понимает.)

[Mithgol]

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

[kyrie]

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

[lexmirnov]

Замечу, что и без дальтонизма лично мне гораздо приятнее и удобнее читать черным по белому. На компьютере это решается с помощью Evernote Clearly. На смарте/планшете порой приходится отправлять в Pocket.

[Mithgol]

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

[ninacarrot]

Я вам скажу как дальтоник: дальтоник — это не «видеть мир в 256 оттенках серого». Это несколько другое. Подтверждаю, читать белый по черному иногда настолько невыносимо, что приходится делать Ctrl+A, чтобы выделить весь текст (соответственно, инвертировав цвета).
Особенно это касается мобильных сайтов — если гуляя по вебу через Opera Mobile я натыкаюсь на сайты с темным фоном, просто закрываю вкладку, даже не пытаясь что-то прочитать.

[parserpro]

Вот только проблема не с размером шрифта как таковым, а с размером самого экрана. Сайт на экране мобильного выглядит слишком мелким, штифты микроскопические.
При этом разрешение экрана вполне себе соответствует десктопам.
Т.е. завязаться именно на разрешение — идея так себе.

[parserpro]

Хотя, может и нет.
Проверка разрешения на моем телефоне показала:
разрешение экрана — 720 х 1280
разрешение экрана браузера — 360 х 559

[parserpro]

Ну совсем весело, дополнил правила вот так:
@media (max-width: 640px) { body {font-size:1.5rem;} .card-title {color: red} }
@media (min-width: 640px) { body {font-size:1rem;} .card-title {color: green}}
@media (min-width:960px) { body {font-size:1.5rem;} .card-title {color: blue}}
@media (min-width:1100px) { body {font-size:1.5rem;} .card-title {color: yellow}}

И вижу на том же телефоне синие заголовки, т.е. срабатывает min-width:960px — вот как?

[anapis]

Ссылка, указанная как калькулятор размеров шрифта, ведёт на книжный сайт: imgur.com/lGTfrBg