SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Best Font Reset Method? Some Help Needed

    I am currently getting very annoyed with not feeling like i am in control of the font size in sites i do.

    Currently i have this.

    Code:
    * {
    	margin:0;
    	padding:0;
    
    }
    
    html{font-size:62.5%;}
    
    body {
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    
    p,h1,h2,h3,h4,a,a:hover {
    font-size: 1.2em;
    }
    Now the point of this was to hopefully, was to just set all fonts at 1.2em (12 pixels) Then change the sizes accordingly in each area of the site.

    However, for some reason this would not work. In particular a links would quite clearly be bigger than the text right next to them. Even though they should all be 12pixels (1.2em)

    Am i doing something blatantly wrong, or has anyone got another method for this. Its something that i wouldn't mind cracking, so i know all fonts will be the same size at the start regardless.

    Many thanks for any help

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing that the <a> you are referring to is embedded within a <p> in which case you'll be seeing the 1.2em + 1.2em for the links which is obviously where the larger size is coming from so you're getting into problems with inheriting styles.

    I'd always set my base font size on my body (not on the html as you have it)

    Code:
    body {
      font-size: 93&#37;;
    }
    which will take care of the base font for everything on the page so there's no need to then go and set 1.2em for each individual element after this as 93% will automatically set everything to 12px. (apart from forms but I'll come onto that).

    You should then over-ride this for other areas where you want to make your font larger or smaller.

    For example

    Code:
    h1 {
      font-size: 1.4em;
    }
    Forms are a little trickier as some browsers won't automatically inherit font-family or font-size so you'll need to either set : inherit specifically or re-write the rule.

    Hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Austin
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An em is a relative unit. The way that you have set your font size, any child will be 1.22ems relative to its parent. So naturally a link will be larger than the surrounding text because the anchor element is a child of the paragraph element.

    Change 1.2em to 1em and then the size will be consistent (each child being 100&#37; of its parent). You may need to increase the font-size on your html selector to achieve your desired size.

    My personal preference is to use the body selector to reset the font-size to 13px, and then use percents if I want to increase or decrease a particular selector. You really shouldn't need that second declaration when you're just going to set it to 1em or 100%.
    Last edited by abilstein; Sep 28, 2007 at 06:12. Reason: csswiz beats me to the punch again :)

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that guys.

    I just wanted a set template which i could use with ems so they get larger and smaller nicer than pixels.

    But still know what something is in pixels, because i am usually given ideas where the font size is in pixels.

    Is there anyway round the parent thing? So an a tag will always be a default size that i set regardless whether its on its own or a child of a p tag?

    Thanks again, very helpful

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, just set it on the body the same as my example above

    In your method what you're doing is saying you want all <p> tags to be 1.2em (or 120&#37 larger than you're base font.

    This will make all text within a <p> 120% of the base font and ignores the fact that it may have children, including the <a>

    You're then also saying that you want the <a> to be 120% of of a <p> which already has the 120% applied to it.

    In the example you've given, you'd achieve the correct styling by just removing the a and a:hover from the styles but as I've pointed out, you're really doing double the work needed anyway by specifying the font-size twice, when really you can just specify a % or em that you want to use, directly on the body tag

    Hope that makes more sense.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    I'm guessing that the <a> you are referring to is embedded within a <p> in which case you'll be seeing the 1.2em + 1.2em for the links which is obviously where the larger size is coming from so you're getting into problems with inheriting styles.

    I'd always set my base font size on my body (not on the html as you have it)

    Code:
    body {
      font-size: 93%;
    }
    which will take care of the base font for everything on the page so there's no need to then go and set 1.2em for each individual element after this as 93% will automatically set everything to 12px. (apart from forms but I'll come onto that).

    You should then over-ride this for other areas where you want to make your font larger or smaller.

    For example

    Code:
    h1 {
      font-size: 1.4em;
    }
    Forms are a little trickier as some browsers won't automatically inherit font-family or font-size so you'll need to either set : inherit specifically or re-write the rule.

    Hope that helps.
    Thanks again for this, i am now trying the above but i am having the some problems?

    Code:
    * {
    	margin:0;
    	padding:0;
    }
    
    body {
    font-size: 93%;
    }
    
    ul#topDetails{
    	color: white;
    	font-size: 1.2em;
    	line-height: 1.8em;
    	margin-left: 20px;
    }
    
    #topDetails li{
    	list-style:none;
    	display: inline;
    }
    
    #topDetails li a{
    	font-size: 1.2em;
    	color: white;
    	text-decoration: none;
    }
    
    #topDetails li a:hover{}
    A simple list nav, one with a link the other one just normal text.

    So i set up the font-size but 1.2em is not the same as 12px which i kind of wanted so i know what the equivalent is in pixels.

    Also the none text is smaller than the a link text, even thought i have set them up with the same size. Why? I dont get it surely it should be the same size?
    They are just in a simple holder, no font size set up for that the list is not in a <p> tag or anything, just a list inside a div and the text sizes are different.

    Is there no way to set up all the font size, regardless of link. So when i type something and tell it to be 1.2em for example then give it a link it will still be 1.2em.

    Its so frustrating

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the code you've posted above, there's no need to include the font-size: 1.2em as the 93&#37; font-size that you've set on the body will make all elements 12px by default.

    You only need to alter this if you need to go larger or smaller than 12px.

    Therefor, by setting the font-size: 93%; on the body, 1em is equal to 12px.

    Use more than 1em or 100% if you want to increase the font, whilst you can use less than 1em or 100% to decrease the font.

    Hope that makes sense?


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
  •