Week 4, September 20

Type and the Web

Session Recording #

Some Things to Discuss #

After going through your Figma sketches (everyone should have feedback there now), we noticed a few trends across the board:

  1. There weren’t a lot of distinct sketch directions.

    Many folks’ work landed much closer to “explorations on one theme” rather than “three distinct directions.” (A font/color change alone does not always make new direction.)

    In addition to not satisfying our expectations for the assignment, this can also only limit your horizons for the project. Sketching is meant to initially broaden these, from which we can later narrow. But you can’t refine (and we can’t respond to) what we don’t see. We want to see more varied exploration, here.

  2. It also wasn’t very… sketchy.

    Lots of “here are my only three frames.” We want to see more in-progress and more experimentation. These don’t have to be complete thoughts. Sketches are not presentations. Be looser.

  3. Lots of too-small type.

    We did say that to some extent, scale/zoom doesn’t matter—it is about the relationships. But we doubt everyone was drawing at 200% zoom, so the type was often too small. Put yourself in the mind/eyes of your reader! It’ll depend on the typeface, but ~1824px is probably a safe starting point.

  4. Multi-column, print layouts.

    We left lots of notes for folks about their multi-column layouts. Columns are a powerful, structural design tool—but are complicated in digital, where the user only ever sees a portion of your page while scrolling. We can’t expect people to scroll down one column, then zigzag back up another.

    Keep in mind that your user never sees “the whole canvas” as we do in Figma—this is a weak point of the tool. Always think about how your user will flow (scroll) through your page—especially when the primary purpose is reading, as with this project.

    Relatedly, nobody worked “frameless!” Remember that with all of our tools, their form and limitations can become our own.

  5. In the Semantic DOM we’ve seen so far, not enough structure.

    Lots of text fragments (no <p> or <h#>), very flat hierarchy, little overall organization. You will need more groupings/containers around your text elements to work towards your designs. We want to see a lot more semantic structuring of your document. Boxes in boxes!

  6. LLMs.

    We suspect several of you used LLMs to “write” your reading responses. You know who you are. That’s really discouraging when we’ve asked for your thoughts. It’s cheating yourself; it’s unfair to your peers (who do the work); ultimately, it’s a waste of all our time.

</stern-teacher>

Alright, CSS #

Alright, our entrée for today is CSS. We’ll start to make things look good:

An Intro to CSS

Let’s Try This Together #

Again today our back half will be a demo, picking up from last week:

  1. Open your repo from last week—either from GitHub Desktop or VS Code. We’ll be using a demo repo, which you can reference:

    manuscript

    This is indicative of the kind of structuring we’re looking for in your projects. Don’t mimic this directly, but interpret its hierarchy within your design’s needs. Your project should be as nested.

  2. We’ll start with some general ergonomic settings ⌘ ~ Ctrl , to get comfortable:

  3. And we’ll improve our turnaround on seeing changes with the Live Server extension.

    • Note file:///Users… vs. http://127.0.0.1/… (vs. https://username.github.io/…) URLs
    • No more ⌘ ~ Ctrl R—make a change and see the live reload !
  4. Okay, for real, let’s switch gears to CSS. Create a style.css in the same folder as your index.html.

    Recall that CSS can live also live in a <style> tag, or even inline on an element itself—but these don’t scale very well. So we’ll be using an external (not in the HTML) stylesheet.

  5. In the <head> of your HTML file, link to your style.css:

    		<!doctype html>
    <html>
    	<head>
    		<title>Your page title</title>
    		<link href="style.css" rel="stylesheet">
    	</head>
    	<body>
    		<!-- Your HTML content. -->
    	</body>
    </html>
    
    	
  6. I always like to add something obvious in, to make sure it is all connected. Add this to your style.css:

    		body { color: tomato; }
    
    	

    If you hop back to your page in the browser, you should see the color change! If not, your HTML isn’t seeing your CSS. Retrace your steps.

  7. Let’s also try adding in a reset to start with a clean slate:

    		<link href="https://typography-interaction-2425.github.io/assets/reset.css" rel="stylesheet">
    
    	

    Try commenting ⌘ ~ Ctrl / this line in and out, then looking again in the browser! Note the differences, as the user-agent styles are reset.

  8. We’ll bring this file in locally, to avoid a dependency.

    Create a reset.css in your repo, as we did with style.css. You can go to the course reset in your browser, and copy the code into your local file. Then update the link in your head:

    		<link href="reset.css" rel="stylesheet">
    
    	
  9. Finally, let’s change our type!

    Go to Google Fonts and find what you need. On the specimen page (the page for a font family), click the Get font button—this will add them to a sort of “shopping bag” up top.

    We’ll start by linking to it. Click <> Get embed code to see our options, choose <link>. Select your weights, if necessary (only bring in what you will use), and copy the code there into your <head>:

    		<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">;
    
    	

    And then we’ll apply it—in this case, to everything, as font-family is inherited:

    		body { font-family: 'EB Garamond', serif }
    
    	

    You can also @import right into the top of your stylesheet, if you prefer:

    		@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
    
    	
  10. And with the remaining time:

    • Adjust some font sizes, with element selectors
    • Differentiate color on some paragraphs, with a class
    • Pull the Google Fonts in locally, organize into folders

For Next Week #