Typography Web Design :: webdev
Leading
In typography, leading refers to the amount of vertical spacing between lines of types. In consumer-oriented processing software, this concept is usually refered to as line spacing and the inclusion of a full line of space between each line is known as double spacing. In page layout software (QuarkXPress, InDesign), the term leading is still used. Leading is sometimes confused with tracking, which refers to the horizontal spacing between letters and characters.
In CSS, leading is implemented by creating a difference between the content height and the value of the line-height property. Half the leading is called the half-leading. User agents center glyphs vertically in an inline box, which adds half-leading on the top and bottom. For example, if a piece of text is 12px high and the line-height value is 14px, 2px of extra space should be added; 1px above and 1px below the letters.
Proportional Leading - leading in a fluid layout should be responsive to the width of the columns of text. As the width of the measure (line width) becomes wider, leading (line-height) should be increased to aid readability. The wider the measure becomes, the more open the leading.
ClearType was first announced at the November 1998 COMDEX exhibition. The technology was first introduced in software in January 2000 as an always-on feature of Microsoft Reader, which was released to the public in August 2000. ClearType was later introduced as an operating system feature in Windows XP, where it was kept turned off by default. In Windows Vista, ClearType is turned on by default. In Microsoft Office 2007, Internet Explorer 7 and Windows Live Messenger ClearType is turned on by default, even if it is not enabled throughout the operating system. ClearType is also an integrated component of the Windows Presentation Foundation text-rendering engine.
ClearType tuning
Windows, out of the box, only allows ClearType to be turned on or off. However, there are other parameters that can be set via a ClearType tuner utility that Microsoft makes available as a free download from its site. The tool can also be used for tuning Windows Vista and Windows 7 ClearType settings, on Windows 7 it comes preinstalled and is located inside Control Panel\Appearance and Personalization\Display\Adjust ClearType text. Switching off ClearType disables ClearType completely, as expected, unless the application uses its own ClearType controls, separate from the OS level ones.
The tuner has wizard and advanced modes that adjust the same parameters visually or by direct selection:
- Cleartype on/off
- RGB or BGR sub pixel structure, though BGR is quite rare, so the default works for most monitors
- Contrast
Microsoft Reader has a similar ClearType tuner that only affects that program.
It may not be always possible for all monetary symbols to vertically align and have advance widths equal to the figures. In fonts with proportionally spaced figures the monetary symbols should be proportional. Meaning symbols that do not comfortably fit on a figure width should be made larger or smaller to compensate for the width of the image. Fonts with tabular figures should have monetary symbols that are tabular so when they are used for monetary amounts in columns or spreadsheets the data will align.
- Dollar
- Unicode: U+0024
Design : Its actual design origins are unknown but most scholars believe it to be derived for the Spanish peso of the 1700s. The myth that the double barred version 'escudo' is derived from the overlapping of 'U' and 'S' has been proven to be a clever repeated mistruth with no historical basis.
Alignment : Visually aligns with figure height, actual distance of the top of the 'S' portion of the dollar is usually lower than the figure top overshoot and/or figure bottom overshoot.
Advance width : Advance width should be the same as the figure space width.
Spacing : This character should space between figure zeros.
- Cent
- Unicode: U+00A2
Alignment : Most designs are made from the lowercase 'c' and align with the lowercase overshoots top and bottom or visually center on the figure height. These two alignments are equally common.
![]()
- Pound sterling
- Unicode: U+00A3
Alignment : Aligns with the figure heights.
Advance width : Advance width should be the same as the figure space width.
Spacing : This character should space between figure zeros.
- Currency symbol
- Unicode: U+00A4
Design : The weight of the symbol should match the weight of the font. As an example, the regular weight font should have a lighter version of the symbol than the bold weight.
Alignment : Visually centers on the figure height.
Advance width : Advance width should be the same as the figure space width.
Spacing : This character should space between figure zeros.
- Yen
- Unicode: U+00A5
Design : Current design tastes do not accept the style used prior to the 1980's. These earlier designs with two bars crossing at the middle stem, well below the junction of the top diagonal strokes are now considered incorrect.
Today the most common Yen designs are with two or one bar crossing through the 'Y' of the yen. The one bar design is more rare. With two bars the top bar crosses through at the junction of the top diagonal strokes while the lower bar crosses through the main stem. With one bar the placement is slightly lower just under the junction of the diagonals.
Alignment : Aligns with the figure flat height and baseline.
Advance width : Advance width should be the same as the figure space width.
Spacing : This character should space between figure zeros.
- Lira
- Unicode: U+20A4
Design : The Lira is of the same basic design as the Pound Sterling but with two horizontal bars instead of one.
Alignment : Aligns with the figure heights.
Advance width : Advance width should be the same as the figure space width.
Spacing : This character should space between figure zeros.
- Franc
- Unicode: U+20A3
Design : There are three common types of designs from the Franc. Type companies have been supplying an 'F' with small 'r' design or an 'F' with a horizontal bar. Common usage in France is to use an uppercase or superior F to represent the French Franc.
Alignment : Aligns with the uppercase flat height.
Advance width : Advance width should be the same as the figure space width.
Spacing : Spaces between figure zeros.
- Peseta
- Unicode: U+20A7
Design : Design : Similarly to the French Franc the Spanish Peseta has two possible forms. One is an uppercase 'P' with a horizontal bar traveling through the upper bowl of the 'P'. The second and most common design supplied in fonts is the 'Pts' form of a ligature made from the uppercase 'P' lowercase 't' and lowercase 's'.
Alignment : Aligns with the uppercase flat height.
Advance width : Advance width should be the same as the figure space width when the design allows. Otherwise the 'P' and 'Pts' form widths are proportional to the design.
Spacing : This character should space between figure zeros.
Typographic quotation marks
- Double baseline quotation mark
- Unicode: U+201e
This character is commonly made by shifting the right double quote to the position of the single baseline quote U+201d.
Advance width : The advance width of the double low quotation mark is the same as the double right quote.
Height alignment : This character aligns on the baseline at similar height as the comma and single baseline quote.
Pointing quotation marks - Guillemets
These quotation marks commonly called 'French quotes' or 'duck's feet' are said to have been named after a French typecutter Guillaume (William) Le Bé. Guillemets is the French word for quotation marks. The similarly named Guillemot is a narrow billed, sea auk with duck like feet found in cold northern regions of the world.
These pointing quotation marks are used in many languages and point differently dependent on the language. The German language uses these quotation marks with the right pointing guillemets as the open quotation marks and the left pointing guillemts as the close quotation marks. In French typography the left pointing quillemets are used as the open quotation marks and the right pointing quillemets are the closing quotation marks.
Traditionally in French typography the left pointing guillemets are followed by a non-breaking word space or thin space of 1/8 the em and the right proceeded by a non-breaking word space or thin space of 1/8 the em.
- Single left pointing quillemet
- Unicode: U+2039
Advance width rule : This character's advance width is proportional and the same as the single right pointing guillemet.
Height alignment : This character aligns on the lowercase x-height at the same vertical height as the single right guillemet.
- Single right pointing quillemet
- Unicode: U+203a
Advance width rule : This character's advance width is proportional and the same as the single left pointing guillemet.
Height alignment : This character aligns on the lowercase x-height at the same vertical height as the single left pointing guillemet.
- Left pointing quillemets - guillemet ouvrant
- Unicode: U+00ab
Advance width rule : This character's advance width is proportional and the same as the right pointing guillemets.
Height alignment : This character aligns on the lowercase x-height with the same vertical alignment as the right pointing guillemets.
- Right pointing quillemets - guillemet fermant
- Unicode: U+00bb
Advance width rule : This character's advance width is proportional and the same as the left pointing guillemets.
Height alignment : This character aligns on the lowercase x-height with the same vertical alignment as the left pointing guillemets.
Language note : In French typographic usage the left pointing guillemet - guillemet ourvant is followed by a non-breaking word space (espace mots insécable) and the right pointing guillemet - guillemet fermant is preceded by a non-breaking word space. In Microsoft Word 97 the non-breaking space U+00A0 is automatically inserted when the French language is selected and a guillemet is typed. Some French typographers prefer to use a non-breaking thin space (espace fine insécable) with the guillemets.
Question mark and exclamation mark
- Question
- Unicode: U+003F
- Exclamation
- Unicode: U+0021
Advance width rule : There is no requirement for the advance width of these characters with the exception of the inverted question and inverted exclamation. These two characters should be on the same unit value as the upright question and exclamation, respectively and be a 180 degree rotation of the question and exclamation marks.
Height alignment : There is no absolute requirement for top alignment of the question and exclamation. They are typically the same in height as the uppercase round characters. The bottom dot aligns with the lowercase overshoot in round designs and the baseline in square designs.
Language note : In French typographic usage the question and exclamation marks (point d'exclamation et point d'interrogation) are preceded by a non-breaking thin space (espace fine insécable) and followed by a normal word space. In Microsoft Word 97 the non-breaking space U+00A0 is automatically inserted when the French language is selected and a exclamation or question mark are typed.
- Inverted question
- Unicode: U+00BF
- Inverted exclamation
- Unicode: U+00A1
The inverted question and inverted exclamation have two possible alignments.
X-height alignment : In most text fonts the inverted question and inverted exclamation tops align with the lowercase x-height. In a round design the lowercase x-height's overshoot. The bottom should not exceed the lowercase descender value. In this case many type designers use an uppercase alignment method or shorten and redesign the glyphs.
Uppercase alignment : This is a simple 180 degree rotation with no vertical offset from the position of the question and exclamation. Used very commonly in display fonts and modern designs.
Spacing : Visually center between uppercase H and O.
Additional symbols in PC code pages
Unicode characters U+2190 through U+266B
Characters in this range are commonly referred to as 'universal math and symbol characters'. Many of these characters in this range are resident in the original set of Microsoft Windows core fonts Times New Roman, Arial and Courier New and most printer resident font formats. In these Microsoft core fonts all symbols are designed specifically to match the style of the host font or typeface family.
- Estimated
- Unicode: U+212E
Design : This character could be considered a logotype. It is used in Europe for product packaging to show the estimated volume of the product. Its design is a standardised shape of a sans serif lowercase e with straight inner contours.
Alignment : This symbol varies in size but sits on the baseline in all designs.
Advance width : The Advance width is proportional to the design.
- Single prime mark
Unicode: U+2032
- Double prime mark
- Unicode: U+2033
Prime and double prime marks, also called minute and second, are used in the abbreviations for inches, feet, minutes and seconds. The angle of these characters is commonly a slight italic angle of approximately 75..80 degrees on both roman and italic fonts. Perfectly vertical is considered 90 degrees. The single neutral quote U+0027 and double neutral quote U+0022 are often used as substitutes or equivalents for these two characters.
Advance width rule : The advance width of the single prime mark is proportional to the design and the double prime mark is commonly not greater than two times the advance width of the single prime mark.
- Numero mark
- Unicode: U+2116
The numero mark resides in Unicode in the section 'Letterlike Symbols'. It is used in several languages as an abbreviation for the word number. It is a very commonly used abbreviation in the French language and it is almost always typed manually with either an uppercase N or lowercase n and a degree symbol.
Example: the common French abbreviation for the word Number would be N° and number would be n°.
The numero is also used in the Cyrillic code page 1251 for Microsoft Windows at position alt-0185 (xB9).
Advance width rule : The advance width of the numero is proportional to the design.
Typekit
<script type="text/javascript" src="http://use.typekit.com/wlv8ght.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
EOT Lite - a new web font format
Ascender supports the EOT Lite web font format because it is platform independent and offers the potential for interoperability among browsers. One of the main benefits of EOT Lite is its ability to support legacy versions of Internet Explorer (IE 4 to 8).
- Arm/leg
- An upper or lower (horizontal or diagonal) stroke that is attached on one end and free on the other.
- Ascender
- The part of a lowercase character (b, d, f, h, k, l, t) that extends above the x-height.
- Bar
- The horizontal stroke in characters such as A, H, R, e, and f.
- Bowl
- A curved stroke which creates an enclosed space within a character (the space is then called a counter).
- Cap Height
- The height of capital letters from the baseline to the top of caps, most accurately measured on a character with a flat bottom (E, H, I, etc.).
- Counter
- The partially or fully enclosed space within a character.
- Descender
- The part of a character (g, j, p, q, y, and sometimes J) that descends below the baseline.
- Ear
- The small stroke that projects from the top of the lowercase g.
- Link
- The stroke that connects the top and bottom part (bowl and loop) of a two-story lowercase g.
- Loop
- The lower portion of the lowercase g.
- Serif
- The projections extending off the main strokes of the characters of serif typefaces. Serifs come in two styles: bracketed and unbracketed. Brackets are the supportive curves which connect the serif to the stroke. Unbracketed serifs are attached sharply, and usually at 90 degree angles.
- Shoulder
- The curved stroke of the h, m, n.
- Spine
- The main curved stroke of the S.
- Spur
- A small projection off a main stroke found on many capital Gs.
- Stem
- A straight vertical stroke (or the main straight diagonal stroke in a letter which has no verticals).
- Stress
- The direction of thickening in a curved stroke.
- Stroke
- A straight or curved line.
- Swash
- A fancy flourish replacing a terminal or serif.
- Tail
- The descender of a Q or short diagonal stroke of an R.
- Terminal
- The end of a stroke not terminated with a serif.
- X-height
- The height of lowercase letters, specifically the lowercase x, not including ascenders and descenders.
Leading
Leading is essentially the vertical space between the lines of type. Leading is something that so many designers forget about, its easy just to stick with the auto settings. But trust me, this can make or break a document. Pay close attention to your leading. I personally like to keep my leading tight, but without ever overlapping. Usually I will go for a little above the font size, slightly below the auto setting. This works especially well with helvetica like typefaces. Either way, there should not be too much space, and the letters should not overlap at all!
Kerning
Kerning is the spacing between letters. Again, like leading this seems like an obvious one, but still needs careful attention. Consider if your typeface generally needs spacing out more, or if it looks better with tighter kerning. I always prefer helvetica and futura manually tightened as they have quite a bit of space between letters on the normal setting. Also it is worth taking special care with specific characters. Again, no characters should overlap. An example of this is for helvetica r and t characters together. Be worth kerning manually in this case.
Definitely an example of a font that you downloaded
Definitely an example of a font that you downloaded
MAKE A SEPARATE PAGE FOR PERIODIC TABLE OF TYPOGRAPHICAL ELEMENTS!!
Typography Web Design :: webdev
