Style:Typography - Revision history

FunPika: added Category:User experience using HotCat

2014-09-06T20:07:30Z

added Category:User experience using HotCat

← Older revision		Revision as of 20:07, 6 September 2014
Line 74:		Line 74:
	** Only one hue apart from black should be use in text formatting and this should be a named colour, having a standardized ratio of RGB.		** Only one hue apart from black should be use in text formatting and this should be a named colour, having a standardized ratio of RGB.
	** The only possible exception to this rule is marking links as having been followed. In this case, possibly a grey shade is best, or the matched color to the chosen hue from a recognized color wheel (ideally one intended for a two tone design)		** The only possible exception to this rule is marking links as having been followed. In this case, possibly a grey shade is best, or the matched color to the chosen hue from a recognized color wheel (ideally one intended for a two tone design)

			[[Category:User experience]]

81.17.27.234: /* Golden Ratio of Proportionality */

2014-03-29T08:14:03Z

Golden Ratio of Proportionality

← Older revision		Revision as of 08:14, 29 March 2014
Line 1:		Line 1:
	=== Golden Ratio of Proportionality ===		=== [http://en.wikipedia.org/wiki/Golden_ratio Golden Ratio] of Proportionality ===
	[http://www.pearsonified.com/2011/12/golden-ratio-typography.php This resource] is summarised for our purposes here and pertains to '''Line length, Line height and Font Size''':		[http://www.pearsonified.com/2011/12/golden-ratio-typography.php This resource] is summarised for our purposes here and pertains to '''Line length, Line height and Font Size''':
	* The Golden Ratio is approximately = 1.618		* The Golden Ratio is approximately = 1.618

Mrbluze: /* Golden Ratio of Proportionality */

2014-03-29T06:18:34Z

Golden Ratio of Proportionality

← Older revision		Revision as of 06:18, 29 March 2014
Line 10:		Line 10:
	* The same website provides a calculator:		* The same website provides a calculator:
	See [http://www.pearsonified.com/typography/ Typography Calculator]		See [http://www.pearsonified.com/typography/ Typography Calculator]
			==== Why do Golden Ratios work for visual appearance? ====
			* The brain is geared for nature, in which natural logarithms and other well known patterns such as the Golden Ratio, are ubiquitous.

	=== General Guidelines for Font Choice ===		=== General Guidelines for Font Choice ===
	* The actual font face chosen is a matter of '''taste, practicality and evidence basis'''		* The actual font face chosen is a matter of '''taste, practicality and evidence basis'''

Mrbluze: /* Lessons */

2014-03-29T05:47:19Z

Lessons

← Older revision		Revision as of 05:47, 29 March 2014
Line 47:		Line 47:
	==== Lessons ====		==== Lessons ====
	* Minimal lines, shades and distracting images should be used, to aid focus on the content (text) of the site.		* Minimal lines, shades and distracting images should be used, to aid focus on the content (text) of the site.
	* Font choice should be a compromise between ~~asthetics~~ and readability. It is for this reason that Microsoft chose Calibri, as it borders on being a serif font in many respects, but is recognized as sans serif.		* Font choice should be a compromise between aesthetics and readability. It is for this reason that, as displays became more photo-realistic, Microsoft chose Calibri, as it borders on being a serif font in many respects, but is recognized as sans serif. Microsoft's research in font readability has, at least until recently, been ahead of the others.
			* We should consider returning to the use of a minimal serif, or borerline sans-serif font, rather than Verdana which is a classic sans-serif font and arguably a bit dated.
			* As fonts are very inexpensive (less than $100) we could consider buying a font that suits our needs.

	=== General Guidelines for Styles ===		=== General Guidelines for Styles ===
	==== Drop Caps ====		==== Drop Caps ====

Mrbluze at 05:36, 29 March 2014

2014-03-29T05:36:59Z

Mrbluze: /* General Guidelines for Font Choice */

2014-03-29T05:30:48Z

General Guidelines for Font Choice

← Older revision		Revision as of 05:30, 29 March 2014
Line 46:		Line 46:
	**** Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.		**** Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.
	*** The lessons are therefore:		*** The lessons are therefore:
	****		**** Minimal lines, shades and distracting images should be used, to aid focus on the content (text) of the site.
	**** ~~Minimal lines~~, ~~shades and~~		**** Font choice should be a compromise between asthetics and readability. It is for this reason that Microsoft chose Calibri, as it borders on being a serif font in many respects, but is recognized as sans serif.

	=== General Guidelines for Styles ===		=== General Guidelines for Styles ===

Mrbluze at 05:28, 29 March 2014

2014-03-29T05:28:43Z

← Older revision		Revision as of 05:28, 29 March 2014
Line 42:		Line 42:
	**** If there is a lot of shadow and many lines and details, the visual cortex '''has to work harder''' to process this information and make sense of it.		**** If there is a lot of shadow and many lines and details, the visual cortex '''has to work harder''' to process this information and make sense of it.
	**** On the other hand, the visual cortex of primates is adapted to detecting vertical and horizontal lines and their intersections over lines or curves in other directions		**** On the other hand, the visual cortex of primates is adapted to detecting vertical and horizontal lines and their intersections over lines or curves in other directions
	*** The accessory visual cortex interprets shapes.		*** The accessory visual cortex interprets shapes. The harder this is, the more work it takes to read.
	**** Most of advanced readers recognize words as shapes rather than reading individual letters. This is aided by the use of familiar fonts which give a regular shape for a given word.		**** Most of advanced readers recognize words as shapes rather than reading individual letters. This is aided by the use of familiar fonts which give a regular shape for a given word.
	**** Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.		**** Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.

Mrbluze: /* General Guidelines for Font Choice */

2014-03-29T05:26:35Z

General Guidelines for Font Choice

Mrbluze: /* General Guidelines for Font Choice */

2014-03-29T05:21:11Z

General Guidelines for Font Choice

← Older revision		Revision as of 05:21, 29 March 2014
Line 33:		Line 33:
	** Neuroscience gives a lot of insight as to why some fonts and visual layouts are better than others		** Neuroscience gives a lot of insight as to why some fonts and visual layouts are better than others
	*** The retina has nearly all of its resolution concentrated in the centre of vision, where there is maximal colour and contrast discernment. The size of this area is small, about the size of two thumbs in front of you, arms outstretched.		*** The retina has nearly all of its resolution concentrated in the centre of vision, where there is maximal colour and contrast discernment. The size of this area is small, about the size of two thumbs in front of you, arms outstretched.
			**** The significance of this is that the eye takes in a certain line-length before it must flick across to the next set of text. If the text is tiny, the eye must rest in one place for longer while the cortex process the information before it can flick across, and it is likely to flick across a smaller distance if the text is small (eg: sitting far away, or text too small). The reader will subconsciously adjust the distance from eye to page depending on the text size and display width. If there is a great mismatch between text size and display width, the processing work is too great, which is interpreted as discomfort.
	*** The peripheral vision is dedicated to motion detection and lacks colour or detail. The perception that peripheral vision is complete is an illusion, as the brain invents the colours and textures of your peripheral vision based on experience and what has been captured in the central vision.		*** The peripheral vision is dedicated to motion detection and lacks colour or detail. The perception that peripheral vision is complete is an illusion, as the brain invents the colours and textures of your peripheral vision based on experience and what has been captured in the central vision.
	*** The blind spot (upper-outer vision) is necessary due to the blood supply to the retina, and is located such that the opposite eye can compensate for it, but not always.		*** The blind spot (upper-outer vision) is necessary due to the blood supply to the retina, and is located such that the opposite eye can compensate for it, but not always.

Mrbluze: /* General Guidelines for Font Choice */

2014-03-29T05:14:44Z

General Guidelines for Font Choice

@@ Line 31: / Line 31: @@
 ** Microsoft, based on their studies, have retired Verdana and Arial in favour of the Calibri family of fonts
 *** This is a sans-serif font but differs from the others in that it is thinner in points to become lighter, which the studies showed improves readability.
 === General Guidelines for Styles ===

← Older revision		Revision as of 05:36, 29 March 2014
Line 12:		Line 12:
	=== General Guidelines for Font Choice ===		=== General Guidelines for Font Choice ===
	* The actual font face chosen is a matter of '''taste, practicality and evidence basis'''		* The actual font face chosen is a matter of '''taste, practicality and evidence basis'''
	* Taste:		==== Taste ====
	** The current fashion is to use sans-serif fonts, however with increasing display desity and the fact that sans-serif has been in vogue a long time, this fashion is set to change back to serif		* The current fashion is to use sans-serif fonts, however with increasing display desity and the fact that sans-serif has been in vogue a long time, this fashion is set to change back to serif
	** Titles should continue to be sans-serif, as we are a tech / geek oriented site and this font choice has been usual in such circles for many decades.		* Titles should continue to be sans-serif, as we are a tech / geek oriented site and this font choice has been usual in such circles for many decades.
	* Practicality:		==== Practicality ====
	** Old screen displays come in at around 96 pixels per inch		* Old screen displays come in at around 96 pixels per inch
	** New screen displays come in at 200+ pixels per inch:		* New screen displays come in at 200+ pixels per inch:
	*** Smartphones exceed 300 pixels per inch		** Smartphones exceed 300 pixels per inch
	*** Retina and similar high resolution displays are 250+ pixels per inch		** Retina and similar high resolution displays are 250+ pixels per inch
	** Web browsers are now re-interpreting pixel and point sizes to make sure that fonts are not impossibly small on high resolution displays		* Web browsers are now re-interpreting pixel and point sizes to make sure that fonts are not impossibly small on high resolution displays
	*** This is bad because no two web browsers are using the same methods for this fudge factor		** This is bad because no two web browsers are using the same methods for this fudge factor
	*** We therefore need to start using a more practical methods than px and pt for size definition. The use of em is probably the best option now.		** We therefore need to start using a more practical methods than px and pt for size definition. The use of em is probably the best option now.
	* Evidence Basis:		==== Evidence Basis ====
	** Older studies for screen fonts relied on lower resolution displays than those currently being manufactured. Their validity is now doubtful.		* Older studies for screen fonts relied on lower resolution displays than those currently being manufactured. Their validity is now doubtful.
	*** [http://people.dsv.su.se/~jpalme/internet-course/font-report.html A Swedish study by Julia Barrantes and Elahe Jalili Baleh ] showed (at 96 pixels per inch):		** [http://people.dsv.su.se/~jpalme/internet-course/font-report.html A Swedish study by Julia Barrantes and Elahe Jalili Baleh ] showed (at 96 pixels per inch):
	**** 80 characters per line is faster to read than 40		*** 80 characters per line is faster to read than 40
	**** Times New Roman is ''much more'' readable than Verdana at equal pixel size		*** Times New Roman is ''much more'' readable than Verdana at equal pixel size
	**** Arial is ''somewhat more'' readable than Verdana		*** Arial is ''somewhat more'' readable than Verdana
	** Microsoft, based on their studies, have retired Verdana and Arial in favour of the Calibri family of fonts		* Microsoft, based on their studies, have retired Verdana and Arial in favour of the Calibri family of fonts
	*** This is a sans-serif font but differs from the others in that it is thinner in points to become lighter, which the studies showed improves readability.		** This is a sans-serif font but differs from the others in that it is thinner in points to become lighter, which the studies showed improves readability.
	** Neuroscience gives a lot of insight as to why some fonts and visual layouts are better than others		* Neuroscience gives a lot of insight as to why some fonts and visual layouts are better than others
	*** The retina has nearly all of its resolution concentrated in the centre of vision, where there is maximal colour and contrast discernment. The size of this area is small, about the size of two thumbs in front of you, arms outstretched.		** The retina has nearly all of its resolution concentrated in the centre of vision, where there is maximal colour and contrast discernment. The size of this area is small, about the size of two thumbs in front of you, arms outstretched.
	**** The significance of this is that the eye takes in a certain line-length before it must flick across to the next set of text. If the text is tiny, the eye must rest in one place for longer while the cortex processes the information before it can flick across, and it is likely to flick across a smaller distance if the text is small (eg: sitting far away, or text too small). The reader will subconsciously adjust the distance from eye to page depending on the text size and display width. If there is a great mismatch between text size and display width, the processing work is too great, which is interpreted as discomfort.		*** The significance of this is that the eye takes in a certain line-length before it must flick across to the next set of text. If the text is tiny, the eye must rest in one place for longer while the cortex processes the information before it can flick across, and it is likely to flick across a smaller distance if the text is small (eg: sitting far away, or text too small). The reader will subconsciously adjust the distance from eye to page depending on the text size and display width. If there is a great mismatch between text size and display width, the processing work is too great, which is interpreted as discomfort.
	**** This is the reason why studies show consistency in their results on readability. The evidence is believable because the mechanism is well understood.		*** This is the reason why studies show consistency in their results on readability. The evidence is believable because the mechanism is well understood.
	*** The peripheral vision is dedicated to motion detection and lacks colour or detail. The perception that peripheral vision is complete is an illusion, as the brain invents the colours and textures of your peripheral vision based on experience and what has been captured in the central vision.		** The peripheral vision is dedicated to motion detection and lacks colour or detail. The perception that peripheral vision is complete is an illusion, as the brain invents the colours and textures of your peripheral vision based on experience and what has been captured in the central vision.
	*** The blind spot (upper-outer vision) is necessary due to the blood supply to the retina, and is located such that the opposite eye can compensate for it, but not always.		** The blind spot (upper-outer vision) is necessary due to the blood supply to the retina, and is located such that the opposite eye can compensate for it, but not always.
	*** The eye enhances what you see by center-surround antagonism:		** The eye enhances what you see by center-surround antagonism:
	**** Bright and dark shade is sent to the visual cortex, which processes the signal		*** Bright and dark shade is sent to the visual cortex, which processes the signal
	**** If the contrast between bright and dark is low, the cortex amplifies the difference to enhance edge and texture detection		*** If the contrast between bright and dark is low, the cortex amplifies the difference to enhance edge and texture detection
	**** If there is a lot of shadow and many lines and details, the visual cortex '''has to work harder''' to process this information and make sense of it.		*** If there is a lot of shadow and many lines and details, the visual cortex '''has to work harder''' to process this information and make sense of it.
	**** On the other hand, the visual cortex of primates is adapted to detecting vertical and horizontal lines and their intersections over lines or curves in other directions		*** On the other hand, the visual cortex of primates is adapted to detecting vertical and horizontal lines and their intersections over lines or curves in other directions
	*** The accessory visual cortex interprets shapes. The harder this is, the more work it takes to read.		** The accessory visual cortex interprets shapes. The harder this is, the more work it takes to read.
	**** Most of advanced readers recognize words as shapes rather than reading individual letters. This is aided by the use of familiar fonts which give a regular shape for a given word.		*** Most of advanced readers recognize words as shapes rather than reading individual letters. This is aided by the use of familiar fonts which give a regular shape for a given word.
	**** Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.		*** Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.
	*** The lessons are therefore:		==== Lessons ====
	~~**~~ Minimal lines, shades and distracting images should be used, to aid focus on the content (text) of the site.		* Minimal lines, shades and distracting images should be used, to aid focus on the content (text) of the site.
	~~**~~ Font choice should be a compromise between asthetics and readability. It is for this reason that Microsoft chose Calibri, as it borders on being a serif font in many respects, but is recognized as sans serif.		* Font choice should be a compromise between asthetics and readability. It is for this reason that Microsoft chose Calibri, as it borders on being a serif font in many respects, but is recognized as sans serif.

	=== General Guidelines for Styles ===		=== General Guidelines for Styles ===
	==== Drop Caps ====		==== Drop Caps ====

← Older revision		Revision as of 05:26, 29 March 2014
Line 33:		Line 33:
	** Neuroscience gives a lot of insight as to why some fonts and visual layouts are better than others		** Neuroscience gives a lot of insight as to why some fonts and visual layouts are better than others
	*** The retina has nearly all of its resolution concentrated in the centre of vision, where there is maximal colour and contrast discernment. The size of this area is small, about the size of two thumbs in front of you, arms outstretched.		*** The retina has nearly all of its resolution concentrated in the centre of vision, where there is maximal colour and contrast discernment. The size of this area is small, about the size of two thumbs in front of you, arms outstretched.
	**** The significance of this is that the eye takes in a certain line-length before it must flick across to the next set of text. If the text is tiny, the eye must rest in one place for longer while the cortex ~~process~~ the information before it can flick across, and it is likely to flick across a smaller distance if the text is small (eg: sitting far away, or text too small). The reader will subconsciously adjust the distance from eye to page depending on the text size and display width. If there is a great mismatch between text size and display width, the processing work is too great, which is interpreted as discomfort.		**** The significance of this is that the eye takes in a certain line-length before it must flick across to the next set of text. If the text is tiny, the eye must rest in one place for longer while the cortex processes the information before it can flick across, and it is likely to flick across a smaller distance if the text is small (eg: sitting far away, or text too small). The reader will subconsciously adjust the distance from eye to page depending on the text size and display width. If there is a great mismatch between text size and display width, the processing work is too great, which is interpreted as discomfort.
			**** This is the reason why studies show consistency in their results on readability. The evidence is believable because the mechanism is well understood.
	*** The peripheral vision is dedicated to motion detection and lacks colour or detail. The perception that peripheral vision is complete is an illusion, as the brain invents the colours and textures of your peripheral vision based on experience and what has been captured in the central vision.		*** The peripheral vision is dedicated to motion detection and lacks colour or detail. The perception that peripheral vision is complete is an illusion, as the brain invents the colours and textures of your peripheral vision based on experience and what has been captured in the central vision.
	*** The blind spot (upper-outer vision) is necessary due to the blood supply to the retina, and is located such that the opposite eye can compensate for it, but not always.		*** The blind spot (upper-outer vision) is necessary due to the blood supply to the retina, and is located such that the opposite eye can compensate for it, but not always.
Line 41:		Line 42:
	**** If there is a lot of shadow and many lines and details, the visual cortex '''has to work harder''' to process this information and make sense of it.		**** If there is a lot of shadow and many lines and details, the visual cortex '''has to work harder''' to process this information and make sense of it.
	**** On the other hand, the visual cortex of primates is adapted to detecting vertical and horizontal lines and their intersections over lines or curves in other directions		**** On the other hand, the visual cortex of primates is adapted to detecting vertical and horizontal lines and their intersections over lines or curves in other directions
	*** The accessory visual cortex interprets shapes		*** The accessory visual cortex interprets shapes.
			**** Most of advanced readers recognize words as shapes rather than reading individual letters. This is aided by the use of familiar fonts which give a regular shape for a given word.
			**** Placing serifs on letters enhances the uniqueness of their shape and this is why serif text is more readable. However modern taste is for simplicity and minimalism, and older displays handled serif text poorly, which is why sans-serif text is largely used.
	*** The lessons are therefore:		*** The lessons are therefore:
	****		****