DESKTOP & MOBILE CSS Testing Page

Below is a testing zone to solidify what our various CSS font sizes should look like. Once everyone is in agreement, Matt can make a CSS guide to hand off for the developers.

DESKTOP/TABLET H1

PLACEHOLDER H1 TITLE AT 50PX

Take our backdrop: you can walk sandy beaches in the mildest climate in Canada, while taking in the snow-capped mountains on the horizon. You can explore countless trails through old-growth forests and wander through our downtown harbour while gazing upon historic buildings.

Matt: I think this is the best option

DESKTOP/TABLET H2

PLACEHOLDER H2 TITLE AT 35PX

Take our backdrop: you can walk sandy beaches in the mildest climate in Canada, while taking in the snow-capped mountains on the horizon. You can explore countless trails through old-growth forests and wander through our downtown harbour while gazing upon historic buildings.

Matt: I think this is the best option

DESKTOP/TABLET H3

PLACEHOLDER H3 TITLE AT 25PX

Take our backdrop: you can walk sandy beaches in the mildest climate in Canada, while taking in the snow-capped mountains on the horizon. You can explore countless trails through old-growth forests and wander through our downtown harbour while gazing upon historic buildings.

Matt: I think this is the best option

MOBILE H1

PLACEHOLDER H1 TITLE AT 35PX

Take our backdrop: you can walk sandy beaches in the mildest climate in Canada, while taking in the snow-capped mountains on the horizon. You can explore countless trails through old-growth forests and wander through our downtown harbour while gazing upon historic buildings.

Matt: I think this is the best option

MOBILE H2

PLACEHOLDER H2 TITLE AT 30PX

Take our backdrop: you can walk sandy beaches in the mildest climate in Canada, while taking in the snow-capped mountains on the horizon. You can explore countless trails through old-growth forests and wander through our downtown harbour while gazing upon historic buildings.

Matt: I think this is the best option

MOBILE H3

PLACEHOLDER H3 TITLE AT 22PX

Take our backdrop: you can walk sandy beaches in the mildest climate in Canada, while taking in the snow-capped mountains on the horizon. You can explore countless trails through old-growth forests and wander through our downtown harbour while gazing upon historic buildings.

Matt: I think this is the best option

Example of basic text (“P” Tag / Paragraph)

This is an example of our current basic text as assigned by the “P” or Paragraph Tag and is roughly 15px in size.


This is an example of a basic paragraph at 18px in size and 24px Line-Height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,

Matt: I think this is the best option for DESKTOP/TABLET (18px)


This is an example of a basic paragraph at 17px in size and 23px Line-Height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,

Matt: I think this is the best option for MOBILE (17px)

Example of current bullet lists – LI Tag

  • This is a placeholder
  • This is also a placeholder


I recommend indenting the bullets to match the left-align of blocks of text (Currently the bullets stick out)
I also recommend the text is to be the same size as regular text (P Tag)
Line-height seems fine as is, but may change when font-size is made larger.

Example of current non-bullet lists – UL Tag

    Item 1
    Item 2
    Item 3

    I recommend the text is made to be the same size as regular text (P Tag)
    Line-height seems fine as is, but may change when font-size is made larger.