WordPress.org

Ready to get started?Download WordPress

Forums

Font Size (12 posts)

  1. nellie.g
    Member
    Posted 2 years ago #

    Hi there. I'm using the Sonar theme and have made a child theme. I want to make the font size bigger across the whole site. I read somewhere that it's better to have a relative size than an absolute one. Can someone help me with a little code? Where and how do I set the base font size? And then do I only use percentage for font-size throughout the rest of my CSS file?

    Thanks in advance!

    http://www.radioart.org/studioroot

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Base font sizes should be set on the body or html element. Any other font size rule should use % or (even better) ems.

  3. nellie.g
    Member
    Posted 2 years ago #

    So I should add it here?

    /* =Global Elements
    -------------------------------------------------------------- */
    
    /* Main global 'theme' and typographic styles */
    body {
    	background-color: #53A4E6;
    	background-image: url('images/default-bg.png');
    	background-repeat: repeat;
    	background-position: top center;
    	background-attachment: fixed;
    }

    should I add this?

    font-size: 16px

    and then what kind of numbers do I use in front of em? Is 2em, 2 x 16px?

    font-size: 2em

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    So I should add it here?

    Yes - unless you are using a child theme.

    should I add this?

    No. The base font size ideally should be set to 100%. See http://www.w3schools.com/css/css_font.asp

  5. nellie.g
    Member
    Posted 2 years ago #

    okay, thanks. I'm going to try adding this to my child theme

    body {
    	font-size: 100%
    }

    and then go through the rest of the CSS, find all the font-sizes and change them from px to ems using my child theme. Any of that sound horribly wrong?

  6. nellie.g
    Member
    Posted 2 years ago #

    I added the above code to my child theme and it only changed the font size in my sidebar menu. Nothing seemed to change in the text of my pages.

  7. esmi
    Forum Moderator
    Posted 2 years ago #

    That sounds perfect! As a general rule of thumb, when converting pixels to em, use a ratio of 1em = 11px. That should keep the font sizes pretty much the same on a browser with a default font of (say) 16px.

  8. nellie.g
    Member
    Posted 2 years ago #

    that's very helpful thank you esmi!

    now I haven't tried changing anything throughout the rest of my CSS so i'll go give that a shot.

  9. nellie.g
    Member
    Posted 2 years ago #

    now that I'm going through my CSS I'm realizing that most everything is measured in px including padding, margins, line height. If I change my font-sizes to be measured in ems then should I changed everything else too?

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    I don't think there is anything to be gained by changing padding & margins to a relative size unit except under special circumstances. Line height is an exception. It will work a lot better if you use the same unit of size for line-height as you use for font-size. Personally, I think a line-height of 1.3em to 1.5em works best for large blocks of text (eg your main content area).

  11. nellie.g
    Member
    Posted 2 years ago #

    Great thank you thank you. One more and then I'll stop pestering you.

    As a general rule of thumb, if there is not a font-size or line-height assigned will it default to the size I've specified in the body element?

  12. esmi
    Forum Moderator
    Posted 2 years ago #

    Yes unless it has a parent element - in which case it will inherit the parent's size.

Topic Closed

This topic has been closed to new replies.

About this Topic