Category:Typography - Revision history

Kirabug at 03:04, 28 January 2023

2023-01-28T03:04:07Z

← Older revision		Revision as of 20:04, 27 January 2023
Line 51:		Line 51:
	* [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://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]]		* [https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98 Making a case for letter case] by [[John Saito]] on [[Medium]]

			==Type Scales==
			''which I have mistakenly called typography rhythm, font rhythm, font music, type music, and all kinds of other crap. Dear god of search engines, please let this long string help me find these links next time.''
			* [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.
			* [https://m3.material.io/styles/typography/type-scale-tokens Material's type scale tokens]

	==Additional Resources==		==Additional Resources==
Line 59:		Line 64:
	* [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://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.

Kirabug: /* Additional Resources */

2022-08-07T19:41:11Z

Additional Resources

← Older revision		Revision as of 12:41, 7 August 2022
Line 59:		Line 59:
	* [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://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.

Kirabug: /* Additional Resources */

2021-07-23T17:57:53Z

Additional Resources

← Older revision		Revision as of 10:57, 23 July 2021
Line 58:		Line 58:
	* [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.

Kirabug: /* Capitalization */

2021-02-13T08:12:57Z

Capitalization

← Older revision		Revision as of 01:12, 13 February 2021
Line 49:		Line 49:
	====Capitalization====		====Capitalization====
	* [https://readabilityguidelines.co.uk/grammar-points/capital-letters/ Capital Letters] on Readability Guidelines by [[Content Design London]].		* [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]]		* [https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98 Making a case for letter case] by [[John Saito]] on [[Medium]]

Kirabug: /* Additional Resources */

2021-02-13T08:08:02Z

Additional Resources

← Older revision		Revision as of 01:08, 13 February 2021
Line 54:		Line 54:
	* [https://www.invisionapp.com/blog/typography-tips/ Typography Tips for a More Comfortable Read] by [[Luke Jones]] on [[Inside Design]]		* [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]]

Kirabug: /* Additional Resources */

2021-02-13T08:01:47Z

Additional Resources

← Older revision		Revision as of 01:01, 13 February 2021
Line 52:		Line 52:

	==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 [[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]]

Kirabug: /* Readability */

2021-02-13T07:58:57Z

Readability

← Older revision		Revision as of 00:58, 13 February 2021
Line 44:		Line 44:
	==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]]		* [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]]

Kirabug: /* How to font */

2021-02-13T07:52:25Z

How to font

← Older revision		Revision as of 00:52, 13 February 2021
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] by [[Will Fanguy]] on ~~the~~ [[~~Invision Blog~~]] 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

Kirabug: /* How to font */

2021-02-13T07:50:31Z

How to font

← Older revision		Revision as of 00:50, 13 February 2021
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] by [[~~someone~~]] on the [[Invision Blog]] 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 the [[Invision Blog]] 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

Kirabug: /* How to font */

2021-02-13T07:46:40Z

How to font

← Older revision		Revision as of 00:46, 13 February 2021
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] by the [[Invision Blog]] 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 [[someone]] on the [[Invision Blog]] 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