Myriad Pro Bold Condensed is the primary brand typeface for WilmU. Only used for H1s, Myriad Pro Bold Condensed provides visual brand consistency and a bold way to title each page.
For all other text, we use the modern sans serif, Proxima Nova. Chosen for its subtlety and simplicity, Proxima supports the condensed character of Myriad Pro while also prioritizing legibility for optimal user experience.
We use responsive font calculations so our typography appears consistent across various screens and devices. Each heading has a min/max value and will responsively change in size as the screen gets bigger or smaller.
Min: 40px, Max: 55px
Myriad Pro Bold Condensed
Min: 27px, Max: 30px
Proxima Nova Bold
Min: 20px, Max: 22px
Proxima Nova Bold
Min: 18px, Max: 19px
Proxima Nova Bold
Lead
Min: 17px, Max: 20px
Proxima Nova Regular
Body
Min: 15px, Max: 17px
Proxima Nova Regular
For optimal line length, paragraph width should be set to a maximum of 800 px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique dignissim faucibus. Praesent id euismod ante. Aenean malesuada dapibus auctor. Vestibulum vel commodo nibh. Vestibulum elementum vestibulum nisi id maximus. Nam feugiat tellus mauris, vel mattis tellus maximus eget. Etiam molestie sollicitudin tellus sit amet ullamcorper. Pellentesque quis leo vulputate, tincidunt felis sed, iaculis mi. Vestibulum gravida eu nisi et porta. Maecenas mattis sodales justo sit amet accumsan. Suspendisse efficitur hendrerit odio blandit tincidunt.
800px
You usually should not need to alter headings and paragraphs as they already have preset margin/padding. The important piece is to keep code semantically correct in the html. We only want one H1 on a web page. Next should be an H2. You shouldn't skip a heading, meaning if you have an H1 then you need an H2 before any H3s.
See the Pen Typography by Wilmington University (@WilmU01) on CodePen.
.lead = For lead p tags only .List = for ul or ol lists. Removes Margin. .List-noStyle = for ul or ol lists. Sets style type to none and removes left padding. .PrimaryFont = will change font to proxima nova .ThinFont = will change font weight to 400.H3 = will change font size to h3, more commonly used on h2s that need to be sized like h3s .MaxWidth = Sets a max-width to 800px.