Update hypothesis for canvas size, icon size, and line weight changes.

[jimmynotjim]

Based on feedback from testing the initial draft set, make adjustments for another round of in-place testing.

[Dnpizarro]

Updated Artboard

I updated the artboard template to reflect the 1200pt height. @jimmynotjim @designlanguage https://drive.google.com/drive/folders/1A8u5GzmxH357bbK9N8pAn9LCoaLB0HpF

[jimmynotjim]

@Dnpizarro I think there was a miscommunication, the extra 200pts should just be empty white space above the ascender. The round icons were sized correctly but needed the extra whitespace for them to maintain their relationship with the rendered canvas of Avenir at 16px.

[Dnpizarro]

Here is the updated file with the correct measurements: https://drive.google.com/drive/folders/1A8u5GzmxH357bbK9N8pAn9LCoaLB0HpF

[jimmynotjim]

@Dnpizarro cool, that looks right to me. Thanks for the quick fix.

[designlanguage]

The gap at the top is more than 200 px (it's larger than the descender which 240 px). I made an update:

[designlanguage]

@Dnpizarro - For open icon sizing within the artboard, here's what I'm thinking:

Circle icons fill the artboard, so we can treat the open icons similarly. I've kept these aligned with the baseline until they get taller than the ascender height, then they fall below the baseline.

Here's how that would play out with our current test set:

@jimmynotjim - I'm wondering if for the web it makes sense to align these to the right edge of artboard. Would that make it easier to have a consistent amount of space between the icon and type? The downside is that the minicons would start at different places on the lefthand side.

Centered	Flush-right

[jimmynotjim]

@designlanguage I think these are working a lot better.

For the alignment, we currently remove the left and right whitespace as part of the cleanup process and the spacing between the icon and the text is controlled via CSS. While right aligning the icons would make it easier to stay consistent, it creates a new issue with icons that fall after the text, like links to documents or external websites. I think we should continue removing left and right whitespace and figure out a container solution with CSS and markup for instances where there's a list of icons and text.

[designlanguage]

Makes sense to me @jimmynotjim . I'll assemble our test set at this size/alignment. I'll try to have that for you by EOD.

[jimmynotjim]

Awesome. Let's move this one to done and use #563 for discussion around the icons

[Dnpizarro]

@designlanguage the only issue I foresee is the space between lines. The example below has a consistent 60px height between the lines. I went with 60px because the lines tend to blend together at small sizes. Let me know your thoughts.

[designlanguage]

Thanks @Dnpizarro, that looks good!