Difference between revisions of "Category:Typography"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
(12 intermediate revisions by the same user not shown)
Line 26: Line 26:
''yes I did just verb that, live with it.''
''yes I did just verb that, live with it.''


Like most design things, you need to start with what the intentions of the typography are -- what are its goals? what will it accomplish? In [https://medium.freecodecamp.org/typography-can-make-your-design-or-break-it-7be710aadcfe Typography can make or break your design: a process for choosing type], Jonathan Z. White recommends the following:
Like most design things, you need to start with what the intentions of the typography are -- what are its goals? what will it accomplish? In [https://medium.freecodecamp.org/typography-can-make-your-design-or-break-it-7be710aadcfe Typography can make or break your design: a process for choosing type] on [[freeCodeCamp]], [[Jonathan Z. White]] recommends the following:
* Identify your purpose
* Identify your purpose
* Identify your audience
* Identify your audience
Line 33: Line 33:
* Determine font sizes
* Determine font sizes
* Create a typographic style guide  
* Create a typographic style guide  
In order to accomplish those goals, [https://www.invisionapp.com/blog/best-practices-pairing-fonts/ 5 Best Practices for Pairing Fonts] recommends the following:
In order to accomplish those goals, [https://www.invisionapp.com/blog/best-practices-pairing-fonts/ 5 Best Practices for Pairing Fonts] by [[Will Fanguy]] on [[Inside Design]] recommends the following:
* Limit your font palette to (in most situations) 3 fonts
* Limit your font palette to (in most situations) 3 fonts
* Use contrast wherever possible to create a visual hierarchy
* Use contrast wherever possible to create a visual hierarchy
Line 39: Line 39:
* Understand your brand and know what you want to say
* Understand your brand and know what you want to say
* Trust your gut
* Trust your gut
==Parts of Letterforms==
==Parts of Letterforms==
* [https://www.google.com/search?q=parts+of+letterforms+typography&ie=UTF-8&oe=UTF-8&hl=en-us&client=safari#imgrc=6ymYwKHj9CQnLM: Parts of Letterforms Typography] (Google search results)
* [https://www.google.com/search?q=parts+of+letterforms+typography&ie=UTF-8&oe=UTF-8&hl=en-us&client=safari#imgrc=6ymYwKHj9CQnLM: Parts of Letterforms Typography] (Google search results)
==Accessibility Considerations==
==Accessibility Considerations==
===Readability===
===Readability===
* [https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/ 16 Pixels Font Size: For Body Copy; Anything Less Is A Costly Mistake] by D. Bnonn Tennant at Smashing Magazine.
* [https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/ 16 Pixels Font Size: For Body Copy; Anything Less Is A Costly Mistake] by [[D Bnonn Tennant]] at [[Smashing Magazine]].
* [https://readabilityguidelines.co.uk Readability Guidelines] by [[Content Design London]]
* [https://readabilityguidelines.co.uk Readability Guidelines] by [[Content Design London]]
* [http://csjarchive.cogsci.rpi.edu/Proceedings/2013/papers/0462/paper0462.pdf Eye Movements Reveal Interplay Between Noun Capitalization and Word Class During Reading (pdf)] by [[Sven Hohenstein]] and [[Reinhold Kliegl]] in the [[Cognitive Science Journal]]
====Capitalization====
* [https://readabilityguidelines.co.uk/grammar-points/capital-letters/ Capital Letters] on Readability Guidelines by [[Content Design London]].
* [https://www.sciencedirect.com/science/article/pii/S0042698907002830 Letter case and text legibility in normal and low vision] by [[Aries Arditi]] and [[Jianna Cho]] on [[Science Direct]]
* [https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98 Making a case for letter case] by [[John Saito]] on [[Medium]]


==Additional Resources==
==Additional Resources==
* [https://www.invisionapp.com/blog/typography-tips/ Typography Tips for a More Comfortable Read] by Luke Jones on the Invision Blog
* [https://www.invisionapp.com/blog/typography-tips/ Typography Tips for a More Comfortable Read] by [[Luke Jones]] on [[Inside Design]]
* [http://webaim.org/techniques/fonts/ Fonts] by [[WebAIM]]  
* [http://webaim.org/techniques/fonts/ Fonts] by [[WebAIM]]  
* [https://www.fonts.com/content/learning/fontology/level-4/fine-typography/legibility It's About Legibility] by [[Fonts.com]]
* [https://www.fonts.com/content/learning/fontology/level-4/fine-typography/legibility It's About Legibility] by [[Allan Haley]] on [[Fonts.com]]
* [https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe Typography can make or break your design: a process for choosing type] by [[Jonathan Z. White]] covers the basics of choosing typography.  
* [https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe Typography can make or break your design: a process for choosing type] by [[Jonathan Z. White]] covers the basics of choosing typography.  
* [http://www.webtype.com/info/articles/fonts-weights/ Best practices for using font-weights with web fonts] by [[Webtype]]
* [http://www.webtype.com/info/articles/fonts-weights/ Best practices for using font-weights with web fonts] by [[Webtype]]
* [https://zellwk.com/blog/rem-vs-em/#rems-or-ems%3F REM vs EM – The Great Debate] by [[Zell Liew]] on his website.
* [https://type-scale.com Type Scale] generates typography scales for headers and names them after musical scales - they provide a typographical hierarchy with built-in visual rhythm.

Revision as of 12:41, 7 August 2022

What it is

Typography is the design of type to make written language legible, readable, and appealing when displayed.

Typography on Wikipedia

A typeface is a set of one or more fonts that share similar design features. Fonts are the specific rendering of the glyphs (aka the alphabet) including the size, weight, emphasis, orientation, width, etc.

Typeface styles

At the highest level, we have Latin-script fonts (which render, for example, English) and what English printers traditionally called exotic fonts (which include Cyrillic, Hebrew, Arabic, Chinese, Korean, etc.). For purposes of simplicity we're talking about the Latin-script fonts and typefaces.

Latin-script fonts come in multiple styles. The most important of these for our purposes are serif, sans-serif, and monospace, because they can all be listed as the generic family in a font-family declaration in HTML or CSS.

Fonts can be proportional or monospace.

Monospace fonts take up the same amount of space per letter regardless of what the letter looks like. The letter M takes up the same amount of space as the letter I. Monospace fonts were very popular for computers before the GUI was developed. They're still frequently used for development purposes, displaying code, etc.

Proportional fonts only take up the maximum amount of space necessary for the letter. The letter M takes up a lot more space than the letter I. Proportional fonts are generally more readable than monospace fonts.

Fonts can be serif or sans-serif.

Serif fonts have little serifs on the edges of the letters to help differentiate their letter shapes. Serif fonts are more comfortable to read on paper than sans-serif fonts. Most monospace fonts are also serif fonts, but not all ferif fonts are monospace.

Sans-serif fonts lack the serifs. They are more comfortable to read on screen than serif fonts.

How to font

yes I did just verb that, live with it.

Like most design things, you need to start with what the intentions of the typography are -- what are its goals? what will it accomplish? In Typography can make or break your design: a process for choosing type on freeCodeCamp, Jonathan Z. White recommends the following:

  • Identify your purpose
  • Identify your audience
  • Look for inspiration
  • Choose your fonts
  • Determine font sizes
  • Create a typographic style guide

In order to accomplish those goals, 5 Best Practices for Pairing Fonts by Will Fanguy on Inside Design recommends the following:

  • Limit your font palette to (in most situations) 3 fonts
  • Use contrast wherever possible to create a visual hierarchy
  • Keep an eye on moods and history
  • Understand your brand and know what you want to say
  • Trust your gut

Parts of Letterforms

Accessibility Considerations

Readability

Capitalization

Additional Resources

Pages in category "Typography"

This category contains only the following page.