Intermediate Web Literacy I: Intro to CSS | 2. CSS Fonts

• 1. Preparation

  Do today's activity on your own to become familiar with how to find and use webfonts on a webpage.

  1. Follow this link to the Thimble project for this activity.
  2. Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.
  3. Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.
  4. Follow the steps in the tutorial to complete the activity. You may also need to check back here and complete some of the steps in this lesson plan to successfully finish the Thimble project.

  Post the URL, or Web address, of today's project somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.

• 2. Making a Word Wall

  25 minutes

  Working with a student-generated list of adjectives, create a word wall of descriptive words written in ways that match their meanings.

  1. Start a brief, 2-3 minute brainstorming session and ask students to come up with as many different adjectives as possible. Record their answers on a chalkboard, whiteboard, large Post-It, or shared document on a projected computer.
  2. Explain that next each student will pick a word and then use markers and paper to write it in a way that helps show its meaning. For example, in the West, a student might write the word, 'happy,' in a loose, cheery script and bright color.
  3. Pick an equitable way to go around the room and let each student pick a word to illustrate.
  4. Give students 10 minutes to write and otherwise illustrate their words.
  5. Ask students to take another 2-3 minutes to tack or tape their words up on a shared space in the classroom.
  6. Invite students to take a 3-5 minute gallery walk around the shared space and to look at how their peers showed words' meanings through the way they wrote the words.
  7. Facilitate a brief, 5 minute discussion about what students notice in their word wall. Which styling and design decisions seem especially successful or right-on to students? What kinds of words were easy or difficult to write in an expressive way? Why?

• 3. Using Webfonts in Web Projects

  30 minutes

  After the word wall conversation, ask students to take their seats at computers.

  Explain that next we're going to learn how to bring new fonts hosted on the Web into our own webpages and projects.

  Share the link to today's project with students. You might want to shorten this link ahead of time or else provide a link to it from a class webpage or shared document. Help students who experience difficulty with processing or typing links get to the webpage and encourage classmates to help, as well.

  Once students all arrive at the project, invite them to click the green 'Remix' button. This will take students into the Thimble code editor. They will be able to see the code of the webpage, as well as a preview of how it looks in a browser. Students can also switch between this 'Preview' pane (in the upper righthand part of the Thimble interface) and a 'Tutorial' pane that takes them through today's work in a step-by-step way.

  Work through the tutorial on a projected computer. Invite students to help one another, but also to work ahead if they feel ready to do so. Through the course of the tutorial, you'll ask students to:

  1. Learn how HTML webpages and CSS stylesheets work together to call external webfonts into students' projects from 3rd party websites.
  2. Search for webfonts that match different feelings listed in today's activity.
  3. Replace the original webfonts in today's activity with webfonts students pick themselves to express the feelings listed in the project.
  4. Mess with the code to discover new ways to style fonts on a webpage in an independent and playful way.

• 4. Reflection and Assessment

  5 minutes

  After working through the tutorial, bring students back together as a group and facilitate a brief, reflective conversation about today's work. Make a list of your own questions or ask questions like those suggested below.

  If you have time, consider asking students to write, type, or otherwise record their responses for self-assessment and teacher evaluation. Just be sure to match recording technologies to students' needs so that whatever medium (or media) you chose for (or with) the group isn't a barrier to learners' expression.

  1. How does font choice connect to design? To put it another way, What kinds of decisions do we have to make about which fonts we use in a web project?
  2. Would you give an example of when you might use one kind of font instead of another?
  3. What kind of font would you use if you wanted to share information in a neutral way, like an informational website?
  4. What seemed easiest or most difficult about today's activity? Why?
  5. What else do you wonder about webfonts after completing today's activity?
  6. How do you imagine people create and share fonts?
  7. Where else in your every day life do you notice fonts in action?
  
  
  

  If you or your learners are curious to learn more, check out this Introduction to CSS or this module on styling text from the Mozilla Developer Network Learning Area.

  Next --> CSS Circles