Changing default font sizes

Discussion in 'CSS' started by JanetSystems, Jun 7, 2007.

0
  1. #1
    Hello,

    On a website I am providing 3 different CSS files for font scaling, the usual 3 font size 'A' icons. The client is able to edit their content and select a font-size In each I need to be able to set the font size.

    For example to define h1 to h6 we have

    h1 {
    font-size:12pt;
    }
    h2 {
    font-size:10pt;
    }

    I remember reading two points on this:

    1. The default font sizes 1 to 6 are pre-defined. Access to their settings is not available.

    2. Reference to the size parameter is as part of an array, similar to referencing items of the same name in JavaScript. However, comments and my experience from following the article showed it to be browser specific and not globally accepted. I don't recall the formatting used for this option, but may have been along the lines of size[3].

    [Please no comments on the suitability or otherwise on the use of the font size icons. :)]

    Thanks
    Neil
     
    JanetSystems, Jun 7, 2007 IP
  2. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #2
    All font sizes should be relative to a main font size (e.g. for <body>). Then you can use a JavaScript to change the body font size by 10% or something at a time. This can also work for those that don't have JavaScript with a little server side scripting.

    Anyway, <h1> to <h6> have pre-defined font sizes relative to body but can be changed as in your code snippet. Also, use pixels instead of points for web pages.
     
    krt, Jun 7, 2007 IP
  3. JanetSystems

    JanetSystems Peon

    Messages:
    20
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks,

    I've changed the CSS to using % references, as you suggest.

    Some text that is wrapped as:

    <p><font size="5">The is Size 5</font><p>

    remains at the same size, whilst all around change, according to the value set in the body.

    Is this due to an error on my part, in the CSS definition, or expected behaviour?
     
    JanetSystems, Jun 8, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Don't use pixels - Internet Explorer won't be able to reisze them. It's best to use a percentage (I recommend 100%) on the body, and then EMs on the containers holding the text. This will allow the user to change the text size without the need of a stylesheet switcher (though I'd keep the switcher as a back-up, and use a server-side programming language instead of JavaScript).

    Also, the font tag has been deprecated (rendered obsolete) and is slated for removal from the HTML specification. You'll be better off using CSS to style it instead.
     
    Dan Schulz, Jun 8, 2007 IP
  5. JanetSystems

    JanetSystems Peon

    Messages:
    20
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Regarding the use of the font tag my problem is that the output is from a CMS, using the FCK editor, and may include the use of the font tag.

    Noted, your comment on the deprecation of the font tag.

    Cheers

    Neil
     
    JanetSystems, Jun 12, 2007 IP