0

Any body have any experience using condensed fonts for mobile designs? Pro/Cons? They seem like they might be harder to read on mobile devices.

1

I tend to avoid condensed fonts for that very reason (legibility on mobile), but that's not to say they won't work - they could still be legible and look good as heading fonts (IMO they don't really work as body copy fonts anyway). I would suggest just giving it a try in-browser and see what you think.

0

Fonts are one of the harder aspects to grasp in responsive design but they're just as important as images and the grid, when it comes to a user friendly experience. Using something like the Golden Ratio Type Calculator in tandem with a media query allows you to very quickly morph things like your paragraph and header tags based on the size of the view portal.

@media screen and (max-width: 768px) {
    h2 { font-size: 17px}
}
@media screen and (max-width: 480px) {
    h2 { font-size: 15px}
}

Taking it a step further, you can also use Modernizr.touch to insert a body class and then automatically update all of your font definitions on a touch screen accordingly. A combination of both approaches is time consuming but gets the best results.

@media screen and (max-width: 768px) {
    h2 { font-size: 19px; font-family: "Arial Narrow";}
    body.touch h2 { font-size: 17px; font-family: "Open Sans";}
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.