Saturday 24 August 2013

Typography - Part2

Text Properties

Knowing how to set the family, size, style, variant, weight, and line height of a font is only half the battle. Additionally you can decide how to align, decorate, indent, transform, and space text.

Text Align

Aligning text is an important part of building a rhythm and flow to a page, using the text-align property such alignment can be set. The text-align property has five values, comprising of leftrightcenterjustify, andinherit. All of these values are fairly straightforward and behave as expected. The text-align property, however should not be confused with the float property. The text-align values left and right will align text within an element, where the float values left and right will move the entire element. More information on the floatproperty can be found in the Box Model & Positioning lesson.
  1. p {
  2. text-align: center;
  3. }

Text Decoration

The text-decoration property provides a handful of ways to spruce up text, accepting the following keyword values:noneunderlineoverlineline-throughblink, and inherit. Use of the text-decoration property varies but the most popular use case is to underline links. The blink value exists, however is not recommended to be used as it can be extremely distracting. Depending on the semantic state, the line-through value may be substituted with thedel element (used to note text to be removed from a document) or the s element (used to note text no longer accurate or relevant). All other values can be utilized accordingly.
  1. p {
  2. text-decoration: underline;
  3. }

Text Indent

The text-indent property can be used to indent text like seen within printed books. The text-indent property can be used to indent text both inward and outward, all depending on the set value. The values available for this property are the common length values used within other properties, including pixels, points, percentages, and so forth.
  1. p {
  2. text-indent: 20px;
  3. }

Text Shadow

The text-shadow property allows you to add a shadow, or multiple shadows, to text. The property requires four values all listed one after the other from left to right. The first three values are all lengths while the last value is a color. Within the three length values the first value determines the shadow’s horizontal offset, the second value determines the shadow’s vertical offset, and the third value determines the shadow’s blur radius. The fourth, and last, value is the shadow’s color, which can be any of the color values used within the color property.
Text shadows can also be chained together using comma separated values, adding more than one shadow to the text. Adding numerous shadows allows you to place them above and below the text, or in whatever variation you desire.
  1. p {
  2. text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  3. }

Text Transform

Similar to the font-variant property is the text-transform property. While the font-variant property looks for an alternate variant of small capitals within a typeface the text-transform property will change the text inline. Thetext-transform property accepts five values: nonecapitalizeuppercaselowercase, and inherit.
The capitalize value will capitalize the first letter of each word, the uppercase value will capitalize all letters, and thelowercase property will make every letter lowercase. Using none will take any of these inherited values and roll them back to the text default.
  1. p {
  2. text-transform: uppercase;
  3. }

Letter Spacing

Using the letter-spacing property you can adjust the tracking between letters on a page. Using positive or negative length values you can adjust the spacing between letters, pushing them further apart or pulling them closer together. Using the keyword value none will return the space between letters back to their normal distance. Using relative length values with letter-spacing will help ensure you are obtaining the correct amount of spacing, however it is recommended to always double check the text.
  1. p {
  2. letter-spacing: -.5em;
  3. }

Word Spacing

Much like the letter-spacing property you can also adjust the spacing between words using the word-spacingproperty. The word-spacing property accepts the same length values and keywords and applies those values to spacing apart words, not letters.
  1. p {
  2. word-spacing: .25em;
  3. }

Text Properties Example

HTML
  1. <h2><a href="#" title="Sample Blog Post Title">Sample Blog Post Title</a></h2>
  2. <p class="byline">Posted by Shay Howe on February 5th, 2012</p>
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla vehicula nisi vitae rutrum. Donec laoreet, arcu in elementum, dui mi auctor tortor, et lorem massa orci… <a href="#" title="Sample Blog Post Title">Continue reading →</a></p>
CSS
  1. h2, p {
  2. color: #555;
  3. font: 13px/20px Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
  4. }
  5. a {
  6. color: #8ec63f;
  7. }
  8. a:hover {
  9. color: #f7941d;
  10. }
  11. h2 {
  12. font-size: 22px;
  13. font-weight: bold;
  14. letter-spacing: -.9px;
  15. margin-bottom: 6px;
  16. }
  17. h2 a {
  18. text-shadow: 1px 1px 0 #75a334;
  19. }
  20. h2 a:hover {
  21. text-shadow: 1px 1px 0 #d48019;
  22. }
  23. p {
  24. text-indent: 15px;
  25. }
  26. .byline {
  27. color: #8c8c8c;
  28. font-family: Georgia, Times, 'Times New Roman', serif;
  29. font-style: italic;
  30. text-indent: 0;
  31. }
  32. p a {
  33. font-size: 11px;
  34. font-weight: bold;
  35. text-decoration: underline;
  36. text-transform: uppercase;
  37. }

Demo

Sample Blog Post Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla vehicula nisi vitae rutrum. Donec laoreet, arcu in elementum, dui mi auctor tortor, et lorem massa orci… CONTINUE READING →

Web Safe Fonts

By default there are a few specific fonts that are pre-installed on every computer, tablet, cell phone, or other browsing capable device. Being installed on every device allows these fonts to be used freely online knowing that no matter what device is browsing the site, the font will render properly. These fonts have become known as “web safe fonts.” There are only a handful of web safe fonts, of which the safest ones to use are listed below.
  • Arial
  • Courier New, Courier
  • Garamond
  • Georgia
  • Lucida Sans, Lucida Grande, Lucida
  • Palatino Linotype
  • Tahoma
  • Times New Roman ,Times
  • Trebuchet
  • Verdana

Embedding Web Fonts

In recent years an alternative to web safe fonts has arisen. Now the ability exists to upload fonts to a server and include them on a website via the CSS @font-face property. This ability has done wonders to online typography. Now, more than ever, type is coming to life online.
  1. @font-face {
  2. font-family: 'Bryant Normal';
  3. src: url('bryant-normal.eot');
  4. src: url('bryant-normal.eot') format('embedded-opentype'),
  5. url('bryant-normal.woff') format('woff'),
  6. url('bryant-normal.ttf') format('truetype'),
  7. url('bryant-normal.svg') format('svg');
  8. }
  9. body {
  10. font-family: 'Bryant Normal', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  11. }
There are, however, some minor pitfalls. Having the ability to use any typefaces on a website does not mean you legally have the authority to do so. Typefaces are a work of art and posting them on your server may allow free reign for others to steal them. The authority to use a typeface all depends on the licensing you have been warranted.
Fortunately, the value for new typefaces has been recognized and companies have begun developing ways to license and include new fonts on websites. Some of these companies, Typekit and Fontdeck, work off a subscription model for licensing fonts, while others, Google Fonts, license the fonts for free. Before uploading any fonts make sure you have the correct permission to do so. If not, look into one of the companies mentioned to see if they might be able to help you find the same font or a suitable alternative.
Another minor pitfall is browser support. Although the @font-face property has been around for a while its support within older browsers is nothing to cheer about. Recent browsers will handle these fonts without any issues while some of the older browsers will not. Luckily, we are able to use these new fonts and specify other fonts to fall back on. These fallbacks come in the way of the font-family property discussed above.

Citations & Quotes

Writing online may lead to citing different titles of work or quotations. Additional quotations, including dialog, prose, and quotations from external sources may also exist within a page. There are a mix of different citation and quotation cases, all of which can be covered semantically with HTML using the citeq, and blockquote elements.
Knowing when to use which elements and attributes to properly markup citations and quotes takes a bit of practice. In general remember, the cite element is used to reference a title of work, the q element is used for short, inline quotations, and the blockquote is used for longer, external quotations.

Citing a Title of Work

The cite element is used within HTML to specifically cite a title of work. The cite element should not be confused with the cite attribute. The element provides semantic context to the title of work, where the attribute has a URI value that serves as a reference source. The cite element should be specifically reserved for a title of work and shouldn’t include any other context about the source. A title of work may include a book, movie, song, or so forth. For additional reference, it helps to include a hyperlink to the original source if relevant.
  1. <p><cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537" title="Steve Jobs">Steve Jobs</a></cite> by Walter Isaacson is truly inspirational.</p>

Citing a Title of Work Demo

Steve Jobs by Walter Isaacson is truly inspirational.

Dialog & Prose Quotation

Quoting dialog or prose happens quite often inline amongst other text. For this particular case the q inline element, better known as quote, should be applied. The q element is used to semantically note dialog or prose and shouldn’t be used for any other quotation purposes.
  1. DIALOG & PROSE QUOTATION<p>Steve Jobs once said, <q>“One home run is much better than two doubles.”</q></p>

Dialog & Prose Citation

An optional attribute to include on the q element is the cite attribute. The cite attribute acts as a citation to the quote in the form of a URI. This attribute doesn’t alter the appearance of the element, it simply adds value to screen readers and other devices. Since the attribute isn’t viewable within the browser it is recommended to provide a hyperlink including this source next to the actual quotation if available.
  1. DIALOG & PROSE CITATION<p><a href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm" title="Steve Jobs' Magic Kingdom">Steve Jobs</a> once said, <q cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">“One home run is much better than two doubles.”</q></p>

Dialog & Prose Demo

Steve Jobs once said, “One home run is much better than two doubles.”

External Quotation

To quote a large block of text, most commonly from an external source and spanning several lines, the blockquoteelement is used. The blockquote is a block level element that may include other block level elements nested inside of it including headings and paragraphs.
  1. <blockquote>
  2. <p>“In most people’s vocabularies, design is a veneer. It’s interior decorating. It’s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.”</p>
  3. <p>— Steve Jobs in Fortune Magazine</p>
  4. </blockquote>

External Citation

Longer quotes used within the blockquote element should always include a citation. This citation may be extremely simple, such as an author or source, however there may also be fairly more information including multiple citations and links to additional references.
A longer quotation may include a mix of both the cite attribute and cite element. The cite attribute can be included within the blockquote element the same as used within the q element above. The cite element can fall after the actual quote itself and help specify the title of work from which the quote comes from if relevant.
Since the cite attribute and cite element are purely semantic and don’t add any visual reference for users hyperlinks are also preferred when available. These hyperlinks should highlight both the origin of the quote (author, artist, etcetera) and the title of work in which it first appeared.
  1. <blockquote cite="http://money.cnn.com/magazines/fortune/
  2. fortune_archive/2000/01/24/272277/index.htm">
  3. <p>“In most people’s vocabularies, design is a veneer. It’s interior decorating. It’s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.”</p>
  4. <p><a href="http://en.wikipedia.org/wiki/Steve_Jobs" title="Steve Jobs">Steve Jobs</a> in <cite><a href="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm" title="Apple's One-Dollar-a-Year Man">Fortune Magazine</a></cite></p>
  5. </blockquote>

External Demo

“In most people’s vocabularies, design is a veneer. It’s interior decorating. It’s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.”

Automating Quotation Marks with CSS

Rather than adding in your own quotation marks in HTML there is the ability to add them in automatically with CSS. In the past support to get quotation marks to display properly with CSS has been weak, due to browser language support, however with more modern browsers language support is getting better.
To automatically add quotation marks within CSS the before and after pseudo-elements are used. These pseudo-elements use the quotes and content properties to dynamically add quotation marks as necessary.
Below is an example how these pseudo-elements and properties work to add quotation marks to the q element. For more information please take a deeper look into both pseudo-elements and how to use quotation marks.
  1. q {
  2. quotes: '“' '”' '‘' '’';
  3. }
  4. q:before {
  5. content: '“';
  6. content: open-quote;
  7. }
  8. q:after {
  9. content: '”';
  10. content: close-quote;
  11. }