cronin4392/typesetting_on_the_web_course

typesetting_on_the_web_course

Contact

Stephen Cronin Senior Developer The Outline.com Personal Website Email - cronin4392@gmail.com Twitter - @cronin4392

Lessons

• How the browser works presentation
  • How browsers work https://codeburst.io
• Normalizing browser differences
  • None - (http://htmlpreview.github.io/?https://github.com/cronin4392/typesetting_on_the_web_course/blob/master/lessons/reset-css/none.html) / Code
  • Reset.css - (http://htmlpreview.github.io/?https://github.com/cronin4392/typesetting_on_the_web_course/blob/master/lessons/reset-css/reset.html) / Code
  • Normalize.css - (http://htmlpreview.github.io/?https://github.com/cronin4392/typesetting_on_the_web_course/blob/master/lessons/reset-css/normalize.html) / Code
• Typesetting a book
  • Designs - Link
  • Start - Preview / Code
  • End - Preview / Code
• Pixels vs Ems
  • tktk
• @font-face craziness - Preview / Code
• Responsive article
  • Designs - Link
  • Start - Preview / Code
  • Mobile layout - Preview / Code
  • Desktop layout - Preview / Code

Links

Learning

• CSS ruleset terminology
• Tracing the history of CSS fonts
• Modern CSS explained
• How browsers work

Tools

• CSS Specificty Calculator
• Web Safe Fonts
• CSS Support List

Inspiration

• TypeWolf
• Hoverstat.es
• Sites we like
• SiteInspire
• BTS Graphic Design Students Work

Things to read

• CSS Styleguide
• A List Apart
• /r/frontend

Newsletters

• Front-end Focus
• Smashing Magazine

Fonts

• Google Fonts
• Download Google Fonts

---

Quirks

• Setting all caps type
  • This can require you to "pull" the bottom up
• Having large letter-spacing can cause extra space on the right
• Difference between line-height and leading.

Code

Snippets

Center

Better box-sizing

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

Responsive image

img {
    max-width: 100%;
    height: auto;
}

Horizontal center block element

.center-me-horizontally {
    display: block; /* not required */
    width: 680px; /* adjustable */
    margin-left: auto;
    margin-right: auto;
}

Centering children

.parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@font-face

@font-face {
    font-family: "My Font";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/myfont.woff2") format("woff2"),
         url("../fonts/myfont.woff") format("woff");
}