Day 26: Choosing a Typeface (CSS)

Today I learned about typefaces.  These are some typography terms.

x-height: height f the main body of a lower case lettercap-heights: height of the upper case lettersascenders and descenders: they are the upward or downward vertical strokes on lower case letters that ascend or descend above the x height or below the baselinecounter: the fully or partially enclosed space within a letteropen bowls: the curved stroke which encloses a letter's counteropen apertures: the opening at the end of an open counter (like at the bottom of an h)serifs: the tapering strokes that tail the end of some letter strokes

Readability can be influenced by many things.  Text layout can affect readability.  Lines of text that are too long are difficult to read because of the eye movement required.  Lines of text that are too short have similar effect becausvwe they force the reader to jump frequently between lines.  Line length is most effective at between 45 to 75 characters (including spaces and punctuation).  Line height should be 1.5 times the text size.  If it is too large, the text becomes harder to read.  If it is too small, the lines can seem to blend together, and as the line becomes longer, a reader can lose track of which line they are on.  Rhythm can also affect readability, for example, block quotes, images, color changes, etc., can affect the rhythm of a page.Chunking text means to merge related elements together.  White space is the space between elements, line of text, and words.  White space does not have to be white.  Links should be easily identifiable.  Regular text should not appear clickable.  

I also read today about responsive text and vertical rhythm.  By default, text is fluid.  The browser's default size for text is usually 16 pixels.  So, for example, if I set the font size to 1.5em, that would mean it would be 24 pixels (if no other em units have been set in a parent element).  Using a typographic scale is heavily preferred over simply using any font size we think looks nice.  This is so that end end result can be orderly and aesthetically pleasing.  A font size of 1rem sets the text to the root em unit, which is 16 pixels.

We discussed media queries again, as they pertain to typefaces.  The vw unit stand for viewport width, and 1vw means 1/100th of the viewport width.  

When making a font stack, first we will list the ideal font, followed by the alternative, then the common or generic versions, like so:

font-family: "droid_serifbold", Georgia, serif;

Icon fonts load faster than using images for icons.  Also, they scale to any size without losing quality, so they look crisp at any resolution.

Using line rules is a good symbol for separation.  Create a rule with a horizontal rule or by applying a border style with CSS.  

The letter-spacing property allows us to control the spacing between letters.  We should use <strong> and <em>, not <b> and <i>.  We also learned about ligatures.  Single words left at the end of a paragraph are referred to as orphans.  Single words that fall at the beginning of the following column are called widows.  When there are many large gaps between words in a paragraph, they are referred to as "rivers," and this look is discouraged.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,626

Treehouse Points by Subject Matter: HTML 663, CSS 933, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 70% of all students."

Badge(s) Earned Today:

Web Typography

Courses Completed:

How to Make a Website
HTML 

Books Read or in Progress:

"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today: 4

Total Hours Coding: 106