Jump to content

Column (typography): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
Reverted edits by 216.15.83.247 (talk) to last version by Awersowy
Citation bot (talk | contribs)
Bots
5,416,771 edits
Add: date. | Use this bot. Report bugs. | Suggested by Лисан аль-Гаиб | Category:Page layout | #UCB_Category 19/20
 
(44 intermediate revisions by 35 users not shown)
Line 1: Line 1:
[[Image:Two-column-layout.png|thumb|An example of a two column layout with caption.]]
[[Image:Two-column-layout.png|thumb|An example of a two-column layout (double folio) with caption.]]


In [[typography]], a '''column''' is one or more vertical blocks of [[content (media and publishing)|content]] positioned on a page, separated by [[margin (typography)|margin]]s and/or [[rule (typography)|rule]]s. Columns are most commonly used to break up large bodies of text that cannot fit in a single block of text on a page. Additionally, columns are used to improve page composition and readability. Newspapers very frequently use complex multi-column layouts to break up different stories and longer bodies of texts within a story. Column can also more generally refer to the vertical delineations created by a typographic grid system which type and image may be positioned.
In [[typography]], a '''column''' is one or more vertical blocks of [[content (media)|content]] positioned on a page, separated by '''gutters''' (vertical [[White space (visual arts)|whitespace]]) or rules (thin lines, in this case vertical). Columns are most commonly used to break up large bodies of text that cannot fit in a single block of text on a page. Additionally, columns are used to improve page composition and readability. Newspapers very frequently use complex multi-column layouts to break up different stories and longer bodies of texts within a story. Column can also more generally refer to the vertical delineations created by a typographic grid system which type and image may be positioned. In [[page layout]], the whitespace on the outside of the page (bounding the first and last columns) are known as ''[[Margin (typography)|margins]]''; the gap between two facing pages is also considered a gutter, since there are columns on both sides. (Any gutter can also be referred to as a margin, but exterior and horizontal margins are not gutters.)<ref>{{Cite web|url=http://www.wisegeek.com/in-typography-what-are-gutters.htm|title = In Typography, what are Gutters? (With pictures)| date=30 August 2023 }}</ref>

In some cases, column numbers are provided to improve specifying the in-source location in addition to or in absence of [[page number]]s in [[serial publication]]s, [[legal citation|legal document]]s and [[patent]]s. Historically, column designations were abbreviated "c" (singular) or "cc" (plural), i.e. "c130" or "cc130–136".<ref name="Hansard_1834"/><!-- There probably were or are other column notations as well. If you know of some of them, please add them. -->


==Typographic style==
==Typographic style==
{{See|Line length|Type color}}


⚫
'''Column width''' is traditionally called ''measure'' by typesetters. For best legibility, typographic manuals suggest that columns should be wide enough to contain roughly 60 characters per line.<ref>Carter, 1993. p.&nbsp;91</ref> One formula suggests multiplying the [[point (typography)|point]] size of the font by 2 to reach how wide a column should be in [[Pica (typography)|pica]]s<ref>For example, a 9&nbsp;pt font size would require an 18 pica column width.</ref> — in effect a column width of 24&nbsp;[[em (typography)|em]]s. Following these guidelines usually results in multiple narrow columns being favored over a single wide column.<ref>Romano, 1984. pp.&nbsp;86–87</ref> Historically, books containing predominantly text generally have around 40 lines per column. However, this rule of thumb does not apply to more complex text that contain multiple images or illustrations, footnotes, running heads, folios, and captions.<ref>Haslam, 2005. p.&nbsp;140</ref>


⚫
'''Column contrast''' refers to the overall color or greyness established by the column, and can be adjusted in a number of ways. One way is to adjust the relationship between the width and height of the column. Another way is to make adjustments to the [[typeface]], from choosing a specific font, to adjusting weight, style, size and [[leading]]. Column contrast can be used to establish hierarchy, to balance the page composition, and to visually activate areas of the page.<ref>Carter, 1993. p.&nbsp;51</ref>
⚫
For best legibility, typographic manuals suggest that columns should contain roughly 60 characters per line.<ref>Carter, 1993. p.&nbsp;91</ref> One formula suggests multiplying the [[point (typography)|point]] size of the font by 2 to reach how wide a column should be in [[pica (unit of measure)|pica]]s<ref>For example, a 9pt font size would require a 18 pica column width.</ref> — in effect a column width of 24&nbsp;[[em (typography)|em]]s. Following these guidelines usually results in multiple narrow columns being favored over a single wide column.<ref>Romano, 1984. pp.&nbsp;86–87</ref> Historically, books containing predominantly text generally have around 40 lines per column. However, this rule of thumb does not apply to more complex text that contain multiple images or illustrations, footnotes, running heads, folios, and captions.<ref>Haslam, 2005. p.&nbsp;140</ref>

⚫
Column contrast refers to the overall color or greyness established by the column, and can be adjusted in a number of ways. One way is to adjust the relationship between the width and height of the column. Another way is to make adjustments to the [[typeface]], from choosing a specific font, to adjusting weight, style, size and [[leading]]. Column contrast can be used to establish hierarchy, to balance the page composition, and to visually activate areas of the page.<ref>Carter, 1993. p.&nbsp;51</ref>


==Web layout==
==Web layout==
⚫
In [[web design]], columns are often used to separate primary content from secondary and tertiary content. For example, a common two column layout may include a left column with navigation links, and a right column for body text. One method of creating columns for the web is to place text within an [[HTML]] [[Table (HTML)|table element]], often with the border set to zero. However, this method is considered outdated and inaccessible to some. Another method includes using [[Cascading Style Sheets|CSS]] to either float or position the corresponding text. These methods were not as straightforward as using HTML tables, which made a tableless three column layout a sort of holy grail once these techniques were discovered in the early 2000s.<ref>[http://www.glish.com/css/ “CSS Layout Techniques: for Fun and Profit”] {{webarchive|url=http://wayback.vefsafn.is/wayback/20051105175233/http%3A//glish.com/css/ |date=2005-11-05 }} ''glish.com'' Accessed 2007-12-12.</ref> More recent levels of CSS have addressed column behaviors,<ref>[http://www.w3.org/TR/css3-multicol/ “CSS3 module: Multi-column layout”] 6 June 2007 ''W3.org''. Accessed 2007-12-12.</ref> and web browser support for these behaviors continues to improve.<ref>[http://caniuse.com/multicolumn] "caniuse.com" Accessed 2012-05-16.</ref>


==See also==
⚫
In [[web design]], columns are often used to separate primary content from secondary and tertiary content. For example, a common two column layout may include a left column with navigation links, and a right column for body text. One methods of creating columns for the web is to place text within an [[HTML]] [[Table (HTML)|table element]], often with the border set to zero. However, this method is considered outdated and inaccessible to some. Another method includes using [[Cascading Style Sheets|CSS]] to either float or position the corresponding text. These methods were not as straightforward as using HTML tables, which made a tableless three column layout a sort of holy grail once these techniques were discovered in the early 2000s.<ref>[http://www.glish.com/css/ “CSS Layout Techniques: for Fun and Profit”] ''glish.com'' Accessed 2007-12-12.</ref> More recent levels of CSS have addressed column behaviors<ref>[http://www.w3.org/TR/css3-multicol/ “CSS3 module: Multi-column layout”] 6 June 2007 ''W3.org''. Accessed 2007-12-12.</ref>, although not many browsers support these behaviors.
* [[Column inch]]
* [[stick (unit)|stick]], roughly {{frac|10}} of a column
* [[Characters per line]], referring to monospaced text
* [[Line length]]


==Notes==
==Notes==
{{reflist}}
{{reflist|refs=
<ref name="Hansard_1834">{{cite journal |title=Poor Laws' Amendment - Report |journal=Hansard House of Commons Debates |date=1834-06-27 |volume=24 |at=Column 913 |url=https://api.parliament.uk/historic-hansard/commons/1834/jun/27/poor-laws-amendment-report#S3V0024P0_18340627_HOC_31 |access-date=2016-02-15 |quote-pages=Column 913 |no-pp=yes |quote=POOR LAWS' AMENDMENT-REPORT. HC Deb 27 June 1834 vol 24 cc913–935}}</ref>
}}


==References==
==References==
{{refbegin}}
*[[Rob Carter|Carter, Rob]]. Day, Ben. [[Philip Meggs|Meggs, Philip]]. ''Typographic Design: Form and Communication'' 2nd ed. John Wiley & Sons: 1993. pp. 51-53, 90-91.
* [[Rob Carter|Carter, Rob]]. Day, Ben. [[Philip Meggs|Meggs, Philip]]. ''Typographic Design: Form and Communication'' 2nd ed. John Wiley & Sons: 1993. pp.&nbsp;51–53, 90–91.
*{{cite book |author=Haslam, Andrew; Baines, Phil |title=Type and Typography |publisher=Watson-Guptill |location=New York, N.Y |year=2005 |pages= p. 140|isbn=0-8230-5528-0}}
* {{cite book |author1=Haslam, Andrew |author2=Baines, Phil |title=Type and Typography |publisher=Watson-Guptill |location=New York, N.Y |date=2005 |pages=140 |isbn=0-8230-5528-0}}
*Romano, Frank J. ''The TypeEncyclopedia''. R.R. Bowker Company: 1984. pp. 86-86.
* Romano, Frank J. ''The TypeEncyclopedia''. R. R. Bowker Company: 1984. pp.&nbsp;86–86.
{{refend}}


{{Book structure}}
{{Typography terms}}
{{Typography terms}}


[[Category:Typography]]
[[Category:Page layout]]
[[Category:Page layout]]

[[de:Spaltensatz]]
[[pl:Łam]]

Latest revision as of 22:57, 29 September 2023

An example of a two-column layout (double folio) with caption.

In typography, a column is one or more vertical blocks of content positioned on a page, separated by gutters (vertical whitespace) or rules (thin lines, in this case vertical). Columns are most commonly used to break up large bodies of text that cannot fit in a single block of text on a page. Additionally, columns are used to improve page composition and readability. Newspapers very frequently use complex multi-column layouts to break up different stories and longer bodies of texts within a story. Column can also more generally refer to the vertical delineations created by a typographic grid system which type and image may be positioned. In page layout, the whitespace on the outside of the page (bounding the first and last columns) are known as margins; the gap between two facing pages is also considered a gutter, since there are columns on both sides. (Any gutter can also be referred to as a margin, but exterior and horizontal margins are not gutters.)[1]

In some cases, column numbers are provided to improve specifying the in-source location in addition to or in absence of page numbers in serial publications, legal documents and patents. Historically, column designations were abbreviated "c" (singular) or "cc" (plural), i.e. "c130" or "cc130–136".[2]

Typographic style

[edit]
Further information: Line length and Type color

Column width is traditionally called measure by typesetters. For best legibility, typographic manuals suggest that columns should be wide enough to contain roughly 60 characters per line.[3] One formula suggests multiplying the point size of the font by 2 to reach how wide a column should be in picas[4] — in effect a column width of 24 ems. Following these guidelines usually results in multiple narrow columns being favored over a single wide column.[5] Historically, books containing predominantly text generally have around 40 lines per column. However, this rule of thumb does not apply to more complex text that contain multiple images or illustrations, footnotes, running heads, folios, and captions.[6]

Column contrast refers to the overall color or greyness established by the column, and can be adjusted in a number of ways. One way is to adjust the relationship between the width and height of the column. Another way is to make adjustments to the typeface, from choosing a specific font, to adjusting weight, style, size and leading. Column contrast can be used to establish hierarchy, to balance the page composition, and to visually activate areas of the page.[7]

Web layout

[edit]

In web design, columns are often used to separate primary content from secondary and tertiary content. For example, a common two column layout may include a left column with navigation links, and a right column for body text. One method of creating columns for the web is to place text within an HTML table element, often with the border set to zero. However, this method is considered outdated and inaccessible to some. Another method includes using CSS to either float or position the corresponding text. These methods were not as straightforward as using HTML tables, which made a tableless three column layout a sort of holy grail once these techniques were discovered in the early 2000s.[8] More recent levels of CSS have addressed column behaviors,[9] and web browser support for these behaviors continues to improve.[10]

See also

[edit]
  • Column inch
  • stick, roughly 1⁄10 of a column
  • Characters per line, referring to monospaced text
  • Line length

Notes

[edit]
  1. ^ "In Typography, what are Gutters? (With pictures)". 30 August 2023.
  2. ^ "Poor Laws' Amendment - Report". Hansard House of Commons Debates. 24. Column 913. 1834-06-27. Retrieved 2016-02-15. Column 913: POOR LAWS' AMENDMENT-REPORT. HC Deb 27 June 1834 vol 24 cc913–935
  3. ^ Carter, 1993. p. 91
  4. ^ For example, a 9 pt font size would require an 18 pica column width.
  5. ^ Romano, 1984. pp. 86–87
  6. ^ Haslam, 2005. p. 140
  7. ^ Carter, 1993. p. 51
  8. ^ “CSS Layout Techniques: for Fun and Profit” Archived 2005-11-05 at the National and University Library of Iceland glish.com Accessed 2007-12-12.
  9. ^ “CSS3 module: Multi-column layout” 6 June 2007 W3.org. Accessed 2007-12-12.
  10. ^ [1] "caniuse.com" Accessed 2012-05-16.

References

[edit]
  • Carter, Rob. Day, Ben. Meggs, Philip. Typographic Design: Form and Communication 2nd ed. John Wiley & Sons: 1993. pp. 51–53, 90–91.
  • Haslam, Andrew; Baines, Phil (2005). Type and Typography. New York, N.Y: Watson-Guptill. p. 140. ISBN 0-8230-5528-0.
  • Romano, Frank J. The TypeEncyclopedia. R. R. Bowker Company: 1984. pp. 86–86.
Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Column_(typography)&oldid=1177842116"