Typography
Answers
• What’s the difference between kerning and tracking, and which one is available to the web designer?
Kerning is the process of adjusting the spacing between pairs of letters. It's used in print to tighted up space between letters that align naturally.
It improves the look of the text and makes it look more professional.
Tracking is an ability, similar to kerning, but it affects all letters in the document, as opposed to a specific pair of letters. Tracking is available to a web designer while kerning is not.
• How can you avoid “rivers of white space” running through your text?
Try and keep your text on the web left-aligned whenever possible.
• Name the four different types of capitalization available through CSS.
All caps, initial caps, small-caps, or no capitalization at all.
• What’s a good line length for body content, and what factors can affect it? 60 characters per line allows the reader to get the information but does not make it too long
• What’s the difference between a serif font and a sans-serif font? Give an example of each. Sans-serif is better for headings and serif is better for Times Roman and bigger blocks of text.
• How does hanging punctuation differ from regular punctuation? Hanging punctuation uses text-indent css property with a negative value which allows you to shunt the quote mark out into the left.
• If you want to insert a copyright symbol into your copy, you use an HTML entity. Have a look on the internet and see if you can find all the other HTML entities. There's about 250 of them!
Html entity
Block level means a higher level element, normally informing the structure of the document.
• example: h1,h2,h3, etc
Inline elements are those that are contained within block level structural elements and surround only small parts of the document’s content, not entire paragrahs and groupings of content.
• example: strong
The HTML specification includes several elements that are widely described as “presentational” because they only specify what the content within them should look like, and not what it means.
• example: b
this is an example of line-through
Example for centered text on a page
Hello this is in italics This text is bold and italicAn example of shorthand rules: h2 { font: bold x-large/1.167em Helvetica, Arial, sans-serif; }
Example for boldThis is an example of contrast.
This is an example of increasing line height to improve readability.
This is an example of increasing font size.
Letter Spacing