www.webdeveloper.com
Results 1 to 5 of 5

Thread: Font scaling in responsive design

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185

    Font scaling in responsive design

    I just did a search and can't find any posts here on font scaling.

    I am new to responsive website design. I have a simple layout with a grid. I have some text in an "H2" tag which is set up as "font-size : 2.75em;".

    This text is set up in one of the grid columns in the middle of the page.

    Unfortunately, this text does not resize as as the width of the page is made smaller, which forces other content on the same line to drop down below it.

    What am I missing?

    Lawrence
    Larry

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    I'll first clear up some confusion I think you may have about font-scaling. While you are using ems as your unit (which is good), fonts do not scale as you resize a window. Unless you explicitly set font-size rules for various window widths (via media queries), your fonts will remain the same size.

    However, this doesn't mean they are the same size for every user (ie, mobile users). EMs are relative to a base font-size. And if you set up the document's CSS correctly then when you actually load the page on a mobile device, the font-size will have scaled to a size appropriate to the device.

    In my findings on 'responsive fonts' I've found it's best to set your body's CSS font-size to a percent. This way the default font-size for your page is determined by the browser (and can be adjusted by you without specifying an exact value). From there, using ems will set the font-size of various elements all relative to this base value. When you are on a desktop, the browser you use will have it's default font-size and all of your fonts will be set relative to that font-size. But when the same page is loaded on a mobile device, that mobile device's browser determines the default font-size and all of your font-sizes set with ems are set relative to this. At no point will changing the size of a window cause a font-size to change (using ems, percents, pxs or any other unit for font-sizes). It's only via media queries that you can actually have the font-size change from its initial value on a page after it has loaded.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    185
    Quote Originally Posted by Sup3rkirby View Post
    I'll first clear up some confusion I think you may have about font-scaling. While you are using ems as your unit (which is good), fonts do not scale as you resize a window. Unless you explicitly set font-size rules for various window widths (via media queries), your fonts will remain the same size.

    However, this doesn't mean they are the same size for every user (ie, mobile users). EMs are relative to a base font-size. And if you set up the document's CSS correctly then when you actually load the page on a mobile device, the font-size will have scaled to a size appropriate to the device.

    In my findings on 'responsive fonts' I've found it's best to set your body's CSS font-size to a percent. This way the default font-size for your page is determined by the browser (and can be adjusted by you without specifying an exact value). From there, using ems will set the font-size of various elements all relative to this base value. When you are on a desktop, the browser you use will have it's default font-size and all of your fonts will be set relative to that font-size. But when the same page is loaded on a mobile device, that mobile device's browser determines the default font-size and all of your font-sizes set with ems are set relative to this. At no point will changing the size of a window cause a font-size to change (using ems, percents, pxs or any other unit for font-sizes). It's only via media queries that you can actually have the font-size change from its initial value on a page after it has loaded.
    Thank you so much for clearing this up for me.

    I have been designing web sites since the Internet accepted graphics in addition to text (in mid the '80's maybe). I am an old fart who hand codes everything, and moving into responsive website design is all new for me. I am working on my first responsive website.

    I have watched a number of training courses on Linda.com, but I must have missed this point on font-site change.

    Lawrence
    Larry

  4. #4
    Join Date
    Mar 2012
    Posts
    1,514
    Hi Larry,

    I would caution against resizing the fonts dynamically. It's a technique that is fine for graphics, but not such a good idea for text. Why? Because it could annoy the users. A better way to avoid the text moving about when the window is resized is to use media-specific style sheets (or media queries) based on device-width instead of width. Then for any given display size the display appears static, but is different for different display sizes. This is a much more subtle approach.

  5. #5
    Join Date
    May 2014
    Posts
    911
    Quote Originally Posted by jedaisoul View Post
    I would caution against resizing the fonts dynamically.
    I'm with you on that -- a lot of websites now are screwing around changing the font size based on width, and as a user it's annoying the hell out of me because I'm not rocking a 2560x1440 display to get the same amount of content on the screen as I do on my 1024x800 handheld.

    At the same time I'm always complaining about people who declare fonts in pixels, as EM is the "way to go". As a 8514 / 20px / Large Fonts / 120dpi / 125% / windows 7+ medium / whateverTheDevilTheyAreCallingThemThisYear user, I expect the fonts on a website to automatically enlarge that 125%; it annoys me no end when I have to dive for the zoom just because someone doesn't know how to style a page.

    The laugh being I include these forums in that -- since they too use inaccessible absurdly undersized fixed metric fonts; thankfully I'm used to that and am able to use user.css (in Opera 12.17, the REAL O instead of Chrome with the Opera logo slapped on it) to override the stylesheet with the traditional:

    Code:
    * {font-size:100% !important; line-height:150% !important; }
    body { font-size:85% !important; }
    Makes headings the same size as text unfortunately, but at least it makes the text a legible size since I'm not one of those people who has or wants that default 16px.

    Using one of my sites as an example, http://www.ewisusb.com

    Content fonts and my semi-fluid widths are declared in %/em -- meaning that in addition to it being semi-fluid and responsive it's also elastic. So for example the default appearance:

    http://www.cutcodedown.com/images/ew...omNormal96.jpg

    ... and how it renders on my machine:

    http://www.cutcodedown.com/images/ew...mNormal120.jpg

    Notice that the images don't change size even though the fonts and layout does.

    A properly written modern layout should be responsive, semi-fluid AND elastic. Anything less is an accessibility mess. %/em as font-size is just part of making that elastic layout.
    Last edited by jedaisoul; 05-30-2014 at 03:32 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles