There is bit of unclarity when word "resolution" is used for web design, image, graphic usage on web. There are multiple terms like ppi, dpi, megapixel, width x height dimension etc which all get mixed up.
One of the first things to know about any image is how is it constructed in a given space. The smallest unit in this construction is the pixel; an image is made up of many many pixels (megapixel = 1 million pixels). This pixel count is simply the multiplication of horizontal pixels by vertical pixels. The pixels are arranged in a space - the computer screen. One of the factors that determine this spatial arrangement of pixels is called ppi, pixels per inch (dpi, dots per inch is same however more commonly used in print). Most computer screens today are capable of displaying 72-96 ppi. The second factor is the screen size i.e number of pixels that are displayed on the screen at any one time. This is typically measured as number of pixels displayed across the screen horizontally (width) and vertically (height) - width x height.The dominant screen size today is 1024 x 768 (4:3 aspect ratio).
Using simple math to tie all this information together - keeping aspect ratio as 4:3, to display 1 megapixel the screen size needed would be 1152 x 864 (~ 1 million). With 72 ppi screen, this means 16.0'' wide and 12.0'' high. If the screen is any smaller, it would mean you would have to scroll across the screen to view the part of the image. However most web applications are designed to automatically scale and resize the image to fit the screen by using some sort of pixel averaging scheme to recreate the image in a smaller pixel area.
Saturday, September 19, 2009
Resolution for Print
The image resolution requirement is typically higher for print than for web. The specific requirement actually varies and depends on the end use. Lets look at some of these below:
Magazine printing. For images printed on a good quality paper, the general rule of thumb is that 300 dpi (dots per inch) resolution is good enough. This applies to both color and grayscale images. However, certain type of images like for art books, cartoons and other line arts require higher resolution (600dpi and higher).
Newspaper printing. Newspapers are printed at higher speed on lower quality paper and resolution requirements are not as high as magazines. Typically 200 dpi resolution is considered sufficient for newspapers.
Images for Billboards. The larger the pictures gets printed the lower the resolution requirement. The reason is that as the picture size increases so does the nominal viewing distance.
Adobe Photoshop software displays the image resolution. So a question comes up is if this image resolution value can be directly changed in Photoshop to convert a low resolution 72dpi image into a high resolution 300dpi image for print.The answer is no and the problem is that computer cannot generate new image pixels by itself to make it high resolution. Computer will calculate the pixels that are missing and will fill in the gaps by interpolating the existing pixel data. What you will end up with will be an image file which is 300dpi but very very blurry.
Thursday, August 20, 2009
Getting Readers to Read - Web Typography Guidelines
Over 90% of the information on web is written language, so it is only logical to pay the required attention to typography. Typography can bring aesthetic order to information helping users read and navigate.
The choice of typeface/font to use should be carefully assessed. There are wide array of things that should be considered; for example, each headline that is created should be set in text that is legible and search engine friendly, while the typeface should fit within the brand guidelines of the company but should also fit within the overall graphic design of the site.
Optimizing typography is optimizing readability, accessability, usability and overall graphic balance. The typography, however, is not only about choosing the right typeface/font. After choosing the right typeface there are certain other fundamental typographical elements which should be kept in mind while designing; some of these are discussed below-
Measure - The measure is the length of the line of type. To a reader's eye, long or short lines can be tiring and distracting. Long measure disrupts the rhythm as reader has hard time locating the next line. For optimum readability, the measure of 40-80 characters, including spaces, works good. For a single column design 65 character is considered ideal.A good rule of thumb to calculate measure is to multiply the type size by 30. So a 10px type would mean using 300px measure.
Contrast - Text exists to be read. Contrast is the core factor in determining whether or not the text is easy to read. Make sure the text contrasts enough with the background to make it easily readable. Though this sounds simple but it requires some careful planning which depending on the degree of contrast; for example, white text on black background is a high contrast combination and as such it is advisable to increase leading and tracking and decrease the font-weight for greater readability (refer the glossary below for more information on the terms used here).
Size - Do not set the body text below 10 or 12px. The sites are read across different screen sizes; what is readable on a large high resolution monitor might not be so on a 15inch laptop screen.
Hierarchy - Every typographic layout needs the essential element of hierarchy. It show the reader where to start reading and where to read through, it differentiates headers from body text. Varying type sizes is one of the best ways to differentiate content. Colors and other graphic elements also help but different size of type, used consistenly through the pages, clarify the relative importance of the content to the readers. If the readers are in a hurry, they can easily pick out the important bits. Hierarchy can be achieved not only by varying the size, but by using different styles; for example, all-caps, or using italics for sub-headings. Serif and San Serif faces can also be mixed to good effect.
Space - Let the type breathe. The negative or white space will help focus attention on the text. Attention should be given to micro white spaces that sit inside the type as well as the macro white spaces that shape the blocks of text. Likewise the line-height should be carefully chosen.
The choice of typeface/font to use should be carefully assessed. There are wide array of things that should be considered; for example, each headline that is created should be set in text that is legible and search engine friendly, while the typeface should fit within the brand guidelines of the company but should also fit within the overall graphic design of the site.
Optimizing typography is optimizing readability, accessability, usability and overall graphic balance. The typography, however, is not only about choosing the right typeface/font. After choosing the right typeface there are certain other fundamental typographical elements which should be kept in mind while designing; some of these are discussed below-
Measure - The measure is the length of the line of type. To a reader's eye, long or short lines can be tiring and distracting. Long measure disrupts the rhythm as reader has hard time locating the next line. For optimum readability, the measure of 40-80 characters, including spaces, works good. For a single column design 65 character is considered ideal.A good rule of thumb to calculate measure is to multiply the type size by 30. So a 10px type would mean using 300px measure.
Contrast - Text exists to be read. Contrast is the core factor in determining whether or not the text is easy to read. Make sure the text contrasts enough with the background to make it easily readable. Though this sounds simple but it requires some careful planning which depending on the degree of contrast; for example, white text on black background is a high contrast combination and as such it is advisable to increase leading and tracking and decrease the font-weight for greater readability (refer the glossary below for more information on the terms used here).
Size - Do not set the body text below 10 or 12px. The sites are read across different screen sizes; what is readable on a large high resolution monitor might not be so on a 15inch laptop screen.
Hierarchy - Every typographic layout needs the essential element of hierarchy. It show the reader where to start reading and where to read through, it differentiates headers from body text. Varying type sizes is one of the best ways to differentiate content. Colors and other graphic elements also help but different size of type, used consistenly through the pages, clarify the relative importance of the content to the readers. If the readers are in a hurry, they can easily pick out the important bits. Hierarchy can be achieved not only by varying the size, but by using different styles; for example, all-caps, or using italics for sub-headings. Serif and San Serif faces can also be mixed to good effect.
Space - Let the type breathe. The negative or white space will help focus attention on the text. Attention should be given to micro white spaces that sit inside the type as well as the macro white spaces that shape the blocks of text. Likewise the line-height should be carefully chosen.
Fonts for Financials
Financial reports offer designers great opportunity to showcase their typographic skills. The dense technical text, changing rythms of introduction, statements, analysis, disclosure call for a beautiful and robust typographic system to assist organize the text. Numbers in financial data, tables, charts, graphs all studded with headings, legends and footnotes present unique challenges. All these requirements place special burden on the fonts. Listed below are few important points to consider when choosing the fonts for such purpose.
Tabular Figures - The numbers in the font can reveal what typographic design will work. For having numbers in sentences, font needs to support variable-length "proportional" figures; however, for aligning number in
columns, font also needs to support "monospaced" figures. This is neeeded because you want the width for the numbers within the column to remain the same, irrespective of the digits used. At times, you would want to use boldface to highlight a particular set of digits, but you still want the overall column width to remain the same. Example of "monospaced" numbers is given here.
Grades - The typeface designed for text needs to account for paper on which it is printed. Some fonts have "grades" - each grade very slightly darker then the last. When doing typographic design, it is needed to fine tune the color of the font without changing its overall shape. There are variations in printing conditions like different paper types (gloss sheets and uncoated sheets). Using graded fonts provide such precise control over the effect of ink on the paper - and all this without impacting the overall copyfit.
Extended Character Set - Ensure that the typeface can handle most complicated content. At times, numbers in the financial reports require special symbols like monetary signs beyond dollars, pounds and yen. So make sure to choose a font that contains all trimmings for informational typography; not only fixed-width figures, fractions, and extended monetary symbols, but a full range of dingbats like trend arrows, ballot boxes, pointing fists etc.
Tabular Figures - The numbers in the font can reveal what typographic design will work. For having numbers in sentences, font needs to support variable-length "proportional" figures; however, for aligning number in
columns, font also needs to support "monospaced" figures. This is neeeded because you want the width for the numbers within the column to remain the same, irrespective of the digits used. At times, you would want to use boldface to highlight a particular set of digits, but you still want the overall column width to remain the same. Example of "monospaced" numbers is given here.Grades - The typeface designed for text needs to account for paper on which it is printed. Some fonts have "grades" - each grade very slightly darker then the last. When doing typographic design, it is needed to fine tune the color of the font without changing its overall shape. There are variations in printing conditions like different paper types (gloss sheets and uncoated sheets). Using graded fonts provide such precise control over the effect of ink on the paper - and all this without impacting the overall copyfit.
Extended Character Set - Ensure that the typeface can handle most complicated content. At times, numbers in the financial reports require special symbols like monetary signs beyond dollars, pounds and yen. So make sure to choose a font that contains all trimmings for informational typography; not only fixed-width figures, fractions, and extended monetary symbols, but a full range of dingbats like trend arrows, ballot boxes, pointing fists etc.
Typographic Glossary and Anatomy
I have put together some commonly used terms in typography. These are the terms that often come up during my discussions across different projects.
Typeface - The letters, numbers and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs.
Serif - Small decorative strokes that are added to the end of a letter's main strokes. Serifs improve readability by leading the eye along the line of the type. However, if the screen/monitor resolution is low, this may not really be the case. Click the graphic towards the end of this post for more details.
Sans Serif - A typeface that does not have serifs. Generally a low contrast design. Sans serif faces lend a clean, simple appearance to documents.
Kerning - The adjustment of horizontal space between individual characters in a line text. Adjustments in kerning are especially important in large display and headline text lines. Without such adjustments, many letter combinations can look awkward.
Glyph - This is defined differently in different contexts. But most often, it is defined as a shape in a font that is used to represent a character code on screen or paper. The most common example of glyph is a letter, but the symbols and shapes in a font are also glyphs.
Anti-aliasing - Computer displays are based on pixels and fonts are forced into that square grid, which makes on-screen type look bit blocky having jagged edges. Anti aliasing is the technique of using pixels of varying shades to visually smooth the jagged edges and curves, resulting in greater readability. Usually desirable for large font types.
Logotype - A typographic trademark or symbol, frequently using distorted letterforms.
Leading - The amount of space added between lines of text.
Tracking - Average space betweeen characters in a black of text (also known as letterspacing).
There are more specific terms that are associated with typeface design. Given below is a graphic that depicts the anatomy of a typeface and provides related references.
Typeface - The letters, numbers and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs.
Serif - Small decorative strokes that are added to the end of a letter's main strokes. Serifs improve readability by leading the eye along the line of the type. However, if the screen/monitor resolution is low, this may not really be the case. Click the graphic towards the end of this post for more details.
Sans Serif - A typeface that does not have serifs. Generally a low contrast design. Sans serif faces lend a clean, simple appearance to documents.
Kerning - The adjustment of horizontal space between individual characters in a line text. Adjustments in kerning are especially important in large display and headline text lines. Without such adjustments, many letter combinations can look awkward.
Glyph - This is defined differently in different contexts. But most often, it is defined as a shape in a font that is used to represent a character code on screen or paper. The most common example of glyph is a letter, but the symbols and shapes in a font are also glyphs.
Anti-aliasing - Computer displays are based on pixels and fonts are forced into that square grid, which makes on-screen type look bit blocky having jagged edges. Anti aliasing is the technique of using pixels of varying shades to visually smooth the jagged edges and curves, resulting in greater readability. Usually desirable for large font types.
Logotype - A typographic trademark or symbol, frequently using distorted letterforms.
Leading - The amount of space added between lines of text.
Tracking - Average space betweeen characters in a black of text (also known as letterspacing).
There are more specific terms that are associated with typeface design. Given below is a graphic that depicts the anatomy of a typeface and provides related references.
Font Facts
Helvetica, created in Switzerland in 1957, is one of the most popular typefaces in the world. Although, Helvetica is the default sans-serif font for many computers, it was designed for print.
Times Roman, created for a London newspaper is also hugely popular, owing largely to its large distribution. This font is also default for many web sites, as readers can be expected to have it on their computers.
Verdana, is a sans-serif font created especially for digital display. Verdana has simpler curves, large x-height and more open form then Helvetica.
Georgia, is a serif screen typeface that also has simpler curves, open forms and generous letter spacing. Both Gerogia and Verdana have been widely distributed making them useful fonts for web sites.
Times Roman, created for a London newspaper is also hugely popular, owing largely to its large distribution. This font is also default for many web sites, as readers can be expected to have it on their computers.
Verdana, is a sans-serif font created especially for digital display. Verdana has simpler curves, large x-height and more open form then Helvetica.
Georgia, is a serif screen typeface that also has simpler curves, open forms and generous letter spacing. Both Gerogia and Verdana have been widely distributed making them useful fonts for web sites.
Monday, July 6, 2009
Color Matters
The choice of colors play an extremely important role in all graphic designs. Colors are a non verbal form of communication to the target audience. This means that choice of colors for your brand should be part of the marketing strategy. These colors will be used for all graphic designs - the logo, corporate stationery, website, print marketing materials etc.
Consider these powerful facts from various marketing studies:
Often times, choice of color becomes a matter of personal preference rather than a thought out strategic decision. You might love color Red but you have a bookkeeping business - Red in finance means sign of trouble. On the other hand, Restaurant businesses use colors Red and Orange, as these colors seem to stimulate appetite, where as color Blue suppresses it. However, color Blue is also associated with trust and is often times used in financial, banking business.
So what color is your business?
Blue - blue is perceived as calm, peace, harmony, confidence, conservatism, trustworthy, dependable, fiscally responsible and secure. Strongly associated with the sky and sea, blue is serene and universally well-liked. Blue is an especially popular color with financial institutions, as its message of stability inspires trust.
Red - red activates the pituitary gland, increasing your heart rate and causing you to breathe more rapidly. This visceral response makes red aggressive, energetic, provocative and attention-grabbing. Count on red to evoke a passionate response.
Green - green represents health, freshness, serenity, youth, environmental, good luck. Deeper greens are associated with wealth or prestige, while light greens are calming.
Yellow - yellow is associated with the Sun and so it communicates optimism, positivism, light and warmth. Certain shades seem to motivate and stimulate creative thought and energy. The eye sees bright yellows before any other color, making them great for point-of-purchase displays.Purple - with its blend of passionate red and tranquil blue, purple evokes mystery, sophistication, spirituality, royalty, wisdom, flamboyance and sensuality.
Orange - orange is associated with energy, enthusiasm, playfulness, creativity and balance. Research indicates that lighter shades appeal to upscale markets and peach tones work well for health care, restaurants and beauty salons.
Brown - earthy brown conveys simplicity, durability and stability. Though It can also evoke a negative response from consumers who relate to it as dirty. Certain shades of brown, like terracotta, can convey an upscale look.
Black - black is serious, bold, powerful and classic. It creates drama and connotes sophistication. Black works well for expensive products, but can also make a product look heavy.
White - white conveys cleanliness, simplicity and purity. It is often used in infant and health related products.
Grey - grey conveys elegance, humility, respect, reverence and subtlety.
Consider these powerful facts from various marketing studies:
- Color increases brand recognition by up to 80 percent
- Color improves readership as much as 40 percent
- Color accelerates learning from 55 percent to 78 percent
- Color increases comprehension by 73 percent
- Color advertisements are read up to 42 percent more than similar advertisements in black and white
- Color can be up to 85 percent of the reason why people decide to buy
Often times, choice of color becomes a matter of personal preference rather than a thought out strategic decision. You might love color Red but you have a bookkeeping business - Red in finance means sign of trouble. On the other hand, Restaurant businesses use colors Red and Orange, as these colors seem to stimulate appetite, where as color Blue suppresses it. However, color Blue is also associated with trust and is often times used in financial, banking business.
So what color is your business?
Blue - blue is perceived as calm, peace, harmony, confidence, conservatism, trustworthy, dependable, fiscally responsible and secure. Strongly associated with the sky and sea, blue is serene and universally well-liked. Blue is an especially popular color with financial institutions, as its message of stability inspires trust.
Red - red activates the pituitary gland, increasing your heart rate and causing you to breathe more rapidly. This visceral response makes red aggressive, energetic, provocative and attention-grabbing. Count on red to evoke a passionate response.
Green - green represents health, freshness, serenity, youth, environmental, good luck. Deeper greens are associated with wealth or prestige, while light greens are calming.
Yellow - yellow is associated with the Sun and so it communicates optimism, positivism, light and warmth. Certain shades seem to motivate and stimulate creative thought and energy. The eye sees bright yellows before any other color, making them great for point-of-purchase displays.Purple - with its blend of passionate red and tranquil blue, purple evokes mystery, sophistication, spirituality, royalty, wisdom, flamboyance and sensuality.
Orange - orange is associated with energy, enthusiasm, playfulness, creativity and balance. Research indicates that lighter shades appeal to upscale markets and peach tones work well for health care, restaurants and beauty salons.
Brown - earthy brown conveys simplicity, durability and stability. Though It can also evoke a negative response from consumers who relate to it as dirty. Certain shades of brown, like terracotta, can convey an upscale look.
Black - black is serious, bold, powerful and classic. It creates drama and connotes sophistication. Black works well for expensive products, but can also make a product look heavy.
White - white conveys cleanliness, simplicity and purity. It is often used in infant and health related products.
Grey - grey conveys elegance, humility, respect, reverence and subtlety.
Subscribe to:
Posts (Atom)
