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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post

    Getting fonts to suit all resolutions

    Hi,

    I am just finishing off my website and would like to make the font smaller for smallers resolutions only. If not the font just looks a little big

    I was going to use media queries but discovered this does not work in IE8, can someone recommend another solution?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello charlyanderson,
    Not sure this will be flexible enough for you but I usually put something like this to establish a base size -
    Code:
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    And then declare an em size for whatever text I'm using -
    Code:
    #container {
    	width: 800px;
    	margin: 0 auto;
    	font-size: .75em;
    	background: #999;
    }
    h1 {font-size: 1em;}
    http://www.alistapart.com/articles/howtosizetextincss/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    charlyanderson (01-19-2013)

  • #3
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    I'll live it a go thank you. Just trying to get the fonts at a suitable size across the browsers. All this is just developing my hate for IE lol

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by charlyanderson View Post
    Hi,
    I am just finishing off my website and would like to make the font smaller for smallers resolutions only. If not the font just looks a little big
    I was going to use media queries but discovered this does not work in IE8, can someone recommend another solution?
    You might want to reconsider that, because people with a small resolution are used to big fonts. Or they have set the font rendering size of their browser to small(er). If you set a smaller font size as well, it will be too small.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #5
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    I am quite tempted Frankie, just didn't wanna seem unproffessional

  • #6
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    396
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Please do not try to control fonts. This is a user setting, and they know much better than you do what is appropriate for their situation. For accessibility NEVER set an absolute value for font size. Where you need bigger or smaller than the standard font size the user has set for most of the page specify a percentage value which will retain relative sizing without impinging on the users right to set whatever font size they are comfortable with.

    Cd&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by charlyanderson View Post
    I am quite tempted Frankie, just didn't wanna seem unproffessional
    Your intention was good, but the effect would have been undesirable. Because for those users who have set their browser to a small(er) font rendering, the font would have become too small. And Cd& has some good advice, too, regarding the absolute font size -- don't set that.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #8
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    Ok thanks I really appreciate your comments. I am very new to web design so still a little unsure of things. I have been using a HD screen with a high resolution for my designing so the design and font generally looks bigger on a standard monitor. I was just concerned about it looking too big and unprofessional.

    Having said that I am learning about responsive design now so perhaps for my next design I will do that instead. My website address is here. I am hoping that the final piece looks ok after all.

    Thanks again for all your comments


  •  

    Posting Permissions

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