• Resolved Gail

    (@gail65)


    I would like to increase the overall size of the font in my theme. Everything is just a tad bit too small for my taste. I changed it once in the past without any trouble, but after having to uninstall and reinstall my theme earlier today over font problems, I want to make sure I am doing this right. Can someone offer some advice on what I should change in my style.css to make the font larger across the board on my blog?

    http://dappledthings.me

Viewing 7 replies - 1 through 7 (of 7 total)
  • Your style.css is using em for font sizes, so all you have to do is to set a font-size in the body element of your stylesheet (eg. 120%) and all fonts will become larger.

    Thread Starter Gail

    (@gail65)

    Would you be so kind as to tell me precisely where? As you can see, I’ve bumped the only percentage I could find in my style.css from 100% to 120% without being able to see any difference in font size. Is this because it is just outside of the actual body tag? I don’t see anything except em designations after that one percentage at the top.

    /*
    Theme Name: Melville
    Theme URI: http://madebyraygun.com/labs/melville
    Description: A clean journal theme with great typography
    Version: 1.0.2
    Author: Dalton Rooney
    Author URI: http://madebyraygun.com
    Tags: clean, basic, typography, minimalist, white, single column
    
    Based on TwentyTen, the default WordPress theme
    */
    
    /* @group Google Font Loader */
    
    #site-title a, #content h1.entry-title, #content h1.page-title, #content h2.entry-title, span.cap {
    	visibility: hidden;
    }
    
    .wf-active #site-title a, .wf-active #site-title a, .wf-active #content h1.entry-title, .wf-active #content h1.page-title, .wf-active #content h2.entry-title, .wf-active span.cap, .wf-inactive #site-title a, .wf-inactive #site-title a, .wf-inactive #content h1.entry-title, .wf-inactive #content h1.page-title, .wf-inactive #content h2.entry-title, .wf-inactive span.cap {
    	visibility: visible;
    }
    
    /* @end */
    
    /* @group Reset */
    
    /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
    html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
    table { border-collapse:collapse; border-spacing:0 }
    fieldset, img { border:0 }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
    ul li { list-style:none }
    caption, th { text-align:left }
    h1, h2, h3, h4, h5, h6 { font-size:120%; font-weight:normal }
    q:before, q:after { content:''}
    
    /* Global reset-RESET */
    /* The below restores some sensible defaults */
    strong { font-weight:bold }
    em { font-style:italic }
    a img { border:none } /* Gets rid of IE's blue borders */
    
    /* @end */
    
    /* @group Body */
    
    body {
    	font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    	font-size: 0.9em;
    	color: #555555;
    	background: #eeeeee url(images/bg.png);
    	text-align: left;
    	line-height: 1.3em;
    	margin: 0;
    	text-shadow: #fff 0 0 1px;
    }

    in your body tag replace font-size: 0.9em to font-size: 1.3em

    Thread Starter Gail

    (@gail65)

    Well, is there anyway to get a happy medium between 0.9em and 1.3em? As you can see on my site, the font has gone from extremely small to extremly large.

    http://dappledthings.me

    Thread Starter Gail

    (@gail65)

    Hmm… Well, I just set it as 1.125em which is supposed to be the equivalent of 18px. Does that still look too large? Just looking for an opinion now. Thanks for the help with changing the font size. 🙂

    Thread Starter Gail

    (@gail65)

    I guess I’ll just have to tinker with it. It looks nice on my desktop, but too big on my laptop. I guess I should check on which screen resolution is the most popular. Thanks for your help!

    You can use media queries to check screen resolution and set the font size.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Increasing Font Size’ is closed to new replies.