WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Increasing Font Size (8 posts)

  1. Gail
    Member
    Posted 1 year ago #

    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

  2. Konstantinos Kouratoras
    Member
    Posted 1 year ago #

    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.

  3. Gail
    Member
    Posted 1 year ago #

    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;
    }
  4. Red Deer Web Design
    Member
    Posted 1 year ago #

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

  5. Gail
    Member
    Posted 1 year ago #

    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

  6. Gail
    Member
    Posted 1 year ago #

    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. :)

  7. Gail
    Member
    Posted 1 year ago #

    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!

  8. Konstantinos Kouratoras
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic