San Serif vs Serif.
Arguments in favor of serif typefaces
· Serifs are used to guide the horizontal “flow” of the eyes; The lack of serifs is said to contribute to a vertical stress in sans serifs, which is supposed to compete with the horizontal flow of reading
· Serifs are used to increase spacing between letters and words to aid legibility
· Serifs are used to increase contrast (and irregularity) between different letters to improve identification
Arguments in favor of sans serif typefaces
· Sans serifs are better on the web
· Sans serif is better at small sizes. Sans serif fonts survive reproduction and smearing because of their simple forms
· Sans serif is better for children learning to read
Colour Schemes
A color scheme for layout is much like another colour scheme it is just that different considerations have to be made in accordance with context and purpose. These include paper, size, location, tone of voice and many more.
'When you are sitting down to a new colour project, the first and most important task is analysing the job. Objectivity and common sense will help set the tone'
- Graphic Designer's Colour Handbook by Rick Sutherland and Barb Karg.
The application of colour theory allows colour schemes to work. As long as sufficient thought has been put into why each colour is being utilised and how the colours interact with one another then a colour scheme should work.
The best way to work with color is to start with none.
Removing color from a design reveals fundamental problems that should be addressed before worrying about which shade of chartreuse works best. If the design doesn’t feel right in black and white, then it’s time to make changes.
Does each page have a clear purpose? Does the design guide readers through the content? Is the content compelling, inspiring or informative? Are the headings clear? Do the links contrast with the other text? Color improves these effects, but problems in layout, type and organization can’t be solved by color alone.
To do a redesign, first suck out the color. The simple act of washing out over-saturated primaries really shows where a website stands. (Actually, you should really start a redesign by re-evaluating your goals and content, but that’s another story.)
Sometimes removing color is a solution in itself.
Anatomy, Readability and Legibility
Legibility is concerned with how easy it is to distinguish individual letters. The simpler a type design is, the more legible it is. So why do less-than-legible typefaces even exist? Because typeface designers love to create unique and distinctive designs, of course. While it is generally better to always choose a legible type, there are times when distinctiveness may be more important than legibility. For example, when selecting a font for a unique and distinctive company logo.
There are three design features that make a typeface legible:
1. Large X-Height:
A large x-height increases the negative space within each letter. This makes it’s shape much more discernable.
2. Large Counters:
The negative space within a letter is called a counter. When a typeface has large counters, it is easier to distinguish the shape of each individual letter.
3. Simple Letterforms:
The simpler a letterform, the more legible it is. Sans serif types are generally more legible than their serif counterparts because they do not have any serifs interfering with the shapes of the letters. However, this does not mean that sans serifs are necessarily easier to READ in text. Actually, serif types are generally considered MORE readable. The exception to this rule is on-screen. Because of on-screen distortion, sans serif is the best choice for readability.
Some common typefaces which meet these three criteria are: Helvetica, Novarese, New Century Schoolbook, Cheltenham, Times Roman, Gill Sans, and Baskerville.
Readability refers to the ease with which a reader can scan over paragraphs of type. In other words, how easy it is to read! While legibility is basically dependent on the typeface design, readability is dependent on the manipulation or handling of the type. A highly legible typeface can be made unreadable by poor typographic design. Factors which affect readability include: line lengths, point size, leading, typeface selection, spacing, type alignment, and background.
Avoid Capitals
Ninety-five percent of what we read is in lowercase letters. Not only are we much more used to reading them, but they also assist us because they create a recognizable shape (coastline). Words in capital letters have no distinctive shape (or coastline).
Use a size suitable for your audience. Ideal text type size ranges from 9-12 point depending on the x-height. Remember older people may need a larger point size
There are three design features that make a typeface legible:
1. Large X-Height:
A large x-height increases the negative space within each letter. This makes it’s shape much more discernable.
2. Large Counters:
The negative space within a letter is called a counter. When a typeface has large counters, it is easier to distinguish the shape of each individual letter.
3. Simple Letterforms:
The simpler a letterform, the more legible it is. Sans serif types are generally more legible than their serif counterparts because they do not have any serifs interfering with the shapes of the letters. However, this does not mean that sans serifs are necessarily easier to READ in text. Actually, serif types are generally considered MORE readable. The exception to this rule is on-screen. Because of on-screen distortion, sans serif is the best choice for readability.
Some common typefaces which meet these three criteria are: Helvetica, Novarese, New Century Schoolbook, Cheltenham, Times Roman, Gill Sans, and Baskerville.
Readability refers to the ease with which a reader can scan over paragraphs of type. In other words, how easy it is to read! While legibility is basically dependent on the typeface design, readability is dependent on the manipulation or handling of the type. A highly legible typeface can be made unreadable by poor typographic design. Factors which affect readability include: line lengths, point size, leading, typeface selection, spacing, type alignment, and background.
Avoid Capitals
Ninety-five percent of what we read is in lowercase letters. Not only are we much more used to reading them, but they also assist us because they create a recognizable shape (coastline). Words in capital letters have no distinctive shape (or coastline).
Use a size suitable for your audience. Ideal text type size ranges from 9-12 point depending on the x-height. Remember older people may need a larger point size
to read.
Don't use a too long or too short line length.
Very short or long lines disrupt the reader’s rhythm, making it harder to read. Very short lines run the risk of creating rivers if justified alignments used. If long lines are unavoidable, extra leading can help offset the problem. Very long lines disrupt reading. When the eyes get tired, they are no longer able to find the beginning of the next line of type. An ideal line length can be estimated by doubling the point size. For instance, 12 point type should have a line length of 24 picas (or four inches). Generally, shorter lines should be used for typefaces with small x-heights and thick/thin designs, and also bold and italic fonts. Usually a serif typeface can tolerate a longer line than a sans serif.
Create equal word spacing.
If word spaces are too large, they break the lines up into separate elements and disrupt reading. This is especially true if justified type is used on a short line length. If the word spaces are too small, it becomes difficult to distinguish each separate word. A good trick to use to check word spacing is to turn the page upside down and squint at it. Excessively large word spaces will stand out. Be especially careful with condensed and expanded fonts, reversed type, and vertical, narrow typefaces (like Bodoni).
Create even letter spacing.
When letters are correctly spaced, a paragraph of type takes on an even color. From a distance it should look like a screened gray block. The shade of gray will depend on the heaviness of the typeface. Any interference with normal letter spacing is very hard to read. If the letter spacing is uneven, darker spots stand out in places against the gray color. Often, tight tracking will create uneven letter spacing.
Think about the background.
An important factor in the readability of type is the background on which it is placed. This includes not only any printed blocks of color, screens or black backgrounds, but also the kind of paper the type appears on. When selecting a typeface, think carefully about what kind of background it will be placed on. For instance, a fine, light typeface will not stand out well on black or screened background, or on textured/glossy paper. To avoid readability problems, never place text type on black or screened backgrounds. It’s too hard to read!
The minimum size would depend on the font, the weight, and the colours involved. Solid 100% K text on a white or light background is best. If you're using white text, it will likely fill in if the point size is too small, especially if the surrounding colour is using more than one ink. If you're using a coloured text that uses multiple inks, you run the risk of bad registration causing your text to look blurry.
There are actually two types of type.
Some fonts read better when small and others when large. Verdana for example is designed slightly larger than other fonts making it very readable at small sizes and explains why it’s so often used in online body copy.
The question you probably most want to know is what size should you use. There isn’t a simple answer. Compare the following two fonts.
Don't use a too long or too short line length.
Very short or long lines disrupt the reader’s rhythm, making it harder to read. Very short lines run the risk of creating rivers if justified alignments used. If long lines are unavoidable, extra leading can help offset the problem. Very long lines disrupt reading. When the eyes get tired, they are no longer able to find the beginning of the next line of type. An ideal line length can be estimated by doubling the point size. For instance, 12 point type should have a line length of 24 picas (or four inches). Generally, shorter lines should be used for typefaces with small x-heights and thick/thin designs, and also bold and italic fonts. Usually a serif typeface can tolerate a longer line than a sans serif.
Create equal word spacing.
If word spaces are too large, they break the lines up into separate elements and disrupt reading. This is especially true if justified type is used on a short line length. If the word spaces are too small, it becomes difficult to distinguish each separate word. A good trick to use to check word spacing is to turn the page upside down and squint at it. Excessively large word spaces will stand out. Be especially careful with condensed and expanded fonts, reversed type, and vertical, narrow typefaces (like Bodoni).
Create even letter spacing.
When letters are correctly spaced, a paragraph of type takes on an even color. From a distance it should look like a screened gray block. The shade of gray will depend on the heaviness of the typeface. Any interference with normal letter spacing is very hard to read. If the letter spacing is uneven, darker spots stand out in places against the gray color. Often, tight tracking will create uneven letter spacing.
Think about the background.
An important factor in the readability of type is the background on which it is placed. This includes not only any printed blocks of color, screens or black backgrounds, but also the kind of paper the type appears on. When selecting a typeface, think carefully about what kind of background it will be placed on. For instance, a fine, light typeface will not stand out well on black or screened background, or on textured/glossy paper. To avoid readability problems, never place text type on black or screened backgrounds. It’s too hard to read!
The minimum size would depend on the font, the weight, and the colours involved. Solid 100% K text on a white or light background is best. If you're using white text, it will likely fill in if the point size is too small, especially if the surrounding colour is using more than one ink. If you're using a coloured text that uses multiple inks, you run the risk of bad registration causing your text to look blurry.
There are actually two types of type.
- Text Type is designed to be legible and readable across a variety of sizes
- Display Type is designed to attract attention and pull the reader into the text. It can be more elaborate, expressive, and have a stylish look.
Some fonts read better when small and others when large. Verdana for example is designed slightly larger than other fonts making it very readable at small sizes and explains why it’s so often used in online body copy.
The question you probably most want to know is what size should you use. There isn’t a simple answer. Compare the following two fonts.
This is 12px Verdana
This is 12px Arial
Same 12px, but a different size.
Somewhere around 10pt or 11pt is ideal for reading in print. Of course there’s no such thing as a point online even if css lets us set fonts in pt sizes. There isn’t an exact conversion between px and pt either, however using the conversion chart at Reed Design we see that 10 to 11pt corresponds to 13 to 15 px, probably a bit larger than what many sites use.
You also need to take your audience into account. I can tell you that the older I get, the larger I want to see a font-size set.
12px is a common setting for online body copy. If you go below this be prepared for people to comment how small your font is. At 14px you’ll probably start getting comments about your large font. 12px to 14 px though is probably a good range to choose for body copy, though again it will depend on other factors.
For things like captions you would usually go a little smaller and naturally for headings you would typically go bigger.
One last point about font sizes is the idea of scaling, which can be used to develop a hierarchy in your type. The basic idea is to choose font sizes that relate to one another for different elements in your design.
72.27 points make one inch. A point is 0.3515 milimeters. A point is neither metric
This is 12px Arial
Same 12px, but a different size.
Somewhere around 10pt or 11pt is ideal for reading in print. Of course there’s no such thing as a point online even if css lets us set fonts in pt sizes. There isn’t an exact conversion between px and pt either, however using the conversion chart at Reed Design we see that 10 to 11pt corresponds to 13 to 15 px, probably a bit larger than what many sites use.
You also need to take your audience into account. I can tell you that the older I get, the larger I want to see a font-size set.
12px is a common setting for online body copy. If you go below this be prepared for people to comment how small your font is. At 14px you’ll probably start getting comments about your large font. 12px to 14 px though is probably a good range to choose for body copy, though again it will depend on other factors.
For things like captions you would usually go a little smaller and naturally for headings you would typically go bigger.
One last point about font sizes is the idea of scaling, which can be used to develop a hierarchy in your type. The basic idea is to choose font sizes that relate to one another for different elements in your design.
72.27 points make one inch. A point is 0.3515 milimeters. A point is neither metric
or imperial.
Microsoft Word uses exactly 72 points to the inch. This is known as a "Postscript point" since it was the first computer design system to use the 72-per-inch convention. Postscript points aren’t technically typesetting points; i.e. two typesetters, one using PS points and the other using real points, will discover that one's fonts are slightly too big and the other's points slightly too small. Slightly means the round-off error is insignificant for all but the largest fonts.
Tex and METAFONT use 72.27 points to the inch. They support other units, like Didot point used in European typography. One Didot point is equal to 1238/1157 points.
A pica is twelve points, or about one-sixth of an inch, or about four millimeters. 12 Didot points are one cicero.
Microsoft Word uses exactly 72 points to the inch. This is known as a "Postscript point" since it was the first computer design system to use the 72-per-inch convention. Postscript points aren’t technically typesetting points; i.e. two typesetters, one using PS points and the other using real points, will discover that one's fonts are slightly too big and the other's points slightly too small. Slightly means the round-off error is insignificant for all but the largest fonts.
Tex and METAFONT use 72.27 points to the inch. They support other units, like Didot point used in European typography. One Didot point is equal to 1238/1157 points.
A pica is twelve points, or about one-sixth of an inch, or about four millimeters. 12 Didot points are one cicero.
Books normally use a point size of 10.
Italics
To specify titles of certain creative
works
Such works are: books, magazines, newspapers, pamphlets/booklets, plays,
long poems, movies, TV shows, radio shows, musical compositions, choreographic works, works of visual art, comic strips, and software programs. Make sure you italicize the entire title—if there is a question mark in the title itself, then italicize it.
- To specify certain vehicles - Such as ships, aircraft, spacecrafts, and trains.
- To specify foreign words within English text
- To specify scientific names of plants and animals
- To specify words, letters, and numbers used as themselves - To achieve the same effect, one may also place these in quotation marks.
"The purpose of italic typefaces is to aid the reader’s comprehension by separating off certain words and phrases from their surrounding text." - http://www.writingservices.eu/Italics-When-Use-Them.htm
More research from that page:
[1] The names of ships and aircraft; eg: ‘The Caribbean Cruiser sank yesterday.’ This is the oldest when-to-use-italics rule. It allows the reader to quickly grasp what is being referred to in the message.
[2] The titles of poems; eg: ‘As You Go Dancing by James Stewart is famous among the literati of the Arabian Gulf.’ This is another very traditional use of italics that enables quick reader-uptake.
[3] Foreign words; eg: ‘We turned left and found ourselves in a cul de sac.’ Another very traditional use of italics that makes for quicker reading.
[4] The titles of books, newspapers, articles and stories within a sentence on their own without explanation; eg: ‘The Saturday edition of the Limerick Leader was always on the streets by Friday afternoon.’
However titles that appear within larger works are not italicized but are set off in quotation marks; eg, ‘“An Irishman’s Diary” in the Irish Times is sometimes interesting.’
[5] Latin phrases used to classify living things; eg: ‘Many people wonder why mankind is referred to ashomo sapiens.’ Another use of italics that has been around ab aeterno.
[6] Where a word is used as an example rather than for its meaning; eg: ‘The word Kennedy is a proper noun.’ This is neater than setting the noun within single quotes as in: ‘The word ‘Kennedy’ is a proper noun.’
[7] For introducing new terms; eg: ‘In Freudian psychology reference is made to the ego, the super-ego, and the id.’ This is a neat solution for highlighting words that will probably be explained later.
[8] For the subjects of definitions; eg: ‘An odd number is any number that cannot be divided by two.’ This is useful for the reader as, should he or she wish to refer back to the definition later, a word in italics among a sea of roman letters is easy to find.
[9] For mathematical symbols: eg: ‘The standard acceleration of gravity g is 9.81183 metres per second per second.’ The symbol does not need to be surrounded by commas or single quotes which would be required if it were in roman type.
[10] For emphasis; eg: ‘Janice wasn’t the only girl at the party.’ The use of italics for emphasis is less intrusive than bold and more subtly suggestive.
[11] To indicate a character's internal reflections in stories; eg: ‘This just does not seem right, Janice thought.’ However many writers prefer other ways of expressing inner thoughts.
[12] Using a letter or number as a noun; eg: 'He was vexed because they had left out the d in his name.' However many writers would prefer to put a letter or number used in this way between quotes; eg, 'He was vexed because they had left out the ‘d’ in his name.’
Colour modes and how to apply it to print
What are the basic structures of spectral pigment colour theory and how does this apply to print and screen design? (what is RGB and CMYK)
RGB:
http://www.novaprinting.ca/images/RGB.gif
The RGB colour model is based on the theory that all visible colours can be created using the primary additive colours red, green and blue. These colours are known as primary additives because when combined in equal amounts they produce white. When two or three of them are combined in different amounts, other colours are produced. For example, combining red and green in equal amounts creates yellow, green and blue creates cyan, and red and blue creates magenta.
The RGB model is so important to graphic design because it is used in computer monitors. The screen you are reading this very article on is using additive colors to display images and text. Therefore, when designing websites (and other on-screen projects such as presentations), the RGB model is used because the final product is viewed on a computer display.
RGB is a device-dependent color model: different devices detect or reproduce a given RGB value differently, since the color elements (such as phosphors or dyes) and their response to the individual R, G, and B levels vary from manufacturer to manufacturer, or even in the same device over time. Thus an RGB value does not define the same colour across devices without some kind of color management.
Typical RGB input devices are colour TV and video cameras, image scanners, and digital cameras. Typic
al RGB output devices are TV sets of various technologies (CRT, LCD, plasma, etc.), computer and mobile phonedisplays, video projectors, multicolor LED displays, and large screens as JumboTron, etc. Colour printers, on the other hand, are not RGB devices, but subtractive colour devices (typically CMYK colour model).
https://www.princeton.edu/~achaney/tmve/wiki100k/docs/RGB_color_model.html
RGB is based on white light, white light is made up of a wide variety of colours:
http://images.tutorvista.com/cms/images/38/dispersion-of-white-light.gif
Although light can appear white, it is actually made up of lots of different colours all added together. The amount of each colour is called the spectrum of the light.
You can see all the different colours using a prism like the one in the picture, which uses refraction (the bending of light) to split the light up. This works because different colours are bent by different amounts and so they come out of the prism in slightly different directions.
http://www.schoolsobservatory.org.uk/astro/stars/spectrum
A prism works through refraction, so what is it?
When light passes from one medium (material) to another it changes speed. This is because the speed of a wave is determined by the medium through which it is passing.
When light speeds up as it passes from one material to another, the angle of refraction is bigger than the angle of incidence.
For example, this happens when light passes from water to air or from glass to water.
http://www.bbc.co.uk/bitesize/higher/physics/radiation/refraction/revision/1/
CMYK:
http://www.novaprinting.ca/images/CMYK.jpg
CMYK is a scheme for combining primary pigments. The C stands for cyan (aqua), M stands for magenta (pink), Y for yellow, and K for Key. The key color in today's printing world is black but it has not always been. During the early days of printing, the colors used for Key have been brown, blue, or black -- whichever was the cheapest ink to acquire at any given time.
The CMYK pigment model works like an "upside-down"version of the RGB (red, green, and blue) color model. Many paint and draw programs can make use of either the RGB or the CMYK model. The RGB scheme is used mainly for computer displays, while the CMYK model is used for printed color illustrations (hard copy).
Pigments, as opposed to colors, represent energy that is not absorbed by a substance such as ink or paint. The primary pigments are cyan (C), magenta (M), and yellow (Y). Sometimes black (K) is also considered a primary pigment, although black can be obtained by combining pure cyan, magenta, and yellow in equal and large amounts.
http://whatis.techtarget.com/definition/CMYK-cyan-magenta-yellow-key
When two RGB colours are mixed equally they produce the colors of the CMYK model, known as subtractive primaries. Green and blue creates cyan (C), red and blue creates magenta (M), and red and green creates yellow (Y). Black is added to the model because it cannot be created with the 3 subtractive primaries (when combined they create a dark brown). The K, or “key,” stands for black.
CMYK in the Printing Process: The four-colour printing process uses four printing plates; one for cyan, one for magenta, one for yellow and one for black. When the colours are combined on paper (they are actually printed as small dots), the human eye sees the final image.
CMYK in Graphic Design: Graphic designers have to deal with the issue of seeing their work on screen in RGB, although their final printed piece will be in CMYK. Digital files should be converted to CMYK before sending to printers, unless otherwise specified.
Because of this issue, it is important to use “swatches” when designing if exact colour matching is important. Swatches provide a designer and client with a printed example of what a colour will look like on paper. A selected swatch colour can then be chosen in Photoshop (or a similar program) to insure the desired results. Even though the on-screen colour won’t exactly match the swatch, you know what your final colour will look like. You can also get a “proof” from a printer, which is an example of your printed piece provided before the entire job is run.
http://graphicdesign.about.com/od/colorbasics/a/cmyk.htm
http://www.catspitproductionsllc.com/Documents/Color%20Wheel%20Finished%20Website.jpg
http://www.colormatters.com/color-and-design/color-systems-rgb-and-cmyk
This means that on the whole RGB colour is made up of light and therefore there are vast amounts of colours. However CMYK is incredibly limited because it is formed through a set amount of inks- therefore the outcomes will also be limited.
http://fc06.deviantart.net/fs41/f/2009/021/7/5/CMYK___A_Minimal_Wallpaper_by_keylocker.jpg
Gamuts
A colour gamut is a subset of colours, such as those in a specific colour space.
http://www.ephotozine.com/article/understanding-colour-gamut-22681
The term colour gamut refers to the range of colours a device can reproduce, the larger or wider the gamut the more rich saturated colours available. As colour gamuts become smaller it is generally these rich saturated colours that are the first to suffer, a phenomena technically referred to as clipping. This clipping phenomenon is most apparent when converting from RGB to CMYK, with many of the rich saturated colours that were available in RGB no longer being available in CMYK.
Display devices like monitors also have gamuts or ranges of colour they can reproduce. So in order to accurately preview your images you would ideally like your display gamut to be at least as large, if not larger, than your printer’s gamut, otherwise clipping will be occurring in your preview.
http://www.wideformatonline.com/index.php/workshops/colour-management/801-colour-gamut-in-laymans-terms.html
http://myworldofcolour.files.wordpress.com/2010/04/rgb_colour_gamut.jpg
A colour gamut defines a more specific range of colours from the range of colours identifiable by the human eye (i.e., the visible spectrum). While colour imaging devices include a wide range of devices, such as digital cameras, scanners, monitors, and printers, since the range of colours they can reproduce varies, the colour gamut is established to make these differences clear and to reconcile the colours that can be used in common between devices.
http://www.eizo.com/global/library/basics/lcd_monitor_color_gamut/
Since we are talking about LCD monitors in this article, we will be looking at the RGB color gamuts and how various monitors are rated for their color. The problem is that there are a variety of different color gamuts that a screen can be rated by.
sRGB, AdobeRGB, NTSC and CIE 1976
In order to quantify how much color a device can handle, it uses one of the standardized color gamuts that define a particular range of color. The most common of the RGB based color gamuts is sRGB. This is the typical color gamut used for all computer displays, TVs, cameras, video recorders and other consumer electronics. It is one of the oldest and therefore narrowest of the color gamuts that is used in reference for computer and consumer electronics.
http://compreviews.about.com/od/monitors/a/LCDColorGamut.htm
No comments:
Post a Comment