SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    responsive design & font sizes....

    ok, so everything has to be so "fluid", right? ;-)
    (like I mentioned in another thread, this resp design approach is really what we should have been doing all along..;-) now we're learning the lessons the hard way.......;-)

    so what about font sizes?

    the correct approach for resp design would be to not set a default font-size at all? then everything else (headers, footer nav, etc) do in percentages?

    what do you think is the best approach for setting font sizes in responsive design?

    thank you....

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    A good practice for any web design is to set a % font-size on the <body> element. I prefer

    Code:
    body {font-size: 100%}
    but others prefer 85% etc.

    You don't really want fonts to get too small on small devices, so I prefer not to change font sizes on smaller screens. Responsive design is more about the layout responding rather that the text size.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    font-size:100% is not the default? ;-)

    thank you Ralph.....

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    font-size:100% is not the default?
    It's probably not necessary now, but without that, some older browsers used to go haywire.

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you wish, you can use media queries to change the font size per device, such as larger size font for mobile devices and smaller size for desktop.

    One article suggested:

    body {
    font-size: 100%;
    @media (min-width: 40em) and (max-width: 55em) {
    font-size: 87.5%;
    }
    // we go back to 100%.
    @media (min-width: 70em) {
    font-size: 110%;
    }
    }
    Steve Husting

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there are some font size that can depends only for the screen. I think the best you can do is not to change the design also it is better you to have or make your own design so that it can give more attraction.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •