New terms from treehouse – CSS Foundations Part 3 – Background and Borders and Web Typography

Background and Borders

Any element can have a background color or image applied. In an element, everything except the margin area is considered the background.

background-color property set an elements background color. This accepts color keywords, hex codes, rgba and hsla. If you don’t specify  background color, the element by default will have a transparent background color.

background-image property lets you set an image for the background. These are specified with the url() value, which uses the url functional notation url(). Can be optionally enclosed in single or double quotes, and can contain whitespace before or after the optionally quoted url. If the image cannot be displayed for whatever reason (bad path, image doesn’t exist in directory, etc), then the browser would treat the background-image like it’s value was none, and show a transparent background. Because of this, it’s good practice to also specify a background color in case that happens.

bg one

By default, a background image is repeated both horizontally and vertically so it covers the entire element. In this example, the image is small and gets tiled, unlike the previous example where the image’s size was large enough to fill the element without having to repeat.

bg twoa bg two

Resource: http://subtlepatterns.com/ – great resource for free patterns and textures to us as background images in designs.

Background images are generally used for decorative things like textures, markers, buttons and icons, and sometimes as a full page background image. Note, that if the image is relevant to the content of a page, it should be added in the markup as a img element.

background-repeat property let’s you set whether or not is repeats. repeat is the default value, and makes it so the image repeats until it fills up the element. repeat-x makes it only repeat horizontally, and repeat-y makes it only repeat vertically. For any of these, images that go past the edge of the element get clipped. Finally, no-repeat makes it so the image doesn’t repeat.

repeat repeat xrepeat y no-repeat

By default, a background image is place in the top left of the element, but you can adjust this with the background-position property, which accepts position keywords, length units and percentages. If you enter just one value, it will be for both x and y values (like center). The first value it accepts determines the x-axis position, which accepts the keywords center, left and right. The second value determines the y-axis, and accepts top, bottom and center. If you use percentages, 0 is left and 100 is right, and 0 is top and 100 is bottom. If you set a negative length unit, it will move the image past the element and clip part of it.

bs pos2 bg pos

There are some new values you can use for this as well, but they’re not very well supported yet.

background-attachment property lets you set whether the background image scrolls along with the containing element and content, or if it’s stays fixed in the viewport area. When a page moves, the viewport never does, what’s moving up and down is the content of the page.

scroll is the default value, where the background image scrolls with its containing element when you scroll the page, but when you scroll the element it doesn’t move.

fixed keeps it fixed to the viewport so it doesn’t scroll with the page. This makes it look like it’s moving when you scroll down the page, but when you scroll in the element it doesn’t move.

local makes it so the image scrolls with the page, but if you scroll within the content the image scrolls as well. The image is fixed to the element and its content.

This is confusing to write about. Go here to see an example of how they work.

background is a shorthand property for all of these. The common order for the values is: background-color, background-image, background-repeat, background-attachment, background-position. However, it doesn’t matter if one or several values are left out, as you don’t have to specify every value, only the ones you want. For the ones left out, the default styles will be used instead.

bg sh ex bg sh

 


 

border-radius let’s you create round and elliptical borders on elements, by defining how rounded the corners appear. Even if there’s no border, the radius still gets applied if there’s a background-color set, and vice versa. border-radius is a shorthand property for border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius. The curve of each corner is done by defining one or two values that define its shape, which can either be a circle or an ellipse. They can be any length unit, or a percentage, but you cannot use any negative values for either.

rad 1 code  rad ex 1

If you use a percentage, it is for how much of the respective corner it will take up. 100% would take up the entire corner it’s set for:

rad c 2  rad ex 2

…and 50% would take up half:

rad c 3  rad e 3

These corners are actually formed from the radius of a corner circle.

example

Now, you can also enter a second value for elliptical corners instead.

example 2

The first value will set the horizontal radius and the second will set the vertical radius. The two combined define the curvature of the corner.

rad c 4  example 3

When using percentages, the horizontal percentage will refer to the width of the box, and the vertical percentage value refers to the height of the box.

rad c 5  example 4

Keep in mind that if you add a border to the element it will be affected and curved by the border-radius as well as well.

ex 5

Once again, you can define all these styles using the border-radius shorthand property, which accepts up to four values.

  • One value affects all four corners, and affects the horizontal and vertical radii equally
  • With two values, the first affects the top left and bottom right, and the second affects the top right and bottom left corners.
  • With three values, the first only applies to the top left corner, the second to the top right and bottom left corners, and the third only to the bottom right corner.
  • With four values, each are applied to one of the four corners in this order: top left, top right, bottom right, then bottom left. It goes clockwise starting with the top left.
  • If you need to set a horizontal radius as well with the shorthand, you can use a forward slash (/) between the values. The follows the same rules as above, only you write out the horizontal values first, then the slash, then the vertical values.
  • So, if you wrote 25px 100px / 30px 50px… 25px would be the horizontal for top left and bottom right, 100px would be the horizontal for top right and bottom left, 30px would be the vertical for top left and bottom right and 50px would be the vertical for top right and bottom left.

Making shapes! Perfectly rounded circle: make sure width and height values are the same, then set the border-radius to 50%.

circle code  circle

Oval shape: height value must be 1/2 of width value, with border-radius horizontal value 100px and vertical value 50px.

oval code  oval

Lemon shape: height = width, with values below.

lemon code  lemon

Note – although you can use this for any element, it seems that chrome and safari don’t support it for video elements.


 

box-shadow let’s you add shadows to your elements, and can accept up to six values. The first value is the horizontal offset, and it accepts can be any valid positive (moves it to the right) or negative (moves it to the left) length unit, the second is the vertical offset, and it accepts can be any valid positive (moves it down) or negative (moves it to the up) length unit. You need at least these two to make a box shadow. The third value is optional and sets the blur radius, which determines how blurry or sharp the shadow should be. 0 gives sharp edges.

sharp code  sharp

The higher the value, the less sharp it will be. It will appear softer.

blur code  blur

The fourth value is also optional and is for spread-radius, it’s useful for defining the spread distance of the box shadow. Positive values make the shadow spread in all directions by the specified radius, so from the center of the shadow.

spread rad code1 spread rad

Negative values will shrink the shadow.

spread rad code 2spread rad 2

With negative values you can make effects. If you set the x value to 0, it will look like the shadow is floating (because there’s no horizontal offset).

sc3sr3

The fifth value for the border-shadow property let’s you set the color of the shadow. It must be placed either before or after the four length values above, or the entire declaration will be ignored. If the color is not specified, the browser will render it according to the element’s color property.

sc4 sr4

The sixth value accepted is the inset value, which let’s you make it so the shadow is on the inside of the element, rather than a drop shadow where it’s outside. Once again, this must be declared either first or last or the line will be ignored.

sc5 sr5

To make the shadow even on all sides, set both the horizontal and vertical offsets to zero, then use the blur radius and spread to adjust the shadow.

sc6sr6

Finally, you can add multiple box shadows to an element, just separate them with a comma. The first shadow specified will appear on top, with the last one on the bottom.

sc7 sr7


Creating multiple backgrounds with the background property – you simply need to separate them with a comma. Note that the first image listed will be the top image layer rendered, with the last one listed being on the bottom.mb codemb1

background-size lets you set the size of these images. Like background, it can accept multiple comma separated values that set the size of each image. In the example below, keep in mind the percentage values are relative to the width and height of the entire background positioning area, and not the width and height of the image itself. You can set two values for each background image, the first is for the width and the second is for the height. If you only put one value, the second will be set to “auto“, which is the initial value. Also, negative values are not permitted.

c2e2

You can adjust the position of the images with the background property with length units and percentages as well (instead of keywords like bottom and top), which is handy because that means you don’t need to go do that in Photoshop, you can do it with the CSS.

c3 e3

You can put the background-size values in the background shorthand by putting a forward slash (/) between the background-position and background-size values, followed by the background repeat value, but keep in mind this isn’t well supported yet in safari or firefox.

c4

There are two new values for background-size, which help with creating full page, background images. The cover value fills the entire background positioning area, and if you set this for the html element, it will be for the entire background. Make sure the height value is set to 100%.

fullbgc

The contain value will also scale the image so it fits inside the background area, but it will also make sure it keeps it’s original aspect ratio (meaning it will likely not fill up the entire page like cover does).

ea ca

So, let’s say you want to make an image the background for a div or something. You’d set the background image, then set the background-size to cover like before:

bgbbgcBut, what if you didn’t want the background image to be showing behind the semi transparent border you made? The background-clip property let’s you set the background painting area, which means whether the background-position property is goes to the content, border or content area of the element, which means it basically tells the browser how far the background should physically extend, which is normally to everything except the margins. The border-box value is the default, and means the background is clipped at the border area of the element. With content-box, it’s clipped at the content area of the element. In the example below, you can see the background isn’t displaying in the padding area.

cb cbb

With the padding-box property, the background will display on the element’s content and padding:

pb

Keep in mind all these values are for any background, so colors too, not just images.

The background-origin property determines how a background-position is calculated. The three values it accepts are the same as the ones listed above for background-clip. With the border-box value, the position is relative to the border edge. With the padding-box value, the position is relative to the padding edge. With the content-box value, the border position is relative to the content area. Keep in mind that if the background-attachment property is set to fixed, this property will have no effect. The three examples are listed below in that order.

borderpaddingcontent codez


Web Typography

Typography is one of the most important elements of web design. Text is part of the user interface, because users rely on it to do whatever it is they came to the site to do. It’s purpose is to make life easier for the reader, make things easier to read, and invoke emotion. It should enhance its content and message, keeping the reader more interested.

To pick a typeface, read your content and think of the mood it conveys, try to describe it with adjectives. Even if a typeface looks great or cool, it’s not worth using if it’s hard to read. Easy to read is always better.

Choose a font based on legibility and readability, which is about how individual letters are distinguished from each other. The most legible typefaces have loose letter spacing, generous x-heights, similar cap heights, prominent ascenders and descenders and common counters, which are the fully or partially enclosed spaces in letters. They also have open bowls, which are the curved strokes surrounding the counters and open apertures (like the red part of the p below), which are the openings at the end of a counter (like at the bottom of an h). They also share common serifs, which are the little tapering strokes that tail the end of some letters.

typo

Things that make typefaces less legible: being in all caps (you lose your ascenders and descenders), too much italics (the spacing between letters starts to get lost), too much bold (the bowls start to close up).

Different moods from different fonts: bold – powerful, script type (like long cursive) – calm, elegant, serif – serious and sophisticated.

Make sure the typeface has the different fonts you’ll need (like bold, italic, etc). Is it legible at smaller fonts and lighter shades of color? Do they use lining or old-style numbers? Lining is better for tabular data and charts. The old style might be more pleasant, especially if you’re putting it in with text. Cost is another factor, not all are free.

numbers

If you want to make 2 typefaces work together, you need to pay twice as much attention to detail, they’ll need to have the right balance. It can be good to have one be serif and one be sans-serif, but that’s not set in stone. Still, if they’re too similar, that will look bad.


When people land on a page, they see before they start reading. This is when they decide if they want to begin/continue reading. They see word chunks, so we need to help them quickly scan the different blocks of content. They read based on pattern recognition, so you look for important words and fill in the rest. People don’t really want to read all of the content, most just want reasons to stop reading. They don’t read every word, just focus on important ones.

Longer line lengths are difficult to read because it forces you to move your eyes left to right. Too short lengths make you have to jump to the next line to often. The ideal line length is 45-75 characters (including spaces and punctuation.

Line heights are the vertical space between lines of text. You should be generous here, it should always be 150% times the font size. The browser default is 1em aka 1 times the browsers font size, which is too little. Many things can affect this: font design, size, weight, and case.

Like music, text has rhythm. The simplest form is the letters, words, spacing and line height in continuous lines of text. Adding images or making headings stand out help with this. Alignment can help with this as well. Things that aligned right moreso than other elements tend to have greater emphasis.

Typographic color is not about the color of the font itself, but rather the density or tone of blocks of text. Dictated by typeface, font size, space between letters and lines of text. Test this by squinting.

Chunking – when you merge related elements together. The less space between them, the more likely they seem related. We tend to read thing better when they seem similar. You can zoom out to see if the chunking is looking well.

Pay attention to the negative space around text (whitespace) and make sure text has space to breathe. It can also put emphasis on things by putting lots of it in there, or coloring certain sections.

Visual hierarchy is important, without this it makes skimming through the page and finding the important parts harder. Easiest way to do this is with the headings and setting styling contrast between the different elements.

Treatment of links affect readability of text as well. They need to be easily identifiable from the rest of the text, through color, style, case or weight, and good hover states. Make sure regular text does not appear clickable.

Links in the main nav need to be easily scannable and communicate to the user. You can use a side nav when you have a lot of links, with the most important ones near the top.

The goal is to make the user unaware of the fact that they’re reading at all.

3 Most common approaches to a typographic page:

  1. Traditional – uses a lot of center and justified alignment. The text is usually in a frame of whitespace. Should look pretty like art, will use script and serif typefaces. Example
  2. Modernist – clear cut margins and edges, to steer and guide the eyes through text, usually through sans-serif typefaces. Many columns of text may be used with large headings and stark and contrasting colors. More utilitarian than decorative. Example
  3. Post-Modernist – part of a new wave of typography, breaks a lot of previous rules for 1 and 2. Challenges the reader to interpret the text on the page. Example

Good example of a blend of all three.


Responsive text – while text is pretty fluid on it’s own, it’s often not a one size fits all solution. A header might look great on an imac, but not on an iphone. Body text might lose it’s rhythm once the viewport gets more narrow.

Font-size shouldn’t just be based on personal preference, but also reading distances and potential viewports. When sizing type, it’s bad practice to just pick one you think would look good. You should use a typographic scale, because it let’s you achieve a consistent hierarchy. It goes by 1, then by 3, then by 12.

typo scale

It’s important to use relative values like em’s rather than absolute values like px. Once again, because it’s good to know:

Equation for converting px to em: Let’s say you want to get a font size of 12px with em’s. To do this you take the size you want (12) and divide it by the default font size (16). In this case that gives you .75em.

Line-length should also be fluid, so you should use percentages rather than fixed lengths like px. This makes the line-width adjust with the viewport, but the font-size should adjust as well, otherwise you won’t have that good 45-75 character line-length, each line would have like 3-4 words.

normal

So, use a media query to adjust the width of the wrap div when the screen-width gets small as a certain point, and also the font-size for the body to 1em. Just a reminder, the rule below basically says “apply these styles instead when the viewport is less that 600 pixels wide”.

small mq1

However, now the line lengths get to long for bigger browsers. So, let’s add another media query for screens at least 900px wide. By setting the max-width: to 600px, we get the ideal line length regardless of how large the screen gets.

mq2large

Improving vertical rhythm – the header keeps having a line break at certain points in the page when resizing. We can make the smallest one better by adding a new font size for it in the media query, but it’s also happening at around 628-782px. We can use another media query, OR:

  1. Use one of the new viewport relative units. vw stands for viewpoint width, remember 1 vw = 1/100th or 1% of the viewport. In the vide they say this isn’t supported in FF but it has been implemented since the video was made.
  2. Fit text is a jquery solution for making font scalable. He adds it in. Good note: he uses a different id selector to select the h1, rather than its class we were using for CSS. Never functionality and presenation in selectors, it’s best to keep them separate.

Vertical rhythm is the balance of spacing and the arrangement of text as the user moves down the page. Each line has a baseline it sits on, an invisible line that anchors lines of text, and if it sits on it perfectly then it has a consistent vertical balance or rhythm. The concept applies to headings, lists, images, and any group of text elements. The goal is for the layout to have this and be consistent, which makes it easier to read. If different elements have different shapes, the reader is forced to recognize each new one, making it harder to read.

vert rhythm

Resource: Let’s you add baselines like that to your page – http://basehold.it/

I added that and you can see things look way off.

bslh

To fix that, we set the body line-height:1.62; which comes out to be about 29px, so 1.62 x our 18px font size. He then made a bunch of changes to margin and padding I did not fully understand, but it did fit well on the baselines. To review, it was at 9:49 in the part 2 video. This involves a good deal of tinkering.

bslh2


Web Fonts are linked to our webpages from external sources and are activated when needed. Pretty good browser support. What makes a good one? Same as before for picking a typeface – does it work well for other fonts, does it convey the right emotion, legibility, was it designed for web use, loading time (this can affect performance), price?

When you purchase a font and host it on your server, you’re buying a license to use it. Each font’s EULA (End User License Agreement) will be different.

Once you buy it, you need to test is everywhere, on different screen resolutions and fonts.

font service takes care of the font loading process and relieves us of browser support concerns as they will serve the latest version for all browsers. They offer a variety of quality fonts, and also handle the licensing stuff.

  • Subscription Examples: https://typekit.com/, http://fontdeck.com/, http://www.fonts.com/.
  • Free services: http://www.fontsquirrel.com/, https://www.theleagueofmoveabletype.com/, https://www.google.com/fonts/.

The pop out option for google will show us the font at different sizes and weights, and will list other fonts that work well with this one.

In the example I went in and got a font from google as a <link>, and downloaded another from fontsquirrel.com as a @font-face kit. The google one went into the head element like normal, and I made a rule for the @font-face kit in the CSS.

@font-face lets us link to each one, which are then activated when needed by a specific browser or platform. First, you use the font-family property to give it a name, which you can make up because it will only be referenced internally on the stylesheet. Then, you specify the locations of the font files using src. The reason we specify different versions is for better cross browser support. They are:

  •  eot (embedded open type) – a proprietary format for IE.
  • eot?iefix – a bit of a trick to make it work for IE 6 and 7
  • woff (web open font format) – newer web font format by mozilla, works in most modern browsers and IE. Advantage is it loads quickly because they compress the data in the font, so sites using this will use less bandwidth.
  • ttf (truetype format) – used for Safari, Android and iOS displays
  • svg (scalable vector graphics) – open source, if the font is missing a glyph you can add it yourself. Used here for older versions of iOS.

You need to consider performance with font-face rules. The individual formats inside them are fine, but for overall font-face rules you should aim to have no more than 4-5.

fontf

Once you’ve done all that, to use the font, you just call it in a CSS rule like any other font. As always, it’s important to do a font stack and list other back up fonts in case there’s an issue loading your web font or a specific character. Make sure they’re similar though, as it will just load the character from the next font in the list. You can also just only subset the glyphs you need for things like ampersands, numbers, etc to speed up performance.

ffc

letter-spacing property lets you set the spacing between letters. Positive values make more spacing based on the default, negative decrease the spacing. See before and after below:

ls

ls1 ls2

icon fonts are icons or pictograms that would normally be inserted as an image or vector file, but were converted to a font instead. This speeds up the design process and site performance. They can load 14% faster than images and be 90% smaller that svg files. So, they’re superior to svg and images for icons. They’re also better resolution wise, because like any web font they can scale to any resolution without losing quality. Popular sites that offer these are: http://symbolset.com/, http://pictos.cc/, http://icomoon.io/.

Add it just like any other font-face rule. To call it, we used the before pseudo-element to add in the css3 logo. We used its unicode character, which we found by going to this part of icomoon.

icon code 2 icon code icon 1

We can then style it like any other font, giving us the following. The -webkit-font-smoothing property set to antialiased makes sure it remains smooth and not jagged.

ico

stylefont

Web fonts contain open type features, which are now supported by major browsers. the font-feature-settings property lets us access those. A ligature improves the appearance of text for letters by connecting letters that are too close together, like the f and i below, to give them a smoother appearance. You can turn these on using the -webkit-font-feature-settings property and setting it to the “liga”, “dlig” values. liga are commons ligatures to combine letters like fi and fl, which many web fonts include as standard. dlig are discretionary ligatures and are useful for non standard ligatures like script typefaces when you want to make a lot of custom combinations, the ff and fl.

ligaligaex


 

“Typography isn’t about the choice, but the quality of one’s decisions.” So it’s what you do with it more that the one you choose.

Using line rules is a good symbol of separation. They should be subtle and deemphasized with light colors and line-weights. They should be closer to the info they belong with, to draw attention to that text. You can create these by either using a <hr> tag or putting a border on the element with CSS.

You should never fake font-weights or styles. So, if your typeface does not include a bold or italics font, you shouldn’t try to use one. If you do, the browser will try to create its own, which can lead to smeared glyphs for bold (because it just renders it double), and faux italics can lead to unattractive, distorted letters. Avoid using the <b> and <i> tags, instead use <strong> and <em>, which gives us the freedom to change the appearance of text via the stylesheet. With font-weight, if your typeface uses a numerical scale (i.e. 100-700), it’s better to use that.

Pay attention to the tracking aka the letter spacing of the text. This can affect the appearance and readability of text – it will look more airy when spaced out, or dense when tightened. When there’s too much of it for body text, the word shapes seems to break up.

tracking

For headings though, they might benefit from some tighter tracking. You can adjust tracking with the letter-spacing property like in the lesson above. Tracking can also help eliminate widows and orphans in paragraphs, which are short lines or words at the start (widows) or end (orphans) of paragraphs that are split from the rest of the paragraph.

orphan widow

These create rags which are the uneven sides of the text, like the second and third lines of the paragraph below. There’s no easy way to prevent them, but you can help by adjusting font-size and line-length.

rags

Poorly justified text can create large, unsightly gaps between words in the paragraphs. These are called rivers, like several rivers of whitespace flowing throughout the text.

rivers

Hanging punctuation requires characters to be positioned outside the margin edge, usually used for pull quotes and bulleted lists. to create an even visual edge to make things more readable.

hanging

A quote that’s flush with the text interrupts that edge and makes things less readable. To fix that, you can give the text a negative text indent value in the stylesheet.

flush

You can hang the list markers in the list, which will keep the flow of text because the margin edge is still defined and continuous compared to one that’s indented. Still, either is acceptable.

bullets

There’s a css3 hanging-punctuation property on the way but it’s not supported by any browser atm.

Text in lists should be aligned with itself and not with the list marker on each line. If they’re indenting the text, then they’re inside the content flow, which messes up reading because our eyes look for straight lines.

relaunch

When using numbers, acronyms or abbreviations, they shouldn’t yell at the reader. They should be slightly smaller to blend in with the text. You can do this with the font-variant property and a value of small-caps.

HTML can’t render true quotes, n or m dashes, so you need to insert these character codes using HTML character entities. A real quotation mark is a curly quote, not the double prime set of straight quotes you sometimes see. Open and close quotes should not be the same. The correct symbols are shown below. You should also use the dashes shown below instead of a hyphen. ndashes are for ranges, like 1-10, and mdash is for a break in thought.

quotes

Similarly, for ellipses and ampersands you should use the following symbols.

ellipses

Remember, you can style the first letter in a paragraph using the drop cap, but be sure to use them sparingly.

Aw sheeeiiittttt. 7 Units down in the CSS foundations course, only 5 to go.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s