2016 Typographics Conference

View 2016 Typographics Conference

The typographics responsive conference site showcases, understandably, some beautiful typography. That said there are 9 http requests for font files which weighs in a 557kb… almost half of the 1.2MB page size.

Update: The stylesheet for this site is only calling for Woff and Woff2 files only and do not include the fallbacks for older browsers… for example we would usually see something like this rather than just the woff requests.

src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

After hearing from one of the site creators, Nick Sherman, most of the code I’ve included above doesn’t actually need to be used any more which is absolutely correct if you look at Can I Use for Woff.

They also make use of the font-kerning options as well as the stylistic sets (the ss## references) within the CSS including….

font-kerning: normal;
-moz-font-feature-settings: "kern","ss01","ss02";
-webkit-font-feature-settings: "kern","ss01","ss02";
font-feature-settings: "kern","ss01","ss02";

All of the logos used in the sponsors are all SVG based so that they look brilliant no matter what screen resolution or size you might have.

The developers of the site have dropped a lovely little debug mode into the site as well. Just press the d key on your keyboard to see a 1px dashed red outline around every HTML element….

<script>
/* Press 'd' to toggle the debug class */
$(document).keydown(function(e) {
    var key = e.which;
    if (key == 68) {
        $("html").toggleClass("debug");
    }
});
</script>

For those of you that have a very keen eye you will also notice a tiny little letter in the top left of the screen when in debug mode. This is the current breakpoint that you are in which is done by setting

content:

to the

body:before

which you can see in the list of media queries below.

Aside from the debug script there’s only one more script which is http://stickyjs.com/, this fixes the navigation to the header whenever scrolling down making it easier to jump to where you need.

From a performance point of view things aren’t too bad. There’s a LOT of http requests but then there is a lot of stuff on the page (tonnes of logos and speaker images).  Gzip isn’t enabled but that only accounts for 42kb of possible savings. I would throw cloudflare in front of it and switch on
caching and the free HTTPS which would enable SPDY on relevant browswers and improve performance times by quite a bit. Also because the site pulls in Eventbrite for tickets there is some delay loading in the external resources.

All in all it is a wonderful site built by Nick Sherman and Mark Rossi.

2016 Typographics Conference Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

Media Queries

/* The mobile first, breakpoint without any media queries, sets up the body:before layout */

body:before { /* BREAKPOINT INDICATOR */

  content: 'XXS';

  font-family: Verdana, sans-serif;

  font-size: 9px;

  color: rgba(128,128,128, 0.5);

  position: fixed;

  top: 0px;

  left: 0px;

  display: none;

  z-index: 10000;

}
@media (min-width: 20em) {

  body:before {content: 'XS';}

}
@media (min-width: 30em) {

  body:before {content: 'S';}

}
@media (min-width: 36em) {

  body:before {content: 'S/M';}

}
@media (min-width: 48em) {

  body:before {content: 'M';}

}
@media (min-width: 64em) {

  body:before {content: 'L';}

}
@media (min-width: 80em) {

  body:before {content: 'XL';}

}
@media (min-width: 96em) {

  body:before {content: 'XXL';}

}