Text Concepts rev 07/12/2014 - Duq



Text Concepts rev 07/12/2014ContrastPale pink text on a pale blue background, might match your t-shirt, but it just doesn’t read well. Text exists to be read; make sure that it contrasts enough with the background to achieve that. Typically the background is a pale color (white is pretty pale!) There are different kinds of contrast: Hue is the most intuitive measure of contrast. Hue means color. Contrast exists when colors are opposite each other on a color wheel. They don’t have to be exactly opposite. Yellow on blue, perhaps Warm colors are clustered near each other: yellow, orange, red for exampleThe further away from each other two colors are, the higher the contrast: Colors don't have to be direct opposites or have a set amount of separation to be considered contrasting.Here is a site that tells you if your text/background combination is of sufficient contrast for viewers with vision issues Content Accessibility Guidelines (WCAG) are part of a series of Web accessibility guidelines published by the W3C's Web Accessibility InitiativeEnter the hex values for your background and text and see if the contrast is sufficient (for visually impaired users) There are two “priorities” AA and AAA.???For large text (over 18 points) the desired contrast ratio for AA is 3:1 and for AAA 5:1. For small text it's 5:1 for AA and 7:1 for AAA. Suggestion: Shoot for 7.1 color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information.When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits. So we need other ways to contrast. Subject for another course. .SizeDon’t set body text below 10 or 12px and, if possible, make it bigger. The body text on most browsers defaults to 16px.Typography … Use serif fonts for heading, sans serif for body textOnscreen reading tends to be fastest with sans serif text. Type sizes vs audienceGeneral audience - Point size 10-12 Senior citizens and people with visual problems Point size - 12-14 Young children and other beginning reader Point size - 12-14 Teenagers/young adults - Point size - 10-12 Leading and dense textDense text drives people away. use leading to space the lines of text: Illustrator:Leading for CSS uses: line-heightDefault is 1.2 to 1.3WCAG 2 recommends 1.5 (Web Content Accessibility Guidelines)line-height can have the value specified in one of the following waysline-height: normal | <number> | <length> | <percentage>If you are using a number, such as 1.3 or 1.5, above, you are using a value that can be interpreted as 1.3em, or 1.5 em. A common value is in percentage…200%, for example (200% size of current font). Here is a w3schools site that demonstrates some of the various options:http:/cssref/pr_dim_line-height.aspClick Play me buttons to reveal:Font Sizes Set text size using a relative size scheme (such as percentage or em values) instead of fixed type sizes. For example, specify that a <h1> should be 140 percent of the size of an em. Or 1.4 em Makes text scalable. Always supply a list of font alternative in order of preference:For CSS: font-family:"Times New Roman",Georgia,Serif; Use fonts that come preinstalled on most browsers: HierarchyVarying type size is one of the best ways to differentiate content. As noted ,<h1> is largest, most important point, <h2 >smaller text and is a subtopic etc. HTML 4 default sizes: Colors and pretty boxes might help with the hierarchy, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages’ elements. It also means that if your readers are in a hurry, they can quickly pick out the important bits — and that could mean that they stay longer and read on.Hierarchy can be achieved in other ways. We’ve just mentioned using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. WhitespaceLet your type breathe. Don’t be afraid to leave blank spaces in your pages. This negative or white space will help focus attention on the text—and it’s the text that speaks loudest, so let it be heard. Doesn’t have to be white:OrTop of FormBasic Typography Terminology: Read if want more in-depth discussion of terms leading, tracking, kerning etc.Below are some basic definitions to help you understand how type is described and measured.Type FamiliesThe different options available within a font make up a type family. Many fonts are at a minimum available in roman, bold and italic. Other families are much larger, such as Helvetica Neue, which is available in options such Condensed Bold, Condensed Black, UltraLight, UltraLight Italic, Light, Light Italic, Regular, etc.Serif FontsSerif fonts are recognizable by the small lines at the ends of the various strokes of a character. As these lines make a typeface easier to read by guiding the eye from letter to letter and word to word, serif fonts are often used for large blocks of text, such as in a book. Examples: Sans serif fontsTrebuchetVerdanaArialHelveticaExamples: Serif Fonts :GeorgiaTimes new Roman Serifs are small lines at the ends of character strokes. Sans serif, or without serif, refers to typefaces without these lines. Sans serif fonts are often used when a large typeface is necessary, such as in a magazine headline. Helvetica is a popular sans serif typeface. Sans serif fonts are also common for website text, as they can be easier to read on screen. Arial is a sans serif typeface that was designed specifically for on-screen use.Points (and pixels)The point is used to measure the size of a font. One point is equal to 1/72 of an inch. Pixels can be equated to pointsBaselineThe baseline is the invisible line on which characters sit. While the baseline may differ from typeface to typeface, it is consistent within a typeface. Rounded letters such as "e" will extend slightly below the baseline. X-heightIt is referred to as the x-height because it is the height of a lowercase "x." This height can vary greatly between typefaces.Tracking, Kerning The distance between characters is controlled by tracking, kerning. Tracking is adjusted to change the space between characters consistently across a block of text. This may be used to increase legibility for an entire magazine article.Tracking and CSS Kerning is the changing of space between adjacent characters.CSS: Letter-Spacing…used for kerning and tracking…depends on what is selected. e.g. Tracking for a <h1>:<style>h1 {letter-spacing:2px;}</style>Illustrator:LeadingLeading refers to the distance between lines of text. This distance, measured in points, is measured from one baseline to the next. A block of text may be referred to as being 12pt with 6pts of extra leading, also known as 12/18. This means there is 12pt type on 18pts of total height (12 plus the 6pts of extra leading).Type and Font ResourcesIdentifying Fonts with What the FontRelated ArticlesFonts 102 Typography - Font HowToHow to Choose Body Text FontsWhat is the Best Way to Choose or Mix and Match Fonts?Using Photoshop to Put an Image Inside Text - Clipping Mask TutorialBody Copy Type - How to Find the Right Fonts ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download