Started building this mobile first “boilerplate” that tries to make a good starting point (this is the reason for the very plain look) for typography that looks balanced and easy-to-read on wide range of devices. It works from 200px and up and provides a set of media queries and typographic basic styles. All proportions are based on The Chromatic Scale.
It only shows once your browser/window width is over 1600px. If you want to use the boilerplate you can of course change that to suit your own purposes.
The reason why I didn't make a better bigger version is that this is meant to be more of a boilerplate than template and it focuses on the small widths where the design process starts…
There are also a lot of things still in the makings and I'll hopefully get a better version out at some point with SASS math functions.
@Sven Giesen Many "feature phones" do. For example Nokia ones which are still quite popular around the world. I noticed with the test devices I used that 12px font-size is quite optimal for that size when thinking in terms of readability. Smaller/Bigger font wouldn't be very readable anymore.
7 Responses
Pro
Viljami Salminen
Started building this mobile first “boilerplate” that tries to make a good starting point (this is the reason for the very plain look) for typography that looks balanced and easy-to-read on wide range of devices. It works from 200px and up and provides a set of media queries and typographic basic styles. All proportions are based on The Chromatic Scale.
I basically did this as a personal study, but decided to share the results in case someone finds it useful. If you want to know more about it read my post at http://viljamis.com/blog/2012/typography/ or check the GitHub repository https://github.com/viljamis/Scale
4 months ago
Pro
Jarno Fabritius
what an interesting read, Hats off to you!
4 months ago
Pro
Nacho
This is fantastic! I really like it, but aren't you missing a wider version of this?
4 months ago
Pro
Viljami Salminen
Thanks @Nacho !
Yeah, it's kind of missing it, but on purpose.
It only shows once your browser/window width is over 1600px. If you want to use the boilerplate you can of course change that to suit your own purposes.
The reason why I didn't make a better bigger version is that this is meant to be more of a boilerplate than template and it focuses on the small widths where the design process starts…
There are also a lot of things still in the makings and I'll hopefully get a better version out at some point with SASS math functions.
4 months ago
Pro
Rob Kille
Very impressive! Will be having a thorough test of the CSS to see just what it can do.
3 months ago
Which device will ever request a version below 260px?
No offense, im just interested.
3 months ago
Pro
Viljami Salminen
@Sven Giesen Many "feature phones" do. For example Nokia ones which are still quite popular around the world. I noticed with the test devices I used that 12px font-size is quite optimal for that size when thinking in terms of readability. Smaller/Bigger font wouldn't be very readable anymore.
3 months ago