search

jakegiltsoff / sassline

Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
https://sassline.com
1.38k stars 91 forks source link

Slightly increase the font size for tablet and below if touch is enabled #40

Closed KingScooty closed 8 years ago

KingScooty commented 8 years ago

I've noticed the font sizes are rather tiny at small break points on touch devices. Before i absolutely hack this to bits figuring out the solution, do you know of a really clean way to slightly increase the font sizes/baselines if touch is enabled?

So if a .touch feature class is on html, switch to a modular scale that's set for touch devices.

I know the likes of the BBC (on some of their newer pages) slightly increase their font sizes for touch to compensate for viewing distances etc. I'd really like to enable something similar for sassline as i'm noticing the type is a little small when reading from an iPhone.

jakegiltsoff commented 8 years ago

@KingScooty I wouldn’t advise changing type sizes based on touch capabilities — quite a lot of devices give false positives for that. Instead we can guesstimate what sort of device / reading distance from the viewport size. This obviously isn’t completely reliable however it is the best we can really do.

The idea with Sassline is to input your own font sizes etc based on the typefaces used — the examples will not be correct for all fonts, just given as an example. I suggest choosing new modular scales for the smaller break points and inputting those if you want larger type sizes for smaller screens.

This post linked from the readme is worth a read if you are unsure how to use Sassline https://medium.com/@designbyjake/sassline-v2-0-e424b2881e7e Hoping to have some better documentation early this year.