X-height: Difference between revisions

Content deleted Content added
Dexbot (talk | contribs)
m Bot: Cleaning up old interwiki links
 
(34 intermediate revisions by 23 users not shown)
Line 1:
{{Short description|Measurement of letters in a typeface}}
{{lowercase}}
[[Imagefile:Typography Line Terms.svg|rightthumb|410pxupright 2.0|alt=A diagram showing the line terms used in typography]]
In [[typography]], the '''x-height,''' or '''corpus size,''' refers tois the distance between the [[baseline (typography)|baseline]] and the [[mean line]] of lower-caselowercase letters in a [[typeface]]. Typically, this is the height of the letter ''x'' in the font (the source of the term), as well as the letters ''v'', ''w'', and ''z''. (Curved letters such as ''a'', ''c'', ''e'', ''m'', ''n'', ''o'', ''r'', ''s'', and ''u'' tend to exceed the x-height slightly, due to [[overshoot (typography)|overshoot]]; ''i'' has a dot that tends to go above x-height.) One of the most important [[Typographic unit|dimensions of a font]], x-height is used to definedefines how high lower-caselowercase letters without [[ascender (typography)|ascender]]s are compared to upper-casethe [[cap height]] of uppercase letters.
 
[[File:Regular and caption fonts.png|thumb|Regular and caption styles of two open-source typefaces, [[PT Sans]] and [[Garamond|EB Garamond]]. The caption styles both have increased x-heights to make the text clear even printed small. EB Garamond's is also very visibly bolder.]]
In [[typography]], the '''x-height''' or '''corpus size''' refers to the distance between the [[baseline (typography)|baseline]] and the [[mean line]] of lower-case letters in a [[typeface]]. Typically, this is the height of the letter ''x'' in the font (the source of the term), as well as the ''v'', ''w'', and ''z''. (Curved letters such as ''a'', ''c'', ''e'', ''m'', ''n'', ''o'', ''r'', ''s'', and ''u'' tend to exceed the x-height slightly, due to [[overshoot (typography)|overshoot]].) One of the most important dimensions of a font, x-height is used to define how high lower-case letters are compared to upper-case letters.
[[File:Original-CG.gif|thumb|French renaissance typefaces, 1592. The smaller typeface at the bottom has a proportionally higher x-height.{{efn|The name "Petit Canon de [[Claude Garamond|Garamond]] is a mistake; it is actually by [[Robert Granjon]].<ref>Vervliet 2008, p. 220; Type Specimen Facsimiles, p. 3</ref>}}]]
[[Display typeface]]s intended to be used at large sizes, such as on signs and posters, vary in x-height. Many have high x-heights to be read clearly from a distance. This, though, is not universally the caseuniversal: some display typefaces such as [[Cochin (typeface)|Cochin]] and [[Koch-Antiqua]] intended for publicity uses have low x-heights, to give them a more elegant, delicate appearance, a mannerism that was particularly common in the early twentieth century.<ref>{{cite web|title=Chaparral® Pro release notes|url=http://www.adobe.com/type/browser/pdfs/readmes/ChaparralProReadme.pdf|website=Adobe|publisher=Adobe|accessdateaccess-date=5 November 2014}}</ref><ref name="Letters of Credit">{{cite book|last1=Tracy|first1=Walter|title=Letters of Credit|date=1986|pages=48–55|chapter=Proportion}}</ref> Many sans-serif designs that are intended for display text have high x-heights, such as [[Helvetica]] or, more extremely, [[Impact (typeface)|Impact]].
[[File:Thank You (13824254433).jpg|thumb|Extra-small x-height in handwritten (but non-cursive) sign]]
 
==Design considerations==
Medium x-heights are found on fonts intended for body text, allowing more balance and contrast between upper- and lower-case[[lowercase]] letters and a brighter page. They then increase again for [[Font#Optical size|optical sizes]] of fontfonts designed for small print, such as captions, so that they can be clearly read printed small.<ref>{{cite web|title=Optical Size|url=http://www.adobe.com/uk/type/topics/opticalsize.html|publisher=Adobe|accessdateaccess-date=7 November 2014}}</ref><ref name=MicroPlus>{{cite web|last1=Frere-Jones|first1=Tobias|title=MicroPlus|url=https://frerejones.com/blog/introducing-microplus|publisher=Frere-Jones Type|accessdateaccess-date=1 December 2015}}</ref>
[[File:Regular and caption fonts.png|thumb|Regular and caption styles of two open-source typefaces, [[PT Sans]] and [[Garamond|EB Garamond]]. The caption styles both have increased x-heights to make the text clear even printed small. EB Garamond's is also very visibly bolder.]]
[[File:Original-CG.gif|thumb|French renaissance typefaces. The smaller typeface at the bottom has a proportionally higher x-height.]]
[[Display typeface]]s intended to be used at large sizes, such as on signs and posters, vary in x-height. Many have high x-heights to be read clearly from a distance. This, though, is not universally the case: some display typefaces such as [[Cochin (typeface)|Cochin]] intended for publicity uses have low x-heights, to give them a more elegant, delicate appearance.<ref>{{cite web|title=Chaparral® Pro release notes|url=http://www.adobe.com/type/browser/pdfs/readmes/ChaparralProReadme.pdf|website=Adobe|publisher=Adobe|accessdate=5 November 2014}}</ref> Many sans-serif designs that are intended for display text have high x-heights, such as [[Helvetica]] or, more extremely, [[Impact (typeface)|Impact]].
 
[[File:General x-height sample image.png|thumb|An image of someSome common fonts on one line, comparing their usage and x-heights.]]
Medium x-heights are found on fonts intended for body text, allowing more balance and contrast between upper- and lower-case letters and a brighter page. They then increase again for [[Font#Optical size|optical sizes]] of font designed for small print, such as captions, so that they can be clearly read printed small.<ref>{{cite web|title=Optical Size|url=http://www.adobe.com/uk/type/topics/opticalsize.html|publisher=Adobe|accessdate=7 November 2014}}</ref><ref name=MicroPlus>{{cite web|last1=Frere-Jones|first1=Tobias|title=MicroPlus|url=https://frerejones.com/blog/introducing-microplus|publisher=Frere-Jones Type|accessdate=1 December 2015}}</ref>
High x-heights on display typefaces were particularly common in designs in the 1960s and '70s, when [[International Typeface Corporation]] released popular variations of older designs with boosted x-heights; notable examples of this trend include [[Avant Garde Gothic]] and [[ITC Garamond]].<ref>{{cite web|last1=Simonson|first1=Mark|author-link=Mark Simonson|title=Indiana Jones and the Fonts on the Maps|url=http://www.marksimonson.com/notebook/view/indiana-jones-and-the-fonts-on-the-maps|accessdateaccess-date=6 November 2014}}</ref><ref>{{cite web|last1=Bierut|first1=Michael|title=I Hate ITC Garamond|url=http://designobserver.com/article.php?id=2577|website=Design Observer|accessdateaccess-date=6 November 2014}}</ref> More recently, some typefaces such as [[Mrs Eaves]], [[Neutraface]] and [[Brandon Grotesque]] have been issued with distinctively low x-heights to try to create a more elegant appearance. While computers allow fonts to be printed at any size, professional font designers such as Adobe issue fonts in a range of [[Font#Optical size|optical sizes]] optimized to be printed at different sizes.<ref>{{cite web|last1=Slimbach & Brady |title=Adobe Garamond |url=http://www.adobe.com/type/browser/pdfs/AdobeGaramondPro.pdf |publisher=Adobe |accessdateaccess-date=6 November 2014 |deadurlurl-status=yesdead |archiveurlarchive-url=https://web.archive.org/web/20150223200029/http://www.adobe.com/type/browser/pdfs/AdobeGaramondPro.pdf |archivedatearchive-date=February 23, 2015 }}</ref> As an example of this, Mrs Eaves exists in two versions: an original style intended to give an elegant, bright appearance, and a less distinctive 'XL' design intended for body text.<ref>{{cite web |title=Introducing Mrs Eaves XL|url=http://www.typo1.com.ar/wp-content/uploads/2012/08/MrsEaves.pdf|website=Emigre|access-date=6 November 2014 |archive-url=https://web.archive.org/web/20141106092817/https://www.typo1.com.ar/wp-content/uploads/2012/08/MrsEaves.pdf |archive-date=6 November 2014}}</ref>
[[File:General x-height sample image.png|thumb|An image of some common fonts on one line, comparing their usage and x-heights.]]
High x-heights were particularly common in designs in the 1960s and 70s, when [[International Typeface Corporation]] released variations of older designs with boosted x-heights; notable examples of this trend include [[Avant Garde Gothic]] and [[ITC Garamond]].<ref>{{cite web|last1=Simonson|first1=Mark|title=Indiana Jones and the Fonts on the Maps|url=http://www.marksimonson.com/notebook/view/indiana-jones-and-the-fonts-on-the-maps|accessdate=6 November 2014}}</ref><ref>{{cite web|last1=Bierut|first1=Michael|title=I Hate ITC Garamond|url=http://designobserver.com/article.php?id=2577|website=Design Observer|accessdate=6 November 2014}}</ref> More recently, some typefaces such as [[Mrs Eaves]] and [[Brandon Grotesque]] have been issued with distinctively low x-heights to try to create a more elegant appearance. While computers allow fonts to be printed at any size, professional font designers such as Adobe issue fonts in a range of [[Font#Optical size|optical sizes]] optimized to be printed at different sizes.<ref>{{cite web|last1=Slimbach & Brady |title=Adobe Garamond |url=http://www.adobe.com/type/browser/pdfs/AdobeGaramondPro.pdf |publisher=Adobe |accessdate=6 November 2014 |deadurl=yes |archiveurl=https://web.archive.org/web/20150223200029/http://www.adobe.com/type/browser/pdfs/AdobeGaramondPro.pdf |archivedate=February 23, 2015 }}</ref> As an example of this, Mrs Eaves exists in two versions: an original style intended to give an elegant, bright appearance, and a less distinctive 'XL' design intended for body text.
<ref>{{cite web|last1=`|title=Introducing Mrs Eaves XL|url=http://www.typo1.com.ar/wp-content/uploads/2012/08/MrsEaves.pdf|website=Emigre|accessdate=6 November 2014}}</ref>
 
Some research has suggested that while higher x-heights may help with reading smaller text, a very high x-height may be counterproductive, possibly because it becomes harder to identify the shape of a word if every letter is nearly the same height. For the same reason, some sign manuals discourage all-capitals text.<ref name=USSC>{{cite web|last1=Bertucci|first1=Andrew|title=Sign Legibility Rules of Thumb|url=http://www.usscfoundation.org/USSCSignLegiRulesThumb.pdf|publisher=United States Sign Council|accessdateaccess-date=22 June 2015}}</ref><ref>{{cite web|last1=Herrman|first1=Ralph|title=Does a large x-height make fonts more legible?|date=9 April 2012 |url=http://typography.guru/journal/does-a-large-x-height-make-fonts-more-legible-r16/|accessdateaccess-date=22 June 2015}}</ref><ref>{{cite web|last1=Hermann|first1=Ralph|title=Designing the ultimate wayfinding typeface|date=September 2009 |url=http://typography.guru/journal/designing-the-ultimate-wayfinding-typeface-r30/|accessdateaccess-date=22 June 2015}}</ref>
 
==Use in web design==
In [[computing]], one use of x-height is as a unit of measurement in [[web page]]s. In [[Cascading Style Sheets|CSS]] and [[LaTeX]] the x-height is called an '''ex'''. The use of ex in dimensioning objects, however, is less stable than use of the [[em (typography)|em]] across [[web browser|browser]]s. [[Internet Explorer]], for example, dimensions ex at exactly one half of em, whereas [[Mozilla Firefox]] dimensions ex closer to the actual x-height of the [[font]], rounded relative to the font's current [[pixel]] height. Thus, the exact ratio of ex to em can also vary by font size within a browser if the determined values are rounded to the nearest whole unit. For example, a browser calculating an x-height of 45% on a font 10 pixels tall may round ex to either 4 pixels or 5 pixels or leave it at 4.5 pixels.
 
==Other important dimensions==
 
[[Lowercase]] letters whose height is greater than the x-height either have [[descender]]s which extend below the [[baseline (typography)|baseline]], such as ''y'', ''g'', ''q'', and ''p'', or have [[Ascender (typography)|ascenders]] which extend above the x-height, such as ''l'', ''k'', ''b'', and ''d''. The ratio of the x-height to the [[body height (typography)|body height]] is one of the major characteristics that defines the appearance of a typeface. The height of the capital letters is referred to as [[Capcap height]]. Xx-height is most important in regular designs, such as most serif and sans-serif designs; [[script typeface]]s that mimic irregular handwriting and calligraphy may not have a consistent x-height across all letters.
 
==See also==
*[[Em (typography)]]
*[[En (typography)]]
*[[Small caps]]
* [[TypographicTypeface unitanatomy]]
 
==References==
{{Reflist}}
 
==Notes==
{{notelist}}
 
==External links==