Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Font size woes

  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    Font size woes

    I am trying to create a truly liquid / scalable page.

    I have a site that has a few elements in it all based on percentage. In either 1920px or 1024px, they display exactly as they should. I also have a large header tag <h1> at the top. I set it to 4em, since that is the "elastic" way to do it. But the font was the same size (pixelwise) in the small and large browser -- losing its scalability. So I added
    Code:
    html{ font-size:100%; }
    body {font-size:1em;}
    and that did nothing. I played around some more, and couldn't figure it out.

    I am just looking for a way to display the font so that it scales with the browser, along with the rest of the elements. Example, it would technically show as 30px in a 1024px wide setting and show as a larger (40px?) when the browser size is larger.

    Is this doable with font?
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by boogily View Post
    Is this doable with font?
    Without scripting, I don't think this is currently possible in a cross-browser-compatible way.

    The CSS3 Values and Units module offers vh, vw, and vm units that are relative to the viewport dimensions, but I believe Internet Explorer 9 is the only browser that supports these three units at the moment.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Thanks for your reply. That's too bad. Hopefully in the future they can use a % based on screen width or height, not based off of pixel size or em.
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by boogily View Post
    Hopefully in the future they can use a % based on screen width or height, not based off of pixel size or em.
    If you're referring to the vh, vw, and vm units, they are percentage-based. For example, 100vh is equivalent to 100% of the height of the viewport. (If you're not familiar with the term "viewport," it refers to area available for site rendering in a Web browser.)

    The units won't help you if, by "screen," you literally mean the total screen area on a device though. For that, you'll need scripting.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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