Shape of the Day:

• Web Typography – what it is and how it is used
• Creating Buttons using HTML and CSS

Website of the Day:

http://speakingpuppy.com/ – Becuase why not

1. Web Typography – What it is and how to use it

• The way you use your text in the design of your webpage is a very important part in the creation of a website. Text has the ability to enhance your design, makes the website easier to “scan” and allows people to determine whether or not your information is important to view or read.
•  Here are the key elements of web typography:
  • Size of text
  • Color of text
  • Font
  • Text usage and placement. Examples: headlines to organize content; bold text to call attention to important information; large, dramatic text to visually enhance site; animated text
• Bold use of text and text-driven designs are currently a trend. Here are some example sites:
  • https://www.helloheco.com/
  • https://www.apple.com/
  • https://amessagefrom.earth/
  • https://listenfestival.be/
  • http://www.emanuelepapale.com/
  • https://seasoncreates.com/
  • http://jamesgillen.co.uk/2017/
  • https://growx.co/
  • https://kostasbartsokas.com/oi-you-mate/
• What stands out to you in the designs of those sites? Do you notice any similarities?
• Typography tips: 10 tips
• CSS properties: Useful CSS to style text
• Good to know: Here’s a site with useful type terms!
• Variable Fonts
  • From MDN: “Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference.“
  • Variable fonts allow a website to offer variety with fonts without the browser having to download different fonts (bloats site and slows it down).
  • From Microsoft: Variable fonts demo

2. Buttons

• What is the Code?
  • Check out the HTML tag that will create a button. CSS is used to style the button. This will change its color, size, borders, etc.
  • Two important parts make up the button: the text you can see inside the button tag and a link that connects the button to another type of content, usually a webpage.
• Brackets Practice
  • Setup new webpage
    1. Create a new page in Brackets with opening and closing html, head, title, style, and body tags. Save it as cssbuttons.html.
    2. Set up #wrapper inside the style tags with margin: 0px auto; width: 100%; and height: 100%. Add div id=”wrapper” just below the body tag and add a closing div tag before the closing body tag.
  • Creating a basic button and button with link
    1. Add button tags below the opening div tag and write basic button inside of the tags. What are the default browser styles for a button?
    2. Add a second set of button tags and write button with link inside of the tags. Let’s add a link inside of the button tags with # as the link source. Put the link code around the text.
  • Change the color and style the link
    1. Add a class called .btn inside the style tags. Add background-color: yellow; to this class.
    2. Add .btn a inside of our style tags and add text-decoration: none;. What does .btn a select? Why are we using the text-decoration property?
    3. Add class=”btn” to the second button we made (the one with the link).
  • Change the size
    1. Add width: 150px; to the .btn class
    2. Add height: 35px;
    3. Add padding: 10px; to BOTH the .btn and .btn a classes
  • Rounded corners
    1. Remember the border-radius property ? We can use that to create rounded corners on buttons.
    2. Add border-radius: 15px; to .btn
  • Change styles on hover
    1. Add .btn:hover to our style sheet.
    2. Add box-shadow: 3px 4px 6px #888888;
    3. Add transform: translateY(2px);
    4. Add cursor: pointer;