{"id":316,"date":"2021-09-23T22:15:12","date_gmt":"2021-09-23T15:15:12","guid":{"rendered":"https:\/\/bnsd.binus.ac.id\/graphic-design\/?p=316"},"modified":"2021-09-23T22:15:12","modified_gmt":"2021-09-23T15:15:12","slug":"understanding-typography","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2021\/09\/23\/understanding-typography\/","title":{"rendered":"Understanding typography"},"content":{"rendered":"

Type properties<\/h2>\n
\n

A typeface is a collection of letters. While each letter is unique, certain shapes are shared across letters. A typeface represents shared patterns across a collection of letters.<\/p>\n

Typefaces that are selected for their style, legibility, and readability are most effective when following the fundamental principles of typographic design.
\n\"\"
\nNames of letterform parts: aperture, ascender, baseline, cap height, descender, leading, letter-spacing, sans serif, serif, stem, stroke, x-height<\/p>\n<\/div>\n

Baseline<\/h3>\n

The\u00a0baseline\u00a0<\/strong>is the invisible line upon which a line of text rests. In Material Design, the baseline is an important specification in measuring the vertical distance between text and an element<\/p>\n

\"\"
\nThe baseline
\nType aligns to the 4dp baseline grid.
\n\"\"
\nRegardless of pt \/ sp size, a text\u2019s baseline must sit on the 4dp grid. Line-height must be a value divisible by 4 to maintain the grid.<\/p>\n

Measurement from the baseline<\/h4>\n

Specify distances from UI elements from the baseline. Baseline values are software-agnostic, so they work in any design program, and work with the grid. On Android and iOS, code can be translated from baseline-relative specs into padding. For the web, automate the calculation using Sass or CSS<\/p>\n\n\n\n
\"\"<\/td>\n\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
Reference baselines for vertical alignment, instead of bounding boxes. This produces more accurate implementation across design software and platforms<\/td>\nMeasure text in relation to other components.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Cap height
\nCap height<\/strong>\u00a0refers to the height of a typeface\u2019s flat capital letters (such as M or I) measured from the baseline. Round and pointed capital letters, such as S and A, are optically adjusted by being drawn with a slight overshoot above the cap height to achieve the effect of being the same size. Every typeface has a unique cap height.
\n\"\"
\nCap height<\/p>\n

X-height<\/h3>\n

X-height<\/strong>\u00a0refers to the height of the lowercase x for a typeface, and it indicates how tall or short each glyph in a typeface will be.<\/p>\n

Typefaces with tall x-heights have better legibility at small font sizes, as the white space within each letter is more legible.
\n\"\"
\nThe height of a typeface\u2019s lower-case x determines its x-height.<\/p>\n

Ascenders and descenders<\/h3>\n

Ascenders<\/strong>\u00a0are an upward vertical stroke found in certain lowercase letters that extend beyond either the cap height or baseline.\u00a0Descenders<\/strong>\u00a0are the downward vertical stroke in these letters. In some cases, a collision between these strokes can occur when the\u00a0line height<\/strong>\u00a0(the vertical distance between baselines) is too tight.
\n\"\"
\nAscenders and descender<\/p>\n

Weight
\nWeight<\/strong>\u00a0refers to the relative thickness of a font\u2019s stroke. A typeface can come in many weights; and four to six weights is a typical number available for a typeface.
\n\"\"
\nCommon weights:
\n1. Light
\n2. Regular
\n3. Medium
\n4. Bold<\/p>\n

Type classification<\/h2>\n

Serif<\/h3>\n

A\u00a0serif<\/strong>\u00a0is a small shape or projection that appears at the beginning or end of a stroke on a letter. Typefaces with serifs are called serif typefaces. Serif fonts are classified as one of the following:<\/p>\n

Old-Style serifs<\/strong>\u00a0resemble writing in ink, with:<\/p>\n

    \n
  • Low contrast between thick and thin strokes<\/li>\n
  • Diagonal stress in the strokes<\/li>\n
  • Slanted serifs on lower-case ascenders<\/li>\n<\/ul>\n

    Transitional serifs<\/strong>\u00a0have:<\/p>\n

      \n
    • High contrast between thick and thin strokes<\/li>\n
    • Medium-High x-height<\/li>\n
    • Vertical stress in the strokes<\/li>\n
    • Bracketed serifs<\/li>\n<\/ul>\n

      Didone or neoclassical serifs<\/strong>\u00a0have:<\/p>\n

        \n
      • Very high contrast between thick and thin strokes<\/li>\n
      • Vertical stress in the strokes<\/li>\n
      • \u201cBall\u201d terminal strokes.<\/li>\n<\/ul>\n

        Slab serifs\u00a0<\/strong>have:<\/p>\n

          \n
        • Heavy serifs with imperceptible differences between the stroke weight<\/li>\n
        • Minimal or no bracketing<\/li>\n<\/ul>\n

          \"\"<\/p>\n

          1. EB Garamond, old-style serif
          \n2. Libre Baskerville, transitional serif
          \n3. Libre Bodoni, didone \/ neoclassical serif
          \n4. Bitter, slab serif<\/p>\n

          Sans Serif<\/h3>\n

          A typeface without serifs is called a sans serif typeface, from the French word \u201csans\u201d that means “without.” Sans serifs can be classified as one of the following:<\/p>\n

            \n
          • Grotesque:<\/strong>\u00a0Low contrast between thick and thin strokes, vertical or no observable stress<\/li>\n
          • Humanist:<\/strong>\u00a0Medium contrast between thick and thin strokes, slanted stress<\/li>\n
          • Geometric:<\/strong> Low contrast between thick and thin strokes, with vertical stress, and circular round forms<\/li>\n<\/ul>\n

            \"\"
            \n1. Work Sans, grotesque sans serif
            \n2. Alegreya Sans, humanist sans serif
            \n3. Quicksand, geometric sans serif<\/p>\n

            Monospace
            \nMonospace typefaces display all characters with the same width.<\/p>\n

            \"\"
            \n1. Roboto Mono, monospace
            \n2. Space Mono, monospace
            \n3. VT323, monospace<\/p>\n

            Handwriting<\/h3>\n

            Handwriting typefaces are unconventional with a natural, handwritten feel. These typically are used as H1 – H6 in your type scale. They come in the following forms:<\/p>\n

              \n
            • Black letter:<\/strong>\u00a0High contrast, narrow, with straight lines and angular curves<\/li>\n
            • Script:<\/strong>\u00a0Replication of calligraphic styles of writing (more formal)<\/li>\n
            • Handwriting:<\/strong> Replication of handwriting (less formal)<\/li>\n<\/ul>\n

              \"\"
              \n1. UnifrakturMaguntia, black letter
              \n2. Dancing Script, script
              \n3. Indie Flower, handwriting<\/p>\n

              Display
              \nA miscellaneous category for all classification types that are only suitable for use at large point sizes. Display fonts typically are used as H1 – H6 in your type scale.
              \n\"\"
              \n1. Shrikhand, display
              \n2. Chewy, display
              \n3. Faster One, display<\/p>\n

              Readability<\/strong>
              \nWhile legibility is determined by the characters in a typeface,\u00a0readability<\/strong>\u00a0refers to how easy it is to read words or blocks of text, which is affected by the style of a typeface<\/p>\n

              Letter-spacing<\/strong>
              \nLetter-spacing<\/strong>, also called tracking, refers to the uniform adjustment of the space between letters in a piece of text.<\/p>\n

              \"\"
              \nLarger type sizes, such as headlines, use tighter letter-spacing to improve readability and reduce space between letters.<\/p>\n

              \"\"
              \nTighter letter-spacing<\/p>\n

              For smaller type sizes, looser letter spacing can improve readability as more space between letters increases contrast between each letter shape. Text in all caps, even at small type sizes, has improved readability because of its added letter spacing.<\/p>\n

              \"\"
              \nLooser letter spacing<\/p>\n

              Tabular figures<\/h4>\n

              Use tabular figures (also known as monospaced numbers), rather than proportional digits, in tables or places where values may change often.<\/p>\n

              \"\"
              \nTabular figures keep values optically aligned for better scanning.<\/p>\n

              Line length<\/h3>\n

              Line lengths for body text are usually between 40 to 60 characters. In areas with wider line lengths, such as desktop, longer lines that contain up to 120 characters will need an increased line height from 20sp to 24sp.<\/p>\n

              \"\"
              \nThe ideal line length is 40-60 characters per line for English body text.<\/p>\n

              \"\"
              \nThe ideal line length for short lines of English text is 20-40 characters per line.<\/p>\n

              Line height<\/h3>\n

              Line height, also known as leading, controls the amount of space between baselines in a block of text. A text\u2019s line height is proportional to its type size.<\/p>\n

              \"\"
              \n1. Type size 14, Line-height 20dp
              \n2. Type size 20, Line-height 28dp<\/p>\n

              Paragraph spacing<\/h3>\n

              Keep paragraph spacing in the range between .75x and 1.25x of the type size.<\/p>\n

              \"\"
              \nType size 20sp, line-height 30dp, paragraph spacing 28dp<\/p>\n

              Type alignment<\/h3>\n

              Type alignment controls how text aligns in the space it appears. There are three type alignments:<\/p>\n

                \n
              • Left-aligned: when text is aligned to the left margin<\/li>\n
              • Right-aligned: when text is aligned to the right margin<\/li>\n<\/ul>\n

                Left-aligned<\/h4>\n

                Left-aligned text is the most common setting for left-to-right languages such as English.<\/p>\n

                \"\"
                \nLeft-aligned text applied to body copy<\/p>\n

                Right-aligned<\/h4>\n

                Right-aligned text is the most common setting for right-to-left languages, such as Arabic and Hebrew.<\/p>\n

                Left-to-right languages can use right-aligned text, though it is best for distinguishing short typographic elements within a layout (such as side notes), and is not recommended for long copy.<\/p>\n

                \"\"
                \nRight-aligned text applied to a side note<\/p>\n

                Centered<\/h4>\n

                Centered text is best used to distinguish short typographic elements within a layout (such as pull quotes), and is not recommended for long copy.<\/p>\n

                \"\"
                \nCenter-aligned text applied to a pull quote<\/p>\n

                System fonts<\/h2>\n

                System fonts come pre-installed on your computer or device. They typically have wide language support and no licensing costs for developers. Using the system default font in your app font unites the consistency of the platform with your app\u2019s look and feel. However, because they appear in many places on devices, they may not stand out.<\/p>\n

                 <\/p>\n

                Using system fonts<\/h3>\n

                Native system typefaces should be used for large blocks of text and any text below 14sp.<\/p>\n

                Roboto is the default system font for Android. For platforms outside of Android and web products, use a system typeface that is preferred on that platform. For example, iOS applications should use Apple\u2019s San Francisco font.<\/p>\n\n\n\n\n
                \"\"<\/td>\n\"\"<\/td>\n<\/tr>\n
                Android<\/b>
                \nRoboto system font<\/td>\n                		iOS<\/b>
                \nSan Francisco system font<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                <\/div>\n
                \n
                \n
                \n
                sources:material.io<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                Type properties A typeface is a collection of letters. While each letter is unique, certain shapes are shared across letters. A typeface represents shared patterns across a collection of letters. Typefaces that are selected for their style, legibility, and readability are most effective when following the fundamental principles of typographic design. Names of letterform parts: […]<\/p>\n","protected":false},"author":41,"featured_media":317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/316"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":0,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/316\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/317"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}