WIDTH: RESIZE ME
Current April 2024 Margins
Full Width - No Margin
margin: 0em
which on this site is 0px
What we use for components that span the full width
L | R |
Mobile Margin
margin: 1em 0.5em
which on this site is 16px (top bottom) 8px (left right)
What we use for devices <1024px
L | R |
Desktop Margin
margin: 0em 1em
which on this site is 16px (left right)
What we use for devices <1024px
L | R |
EM Margins
margin: 0em 2em
which on this site is 16px (left right)
L | R |
margin: 0em 3em
which on this site is 48px (left right)
L | R |
margin: 0em 4em
which on this site is 64px (left right)
L | R |
PX Margins
margin: 0px 10px
which on this site is 10px (left right)
L | R |
margin: 0px 15px
which on this site is 15px (left right)
L | R |
margin: 0px 20px
which on this site is 20px (left right)
L | R |
margin: 0px 25px
which on this site is 25px (left right)
L | R |
margin: 0px 30px
which on this site is 30px (left right)
L | R |
REM Margins
margin: 0rem 1rem
L | R |
margin: 0rem 2rem
L | R |
margin: 0rem 3rem
L | R |
margin: 0rem 4rem
L | R |
% Based Margins
margin: 0% 3%
L | R |
margin: 0% 5%
L | R |
margin: 0% 8%
L | R |
margin: 0% 10%
L | R |
VW Margins
margin: 0vw 3vw
L | R |
margin: 0vw 5vw
L | R |
margin: 0vw 8vw
L | R |
margin: 0vw 10vw
L | R |
These examples below are in a 10 column
I have set some css for this row to disappear when the screen size is less than 1024px wide, at that point it will look the same as the examples above.
Current April 2024 Margins
Full Width - No Margin
margin: 0em
which on this site is 0px
What we use for components that span the full width
L | R |
Mobile Margin
margin: 1em 0.5em
which on this site is 16px (top bottom) 8px (left right)
What we use for devices <1024px
L | R |
Desktop Margin
margin: 0em 1em
which on this site is 16px (left right)
What we use for devices <1024px
L | R |
EM Margins
margin: 0em 2em
which on this site is 16px (left right)
L | R |
margin: 0em 3em
which on this site is 48px (left right)
L | R |
margin: 0em 4em
which on this site is 64px (left right)
L | R |
PX Margins
margin: 0px 10px
which on this site is 10px (left right)
L | R |
margin: 0px 15px
which on this site is 15px (left right)
L | R |
margin: 0px 20px
which on this site is 20px (left right)
L | R |
margin: 0px 25px
which on this site is 25px (left right)
L | R |
margin: 0px 30px
which on this site is 30px (left right)
L | R |
REM Margins
margin: 0rem 1rem
L | R |
margin: 0rem 2rem
L | R |
margin: 0rem 3rem
L | R |
margin: 0rem 4rem
L | R |
% Based Margins
margin: 0% 3%
L | R |
margin: 0% 5%
L | R |
margin: 0% 8%
L | R |
margin: 0% 10%
L | R |
VW Margins
margin: 0vw 3vw
L | R |
margin: 0vw 5vw
L | R |
margin: 0vw 8vw
L | R |
margin: 0vw 10vw
L | R |
BONUS ROUND - FONT SIZES ON HON
Below are some of the sizes seen around the site.
THIS IS AN H1 HEADER SIZE - 250% of 16px
THIS IS AN H2 HEADER SIZE - 190%
THIS IS AN H3 HEADER SIZE - 180%
THIS IS AN H4 HEADER SIZE - 170%
THIS IS AN H5 HEADER SIZE - 140%
THIS IS AN H6 HEADER SIZE - 140%
This size is sometimes used for subheading - 32px
This size is sometimes used for green subtitle - 28px
This size was used for subheading for older hero designs - 24px
This size is also sometimes used for subheading categories - 20px
This is the standard paragraph font size - 16px
PX SIZES
This font size is 10 pixels
This font size is 12 pixels
This font size is 14 pixels
This font size is 16 pixels
This font size is 18 pixels
This font size is 20 pixels
This font size is 24 pixels
This font size is 28 pixels
This font size is 36 pixels
This font size is 48 pixels
This font size is 72 pixels
EM SIZES
This font size is 0.5 em
This font size is 1 em
This font size is 1.5 em
This font size is 2 em
This font size is 2.5 em
This font size is 3 em
This font size is 4 em
% SIZES
This font size is 100%
This font size is 120%
This font size is 140%
This font size is 150%
This font size is 175%
This font size is 200%
This font size is 250%