{
"componentChunkName": "component---src-pages-typography-type-basics-mdx",
"path": "/typography/type-basics/",
"result": {"pageContext":{"frontmatter":{"title":"Type basics","description":"Good typography starts with type basics tracking, leading, alignment and line length. Find guidance for best practices in the use of IBM IBM Plex®."},"relativePagePath":"/typography/type-basics.mdx","titleType":"append","MdxNode":{"id":"9890e1d2-0b44-59b8-8aa1-44ee2afe9ba1","children":[],"parent":"60fc82f6-5bf3-59ae-b7a4-edf4e183a1a2","internal":{"content":"---\ntitle: Type basics\ndescription:\n Good typography starts with type basics tracking, leading, alignment and line\n length. Find guidance for best practices in the use of IBM IBM Plex®.\n---\n\n\n\nGood typography often goes unnoticed because it just makes sense. Elements of\ngood typography include consistency, hierarchy and alignment. With our patented\ncorporate typeface, IBM Plex, comes an opportunity to recalibrate our\ntypographic mindset with some best practices.\n\n\n\n\n Tracking\n Flush left\n Leading\n Punctuation\n Belt and suspenders\n Case\n Rags, orphans and widows\n Alignment\n Comfortable reading\n Line lengths within containers\n Stacked headlines\n Titles and subtitles\n\n\n## Resources\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n## Tracking\n\nPlex® has been designed to not be spaced tightly. It requires space to breathe\ncomfortably within text and headlines. It’s lighter in appearance and is more\nlegible when spaced appropriately.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Flush left\n\nFlush left creates strong alignments for the eye to follow, aiding readability\nand organization. It is our standard for all typography across IBM because it is\nfunctional, modern, timeless and the most effective in information design and\nlegibility.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Leading\n\nChoosing the appropriate leading or line spacing is very important to the\nreading quality and and efficiency of the typography. It should never be to open\nor too tight which makes reading difficult and unpleasant for the reader.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Punctuation\n\nThe use of spacing and certain typographical devices are important to\nunderstanding and correct reading. The typographical details of correct\npunctuation aid in interpretation, division of text into sentences and clauses,\nand is critical to disambiguate the meaning of sentences.\n\n### Apostrophes and primes\n\nApostrophes indicate possession, for example, Harry's book or the boys' coats.\nThey can also indicate the omission of letters or numbers. Primes are commonly\nused for minutes, seconds, feet, inches and degrees. Lucky for us, IBM Plex\nincludes them. Many fonts don’t.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Quotes\n\nUse left and right “curly quotes” when quote marks are required. They are design\nsensitive, intended to match or blend within Plex. Avoid using \"straight\"\nquotes. These are a relic from the typewriter days, and a common error in modern\ntypography.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Em dash\n\nThe em dash is used to create a strong break in the structure of a sentence.\nHyphens and en dashes are not appropriate alternatives for em dashes.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Hyphen and en dash (-, –)\n\nSome examples of correct use of hyphens and en dashes are shown here. An en dash\nis used to span or ranges of numbers (1945–1975) and the hyphen is for compound\nterms (check-in).\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Belt and suspenders\n\nThe term “belt and suspenders” refers to using multiple styles to do the same\nthing in typography. IBM should always be essential, so keep styles to a minimum\nwhen emphasizing words in messaging.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Case\n\nWrite content in sentence case. Title case can be used in proper titles, product\nnames and service names. Avoid the use of all uppercase or “all caps” in your\ntypography, especially for paragraphs or text.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Rags, orphans and widows\n\nAlways look for opportunities to create improved rags, or ragged edges on the\nright margin. Watch out for orphans and widows and adjust line lengths with a\nwriter to solve awkward breaks which can affect reading quality.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Alignment\n\nWhenever possible, left-align copy with other copy, even when it’s in a\ncontainer element. This creates a strong vertical alignment with the text,\nadding in legibility, organization and clarity for a user.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Comfortable reading\n\nLine length is based on character or word count per line and is determined by\nthe amount of copy being used. It’s important not to create long lines of text\nfor a reader. Short and efficient line lengths are easier to read.\n\n\n\n## Line lengths within containers\n\nConsider adding extra-padding-right in a container to preserve openness in the\ntypography. This prevents text from going edge to edge in a container, and helps\nthe reader.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Stacked headlines\n\nStack headlines into two or even three lines versus\nkeeping them in one long line. This helps create a compact reading unit for the\nheadline, and can help control or avoid widows.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Titles and subtitles\n\nExamples of how to differentiate titles and subtitles by weight or contrast\nchange are shown here. It’s important to keep it simple and not create titles\nthat are too long.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"Mdx","contentDigest":"6cad58a17a6836eda55f004566eb99ba","owner":"gatsby-plugin-mdx","counter":1923},"frontmatter":{"title":"Type basics","description":"Good typography starts with type basics tracking, leading, alignment and line length. Find guidance for best practices in the use of IBM IBM Plex®."},"exports":{},"rawBody":"---\ntitle: Type basics\ndescription:\n Good typography starts with type basics tracking, leading, alignment and line\n length. Find guidance for best practices in the use of IBM IBM Plex®.\n---\n\n\n\nGood typography often goes unnoticed because it just makes sense. Elements of\ngood typography include consistency, hierarchy and alignment. With our patented\ncorporate typeface, IBM Plex, comes an opportunity to recalibrate our\ntypographic mindset with some best practices.\n\n\n\n\n Tracking\n Flush left\n Leading\n Punctuation\n Belt and suspenders\n Case\n Rags, orphans and widows\n Alignment\n Comfortable reading\n Line lengths within containers\n Stacked headlines\n Titles and subtitles\n\n\n## Resources\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n## Tracking\n\nPlex® has been designed to not be spaced tightly. It requires space to breathe\ncomfortably within text and headlines. It’s lighter in appearance and is more\nlegible when spaced appropriately.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Flush left\n\nFlush left creates strong alignments for the eye to follow, aiding readability\nand organization. It is our standard for all typography across IBM because it is\nfunctional, modern, timeless and the most effective in information design and\nlegibility.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Leading\n\nChoosing the appropriate leading or line spacing is very important to the\nreading quality and and efficiency of the typography. It should never be to open\nor too tight which makes reading difficult and unpleasant for the reader.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Punctuation\n\nThe use of spacing and certain typographical devices are important to\nunderstanding and correct reading. The typographical details of correct\npunctuation aid in interpretation, division of text into sentences and clauses,\nand is critical to disambiguate the meaning of sentences.\n\n### Apostrophes and primes\n\nApostrophes indicate possession, for example, Harry's book or the boys' coats.\nThey can also indicate the omission of letters or numbers. Primes are commonly\nused for minutes, seconds, feet, inches and degrees. Lucky for us, IBM Plex\nincludes them. Many fonts don’t.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Quotes\n\nUse left and right “curly quotes” when quote marks are required. They are design\nsensitive, intended to match or blend within Plex. Avoid using \"straight\"\nquotes. These are a relic from the typewriter days, and a common error in modern\ntypography.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Em dash\n\nThe em dash is used to create a strong break in the structure of a sentence.\nHyphens and en dashes are not appropriate alternatives for em dashes.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Hyphen and en dash (-, –)\n\nSome examples of correct use of hyphens and en dashes are shown here. An en dash\nis used to span or ranges of numbers (1945–1975) and the hyphen is for compound\nterms (check-in).\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Belt and suspenders\n\nThe term “belt and suspenders” refers to using multiple styles to do the same\nthing in typography. IBM should always be essential, so keep styles to a minimum\nwhen emphasizing words in messaging.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Case\n\nWrite content in sentence case. Title case can be used in proper titles, product\nnames and service names. Avoid the use of all uppercase or “all caps” in your\ntypography, especially for paragraphs or text.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Rags, orphans and widows\n\nAlways look for opportunities to create improved rags, or ragged edges on the\nright margin. Watch out for orphans and widows and adjust line lengths with a\nwriter to solve awkward breaks which can affect reading quality.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Alignment\n\nWhenever possible, left-align copy with other copy, even when it’s in a\ncontainer element. This creates a strong vertical alignment with the text,\nadding in legibility, organization and clarity for a user.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Comfortable reading\n\nLine length is based on character or word count per line and is determined by\nthe amount of copy being used. It’s important not to create long lines of text\nfor a reader. Short and efficient line lengths are easier to read.\n\n\n\n## Line lengths within containers\n\nConsider adding extra-padding-right in a container to preserve openness in the\ntypography. This prevents text from going edge to edge in a container, and helps\nthe reader.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Stacked headlines\n\nStack headlines into two or even three lines versus\nkeeping them in one long line. This helps create a compact reading unit for the\nheadline, and can help control or avoid widows.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Titles and subtitles\n\nExamples of how to differentiate titles and subtitles by weight or contrast\nchange are shown here. It’s important to keep it simple and not create titles\nthat are too long.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/typography/type-basics.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}