Pana acum nu am avut tangenta foarte mare cu problema asta, însa acum ma interesează experiență altora. Ce măsura folosiți pentru font-size, line-height, etc.
Problema se pune în contextul in care sa fie simplu schimbarea unui font-size pe un element sau font-family pentru un o parte din stiluri.
Pe web mi se pare destul de pertinent raspunsul: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Folosesc scss, deci chestii care implica acest lucru sunt binevenite.
În urmă cu mulți ani foloseam exclusiv em, dar fiind mic și prost, m-am luat după un designer: „bă, fontul tău este cu un sfert de pixel mai mic decât ce am eu în design! trebuie să arate identic!”. Prin urmare… am trecut la pixeli.
La ultimul proiect am folosit rem. Suportul e bun (ie9+) și se comportă foarte bine.
Intr-adevar citisem si despre rem azi:
si vasuzem ca si zurb il folosesc: https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
Dar nu prea am inteles cum functioneaza avand in vedere ca am vazut ca ationeaza si pentru margini etc. Dar pentru line-heigth?
Pentru line-height e relativ simplu: între 1.4 și 1.6 (fără nici o unitate de măsură), pus pe body.
Nu știu cum se comportă dacă ai nevoie de un line-height fix, dar nu cred că ar trebui să fie probleme.
Cum funcționează? Foarte simplu: setezi un font-size pe tag-ul html (root). Toate unitățile vor fi relative la root (e.g. dacă setezi 10px - sau 62.5% - pe html, când folosești 1.5rem, vei avea 15px)
S-ar putea să te ajute și astea:
De obicei, pe root lucrez cu font-size de 16px. Line-height 1.4 de obicei, dar depinde si de fontul folosit.
Cand aveam si eu aceleasi intrebari prezentarea asta m-a ajutat destul de mult -> typography-for-developers
Iar in caz ca ai nevoie de fallback in px la rem -> http://sassmeister.com/gist/e888e641925002b5895c
Dacă tot veni vorba de font-uri, o extensie bună e WhatFont, iar pentru font resize - fitText.jquery.js