Logo

On Typography

Responsive

7 Responses

  1. Pro Logo 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

  2. Pro Profiili_460_0_0_0 Jarno Fabritius

    what an interesting read, Hats off to you!

    likes

    4 months ago

  3. Pro Picture_1 Nacho

    This is fantastic! I really like it, but aren't you missing a wider version of this?

    4 months ago

  4. Pro Logo 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

  5. Pro 314_26777606011_720526011_1147637_8276_n Rob Kille

    Very impressive! Will be having a thorough test of the CSS to see just what it can do.

    3 months ago

  6. _mg_0012_q Sven Giesen

    Which device will ever request a version below 260px?

    No offense, im just interested.

    3 months ago

  7. Pro Logo 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

keyboard shortcuts: previous shot next shot L or F like