www.webdeveloper.com
Results 1 to 5 of 5

Thread: scalable font size?

Hybrid View

  1. #1
    Join Date
    Jan 2007
    Posts
    110

    scalable font size?

    Hi, I stumbled on a problem, I am playing with responsive design, all my div, h and p elements are in percentage, so they all resize properly. but how do I do the same with font size? I read that em and percentage are good for resizing, but I tried it and it doesn't do a thing, what did I do wrong?

  2. #2
    Join Date
    Feb 2010
    Posts
    16
    Hard to tell without seeing your code. Are you setting percentages for the elements the text is in (including the body) as well as the 'em' sizes for the font?

    http://kyleschaeffer.com/user-experi...s-px-vs-pt-vs/

  3. #3
    Join Date
    Jan 2007
    Posts
    110
    Thanks for the reply.There is no need to see my code, I just need to know in general how to make the font size re sizable base on how visitors resize their browser windows.
    let's say a div Width is 80% and Height is 20%, the div resizes as expected but the text within is unaffected whether I use font-size 100% or 1em.

  4. #4
    Join Date
    Nov 2012
    Location
    Jakarta
    Posts
    42

    Lightbulb Not possible without scripting

    From the top of my head:
    This is not possible to do without Javascript. The idea of font in the web browser is to be fixed once it is fully loaded, resizing windows will not resize the font. There is no good UI reasoning in having it resized as the browser resized. Personally i find it better that the font is not resized, because when I resized, I simply want to hide some text or show some text. You are better off putting a zoom button, so the user can choose if he/she wants to enlarge the font size.

    Now, I also did a Google Search. All of them points to javascript:

    There is another thread on this forum you can read http://www.webdeveloper.com/forum/sh...-size-changes.

    You can use JQuery to do the trick you wanted:
    http://stackoverflow.com/questions/2...esizing-window

    Another JQuery, possibly not really related to your question, but a good implementation.
    http://stackoverflow.com/questions/6...size-container

    A zoom button solution for you
    http://mirificampress.com/permalink/...and_javascript

    The basic of font sizing for a page
    http://robertnyman.com/2007/02/27/ho...ntly-with-css/

    Good luck!

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    Might be of some help:

    http://responsivepx.com/

    Convert em,px,pt and % in CSS: http://www.getallfix.com/2011/11/con...pt-and-in-css/

    FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
    Adapt.js - Adaptive CSS: http://adapt.960.gs/

    Beginnerís Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
    What The Heck Is Responsive Web Design? (A super-impressive CSS3 presentation built on impress.js, demonstrating the basics of Responsive Web Design): http://johnpolacek.github.com/WhatTh...ressjs/#/title
    Creating Responsive HTML5 Touch Interfaces: http://www.youtube.com/watch?v=lcD9CF0bxyk
    Responsive Images: How they Almost Worked and What We Need: http://www.alistapart.com/articles/r...-what-we-need/
    Responsive Tables: http://www.zurb.com/playground/responsive-tables

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