What 'font' and 'size'?

Discussion in 'HTML & Website Design' started by master-yoda, Oct 26, 2009.

  1. #1
    Can someone please tell me what is the normal type of 'font' and 'size' used on a web page?

    I have been using 'Ariel' size '10' and someone who view my site said it was too small.
     
    master-yoda, Oct 26, 2009 IP
  2. Izikeo

    Izikeo Member

    Messages:
    122
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #2
    You could try the following website:

    theinternetdigest.net/archive/websafefonts.html

    And i usually work around 10 - 16px; Though seems 16px is the normal size.

    (Sorry it wont let me post the link)
     
    Izikeo, Oct 26, 2009 IP
  3. bindassdelhiite

    bindassdelhiite Active Member

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #3
    Hi buddy,

    Try this in your CSS file ..

    font: 13px/1 Arial;

    or this ..

    font: 12px Verdana;


    enjoy :)
     
    bindassdelhiite, Oct 26, 2009 IP
  4. janschroder

    janschroder Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    hi use this tag

    <h1><font face="arial" (or whatever you want)></h1>


    heading 1 will give you the biggest and after that going up it will give you little ones.

    now if you want to use size just use <font size="x">


    if you need extra help let me know and I will be happy to help.

    cheers
     
    janschroder, Oct 26, 2009 IP
  5. forextrendalerts

    forextrendalerts Guest

    Messages:
    132
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    On the 'font-size' property, these length units refer to the computed font ... In the third rule, the line height percentage refers to the font size of the alphabet....
    <font size="2" color="blue">This is some text!</font>
     
    forextrendalerts, Oct 27, 2009 IP
  6. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #6
    Font size: 16
    Font: Arial

    For accessability, you could add a javascript text sizer

    1
    2
    3
     
    scottlpool2003, Oct 29, 2009 IP
  7. casben79

    casben79 Guest

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    the safest thing to do in css is to specify a font family:

    p{
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px
    }

    that way, every computer will display something and the best way to see how well the size of a font works is to test the site for yourself and adjust as needed.
     
    casben79, Oct 29, 2009 IP
  8. saninfosys.com

    saninfosys.com Peon

    Messages:
    61
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Mostly website use font type "vardana" and font size "10 to 12px"
     
    saninfosys.com, Oct 29, 2009 IP
  9. nisar

    nisar Guest

    Messages:
    28
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    if i remember correct the sizes if just written without px are from 1 to 7 and each is 25% larger than the first if i am not mistaken. You can use h1 for largest size
     
    nisar, Oct 29, 2009 IP
  10. m30

    m30 Guest

    Messages:
    116
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    arial size 11
     
    m30, Oct 29, 2009 IP
  11. forextrendalerts

    forextrendalerts Guest

    Messages:
    132
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

    Some example size assignments would be:

    H1 { font-size: large }
    P { font-size: 12pt }
    LI { font-size: 90% }
    STRONG { font-size: larger }
     
    forextrendalerts, Oct 30, 2009 IP
  12. kasun0777

    kasun0777 Well-Known Member

    Messages:
    355
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    138
    #12
    use <font> tag
    <p><font family="arial">Your text</font></p>
    This text is already viewed in default font size..
    dont use font size
     
    kasun0777, Oct 30, 2009 IP
  13. scottlpool2003

    scottlpool2003 Well-Known Member

    Messages:
    1,708
    Likes Received:
    49
    Best Answers:
    9
    Trophy Points:
    150
    #13
    And why are we using HTML instead of CSS?

    HTML is no longer the normal form of coding a website but that's a story another day. Try and keep everything within a CSS stylesheet where possible.
     
    scottlpool2003, Oct 31, 2009 IP
  14. dj2oon

    dj2oon Active Member

    Messages:
    453
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #14
    hi the standard font is vardana for web. and font you can go of ur own occording to theme
     
    dj2oon, Nov 1, 2009 IP
  15. dj2oon

    dj2oon Active Member

    Messages:
    453
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #15
    and more over can check on google for the standard
     
    dj2oon, Nov 1, 2009 IP
  16. paultze

    paultze Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    you can compare to many others, especially your competitors or similar
     
    paultze, Nov 1, 2009 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Holy craptardo, how many people here said to use the <font> tag???

    It's deprecated, don't use the font tag unless you want to make the Baby Buddha cry.

    No matter WHAT size in px you choose, it'll be too small for someone, somewhere. So let people change their own sizes.

    element {
    font: 1em arial, helvetica, sans-serif;
    }

    Don't only list Arial, cause I doesn't has it, so my computer will put one of its own fonts on there instead (and the default is a version of times new roman). So always set defaults. If the computer doesn't have Arial, try Helvetica (older macs had Helvetica but not Arial). If neither, at least use a sans-serif font. Always set a font-group at the end, like serif, sans-serif, or monospace, so a similar font is chosen by the computer if none of your listed fonts are available.

    Arial and Helvetica are fairly popular sans-serif fonts. Verdana is more readable, but it's got a larger x-height (its letters are a bit bigger at the same font-size compared to other fonts) so if you try to list verdana with the others, you'll see a noticable size difference between computers who have verdana and those who don't (you will get the same problem with Georgia versus other serif fonts like Times). So I either don't use verdana, or I only list it with other large fonts:
    font-family: "bitstream vera sans", "dejavu sans", verdana, sans-serif;

    those first two are unixy fonts that also are a bit large.

    Don't set stuff in px. IE6 and below won't let people resize it. It's not their fault you chose a font too freakin small to read, now is it? Use something like em.

    It's only accessible if the people have Javascript on. Adding extra widgets excuses people from learning how to use their browsers. Want to browse the web? They should learn how their browser works.
     
    Stomme poes, Nov 2, 2009 IP
  18. mrpaisa

    mrpaisa Guest

    Messages:
    741
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    A specific size & style of type with in a type family or a complete set of character in a typeface. in the same way size having a specific size.
     
    mrpaisa, Jan 12, 2010 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #19
    Yeah... What's next, CENTER tags and TARGET attribute? That **** has no business on a new website.

    Fallback families are important and it's just part of why the FONT tag is miserable /FAIL/.

    It begs a question of the OP though, 10 what? 10px? 10em? 10 fajihata?

    10px is WAY below accessibility norms. It's REALLY a bad idea in the handful of cases where px has to be used (like on a image interaction with a fixed height background) to use anything smaller than 12px, and even then you can only get away with that if it's all-caps. I get twitchy on using PX metric fonts at anything less than 14px...

    PX is pretty much also an accessibility /FAIL/ for font sizes though, which is why you should use %/EM or as a last resort PT (since pt at least obeys the system metric) for any content. (basically anything that would go in a paragraph tag as a grammatical flow paragraph!)

    It's why 99% of the websites I develop these days starts out with this on BODY

    font:normal 85%/130% arial,helvetica,sans-serif;

    That sets the equivalent of 10pt text, aka 14px on 96dpi systems or 17px on "large font/120dpi" windows systems (like mine). Notice I also include a line-height. You CANNOT trust the default line-heights cross browser, so when you change font-size ALWAYS redeclare your line-height. I cannot count the number of amature websites that as a LF/120dpi user I visit and the text is damned near overlapping itself because someone forgot to set line-height properly.
     
    deathshadow, Jan 12, 2010 IP
  20. yesmate

    yesmate Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Use:

    font-family:Verdana, Geneva, sans-serif;
    font-size:12px
     
    yesmate, Jan 12, 2010 IP