Verify font sizes on common viewports.

[ulinaaron]

As reported, some fonts are not displaying normally on smaller viewports. The framework relies on system fonts this needs to be verified on multiple viewports and browsers and normalized for the default fonts.

[Rusteze]

Hi Aaron, I love tentcss. i'm trying to figure out whats going on with the fonts sizes on my mobile. Not that experienced yet with scss. But maybe i can help, i'm pretty persisant ;-) Can you point me in the right direction?

[ulinaaron]

Hi @Rusteze , I'm glad you are enjoying the framework!

Last week it was pointed out on Hacker News that there was some quirkiness with how the fonts are displaying on mobile devices. Source: https://news.ycombinator.com/item?id=13778090

Currently, Tent applies this to the body font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;. I took this cue from Medium.com to have the most compatibility to system fonts for all users. Source: https://github.com/sitetent/tentcss/blob/20326a24eb4ce7c828fcfb9929578daf8c764205/dist/tent.css#L63

I imagine some more device testing and possibly screenshots will be needed to see how the system fonts are reacting to the font-sizes set by Tent CSS. Only font-sizes with REM units are being applied right now. Pixels have been left out to stick with the framework's principles of being modern.

If you can figure anything out I would certainly deeply appreciate your efforts!

[Rusteze]

Aaron. Could the problem be something with the html-element in your reset file? When i change:

-ms-text-size-adjust: 62.5%; // * 3 * -webkit-text-size-adjust: 62.5%; // * 3 *

to this:

-ms-text-size-adjust: 100%; //* 3 * -webkit-text-size-adjust: 100%; //* 3 *

it seems to be working right. I kept the font-size unchanged ( font-size: 62.5%; // 2 ) // 3 . Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.

[ulinaaron]

That may very well be it too. I was setting those properties to compliment font-size: 62.5%; which is set that way to allow for sensible rem values. So 1.6rem is the same as 16px.

I'll admit, text-size-adjust is a rather new property to me. I kept the properties from adapting the reset from fix.css reference in the _reset.scss file. According to MDN it is still technically experimental and requires prefixing. https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

At this point it seems to make sense to me to keep testing implementations of this. I have no qualms with removing -ms-text-size-adjust: 62.5%; // * 2 and -webkit-text-size-adjust: 62.5%; // * 2 * if it comes to it. However they seem to be providing some better cross-browser compatibility.

I appreciate your efforts looking into this, @Rusteze !

[Rusteze]

No problem i hope it helps.

[ulinaaron]

A new version 1.3.3 has been released to address this issue. https://github.com/sitetent/tentcss/releases/tag/v1.3.3