brightlemon web design london [accesskey: .] brightlemon london web design
company services products support case studies training resources contact us
Web contact
Call me back
Request a quote
PQQs/RFPs

Search blog

Pages
  • About the Brightlemon web design london blog

  • Archives
  • August 2009
  • July 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • December 2008
  • November 2008
  • October 2008
  • September 2008
  • August 2008
  • July 2008
  • June 2008
  • May 2008
  • April 2008
  • March 2008
  • February 2008
  • December 2007
  • November 2007
  • August 2007
  • July 2007
  • June 2007
  • May 2007
  • April 2007
  • March 2007
  • February 2007
  • January 2007
  • December 2006
  • November 2006
  • October 2006
  • September 2006
  • August 2006
  • July 2006

  • Categories
  • Accessibility (16)
  • Adobe (3)
  • ajax (3)
  • Analytics (1)
  • Apache (9)
  • Blogs (5)
  • Brightlemon news (19)
  • case study (8)
  • command line (6)
  • content management (4)
  • CSS (28)
  • database administration (1)
  • Design (11)
  • Dreamweaver (12)
  • Drupal (34)
  • Drupal configuration (22)
  • Drupal courses (4)
  • Drupal customisation (20)
  • Drupal development (27)
  • Drupal modules (22)
  • Drupal optimisation (13)
  • Drupal regions (9)
  • Drupal scalability (11)
  • Drupal styling (12)
  • Drupal Themes (19)
  • Drupal training (6)
  • Drupal video (10)
  • Drupal views (10)
  • e-commerce (6)
  • Email (2)
  • Errors (5)
  • Firefox Add-Ons (6)
  • Flash (18)
  • FTP (5)
  • HTML (20)
  • Illustrator (13)
  • Information Architecture (4)
  • Internet Security (10)
  • JavaScript (9)
  • javascript (3)
  • jquery (2)
  • LAMP (10)
  • Linux (12)
  • mathematics (3)
  • maths (3)
  • mobile web (2)
  • mysql (7)
  • Open Source (15)
  • Photoshop (22)
  • php (15)
  • Quality Assurance (4)
  • research & strategy (5)
  • Search engine optimisation (8)
  • seo (7)
  • Server administration (7)
  • Smarty (1)
  • social bookmarking (5)
  • social networking (15)
  • social tagging (4)
  • ssh (3)
  • subversion (2)
  • svn (1)
  • Tips (23)
  • typography (3)
  • Uncategorized (1)
  • Unix (4)
  • Usability (4)
  • Useful Links (14)
  • version control (1)
  • W3C (17)
  • Web 2.0 (44)
  • Web browsers (18)
  • Web design (84)
  • Web development (133)
  • Web marketing (5)
  • Web standards (12)
  • Web video (8)
  • xhtml (3)
  •       go - (© brightlemon web design london)
    « Illustrator CS3 for web (part 1) Checkout SVN with PHP »

    Typography 01 :: Font Basics - What Is X-Height, Leading, Kerning, Tracking, Ascender, Descender

    Anyone who uses a design or layout program whether for web or print will undoubtedly at some point be using the program’s font / type functions.

    What’s to know?

    Type is Type!

    Well even as a novice, after a little digging around apps like Photoshop, Illustrator, Quark, Indesign etc you find menus and pallets full of options for generating, and formatting type.

    Many of us understand enough to get by and rarely delve much deeper than changing font, size and colour.

    Some of the other options available may seem daunting or even irrelevant to the novice or casual user, but once understood can provide invaluable tools in controlling how type appears in our layouts.

    Below are some simple explainations of some of the standard text formatting options avaiable, supported by images from the tutorial video ‘Typographic Principles - Essentials’ available to view at the excellent lynda.com (subscription required.)

    1. X-height (the height of a font’s main body - not including ascenders or descenders)

    2. Leading (the space vertically between lines of text - name comes from the physical piece of lead that used to be used in mechanical printing process to separate lines of text)

    3. Baseline (the line accross the bottom of a font’s x-height - discounting descenders.)

    4. Kerning (the amount a character’s horizontal space encroaches into it’s neighbour.)

    typography-01

    5. Point size (or px size if using pixel based sizes for web.) - (The font size in pixels or points)

    6. Ascenders (parts of a character which ‘ascend’ above it’s x-height - upper staff of a lower case b,d,t etc )

    7. Descenders (parts of a character which ‘descend’ below it’s x-height - lower tail of a g or y etc.)

    typography-01

    8. Tracking (the horizontal space between each character)

    typography-01
    Here is also a brief depiction of the many versions of a font (in this case ‘Minion’) which can go to make an entire ‘font-family‘. * Note the difference between ‘italic‘ and ‘oblique‘. Italic is a specifically designed version of a font used for italics, Oblique is more like taking the normal ‘regular‘ -(some times called ‘book‘ or ‘Roman‘) member of the family and simply skewing it so that the existing characters lean in a ‘faux italic‘ manner. (This can be useful for instances where a flush baseline is desired but the forward leaning of an italic is necessary, such as logo work.)
    typography-01


    This entry was posted on Monday, May 19th, 2008 at 10:27 am and is filed under Web design, Useful Links, Photoshop, Illustrator, Design, typography. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

    Comments are closed.

    social networking
    e-commerce
    search engine optimisation
    web design
    content management
    accessibility
    brightlemon london web design
    UK and London web site visitors

    Visiting from the UK or London? Visit our London web site...