📝 Penn Week 4a – Web Typography Continued

👥 Internet First Memories Show and Tell

Please upload a zip file of your activity on Canvas and we’ll do a quick show and tell.

👀Typography Continued

Tips for setting body copy

Measure (Line length)
A measure, or line length, is the amount of words per line. If it’s too short, it can feel a little choppy while too long can be difficult to read.

  • The longer the line length, the taller the line-height should be.
  • The shorter the line length, the shorter the line-height should be.

Smart Punctuation
  • Use the correct punctuation, for example curly quotes instead of inch/feet marks
  • You can set these using the character codes: ’ for right single quote, “ for left double quote.

Alignment
  • Left aligned text is typically easiest to read.

Color
  • If you have a feeling that your type is too hard to read, it most likely is
  • Always check your text colors against the web accessibility guidelines, unless you have a very specific reason for a specific audience


Type Sizes

You can size type in a variety of ways. Most of you have been using px increments, which is the easiest way of doing it.

px
font-size: 20px
There are some limitations with pixel values because they are finite values. If a user changes the default font-size of their browser, your page design will stay the same. 

You can specify how your type changes when you resize your browser using media queries (which we’ll talk about later).

Viewport Units
CSS also has viewport units which are increments that are dependent on the size of the browser window, or viewport.

The units are:
 vw – percentage of the viewport width
 vh – percentage of the viewport height
 vmin  – a percentage of the viewport width or height, whichever is smaller
 vmax – a percentage of the viewport width or height, whichever is larger
 
 .item {
  font-size: 10vw;
}
 
The best way to figure this out is to experiment. Here is some more information about using this feature: