CODEWITHSUNDEEP
htmlcssresponsive-design
pixlab
pixlab

Reputation: 105

responsive typography

i have read different articles about responsive typography but have not found a good practice to adopt. If I have to optimize my webapp for these resolutions with a font-size for everyone in graphic source:

320x480 -> 12px

480x800 -> 20px

540x960 -> 26px

720x1280 -> 26px

after my reading I have put in css file this:

html { font-size: 100%; -webkit-text-size-adjust: 100%; 
                          -ms-text-size-adjust: 100%; }

then with the Ethan Marcotte's formula I have calculated my first font-size:

body{font-size: 0.75em;/*12px/16px */}

then with the mediaqueries I have augmented the font-size for the html attribute:

/* ===== == = === 30em (480px) === = == ===== */
@media only screen and (min-width : 30em) {
   body{font-size: 125%;}/*20px*/
}
/* ===== == = === 37.5em (600px) === = == ===== */
@media only screen and (min-width: 37.5em) {
    body{font-size: 163%;}/*26px*/
}

Is this a good practice to adapt my font to different resolutions? Do you have good practical examples where can I find this information?

Thanks in advance!!!

Upvotes: 4

Views: 765

Answers (1)

Lowkase
Lowkase

Reputation: 5699

Structurally, that is how I would do it. Not sure I would use percentages though in your mq's, I would probably continue on with em's. Here is a great px to em calculator: http://pxtoem.com/

Upvotes: 1

Related Questions