Fully variable sizes across various devices screens
Variable text size calculation is based on device screen width where min width is 320px and max width is 1600px /max width of Xlarge container/. So, for example, default /base/ text size has range from 16-18px /fluid, without jumping on manual screen resizing/ from min to max device screen width - 320-1600px and up.
To view fluid typography in action start shrinking browser window and observe how text resizes.
Tag
Text size in pixels on screens of 320px width and smaller
Text size in pixels on screens of 1600px width and larger
Line height
Tiny
11.11
11.52
1.5
Small/Meta
13.33
14.40
1.5/1.4
Base
16
18
1.65
H6
16
18
1.65
H5
19.20
22.50
1.4
H4
23.04
28.13
1.4
H3
27.65
35.16
1.4
H2
33.18
43.95
1.3
H1
39.81
54.93
1.2
Heading Small
47.00
68.00
1.2
Heading Medium
52.88
85.00
1.1
Heading Large
59.48
106.25
1.1
Heading XLarge
66.92
132.81
1
Heading 2XLarge
75.28
166.02
1
Heading 3XLarge
84.70
207.52
1
Text Large
19.20
22.50
1.5
Text Lead
23.04
28.13
1.5
Home page example
On Home pageall Headings /Where convos begin, Create, Produce, Explore, Insights/ are Heading Small sized. Titles for Clients section /We've loved working with/ and Footer /Don't settle for ordinary and forgettable./ are H2 sized. For Leading text /like the one below header and before Services section, Text Lead class has been used /same size as H4 with 1.5 line height and emphasis text colour/. Main footer links has Text Large class assigned /same size as H5 with 1.5 line height/.
Display - Playfair Display variable font /400/500/600/700/800
3xlarge, 2xlarge, xlarge, large, medium, small
Produce
Produce
Produce
Produce
Produce
Produce
Headings - Manrope variable font /bold/700
3xlarge, 2xlarge, xlarge, large, medium, small
Produce
Produce
Produce
Produce
Produce
Produce
H tags
h1, h2, h3, h4, h5, h6
Typography is the art and technique
Typography is the art and technique
Typography is the art and technique
Typography is the art and technique
Typography is the art and technique
Typography is the art and technique
Text styles - Manrope variable font /200/300/400/500/600/700/800
H1 - We've loved working with
Meta text and link - Written by Super User on 12 April 2012. Posted in Blog
Lead text - We'll amplify your story and trigger meaningful conversations at scale.
Lorem ipsum dolor sit amet, this is Bolder text, sed do eiusmod tempor this is Bold text et dolore magna aliqua. This is Extra Bold text enim ad minim veniam, this is lighter text quis nostrud exercitation ullamco this is Light text laboris nisi ut aliquip ex ea commodo consequatsub. Duis aute irure dolor in reprehenderit in This is link within article voluptate velit esse cillum dolore eu this is Emphasized text fugiat nulla pariatur cillum dolore eu5. This is Primary text excepteur sint occaecat cupidatat non proident, this is Muted text sunt in culpa qui officia deserunt mollit anim id est laborum.
Large text - Unlocking epic outcomes through creative content marketing. We'll amplify your story and trigger meaningful conversations at scale.
Small text - 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.
Tiny text - 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.
Meta text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is button linkLight text /200/ - Base, H5, H4, H3, H2, H1, Heading small, Heading medium, Heading large, Heading xlarge, Heading 2xlarge, Heading 3xlarge
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Create Create Create Create Create Create
Lighter text /300/ - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Normal text /400/ - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Emphasized text /#00111c (darken main colour #0A283C), font weight 500/ - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Bolder text /600/ - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Bold text /700/ - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Extra Bold text /800/ - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Italic text - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Small text - Base, H*
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Meta text - Base, H*
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Lead text
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Large text
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Muted text - Base, H5, H4, H3, H2, H1
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Primary text
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Success text
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Warning text
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Danger text
Don't settle for ordinary and forgettable. Don't settle for ordinary and forgettable.
Space in pixels on screens of 1200px width and larger
Small Margin
10
10
Base Margin
20
20
Medium Margin
40
40
Large Margin
40
70
XLarge Margin
70
140
Small Padding
15
15
Base Padding
30
40
Large Padding
40
70
Margin and Padding explained
Margin property controls the space outside an element, and the padding property controls the space inside an element. To create the gap, the padding either grows the element's size or shrinks the content inside. By default, the size of the element increases.
base5 uses Base Margin as a separator for regular text blocks /Headings uses Medium top margin for easier reading/. Check demo articles on Insights page to see text margin dividers in action.
Unlocking epic outcomes through creative content marketing. We’ll amplify your story and trigger meaningful conversations at scale.
Element with Base Padding
Unlocking epic outcomes through creative content marketing. We’ll amplify your story and trigger meaningful conversations at scale.
Element with Large Padding
Unlocking epic outcomes through creative content marketing. We’ll amplify your story and trigger meaningful conversations at scale.
Section
Horizontal layout sections with different background colors and styles.
Sections are used to separate the content of a page into differently styled blocks. You can place a Container to modify the width of the content inside sections and add horizontal padding.
Device screen width <= 900px /small to medium - phones and tablets/
Device screen width of 900px and larger /large - desktop/
XSmall Section
20px
20px
Small Section
40px
40px
Base Section
40px
70px
Large Section
70px
140px
XLarge Section
140px
210px
Home page example
On Home page we have Base Section set for every section there /Hero, Intro text, Clients, Services, CTA and Insights/. For some sections we are removing top and/or bottom padding to comply with element design /Hero - top padding removed to let the illustration goes up to the top, CTA - both paddings removed (top and bottom) to set the illustration from top to bottom edge/
You can take a closer look on section dividing example on Home page between Clients /muted background colour applied/ and Services section. Both sections uses Base Section padding so dividing space between last element inside Clients and first element inside Services are sum of both sections paddings - e.g. on Desktop screens 140px and on smaller screens 80px.
Elements on this page /page navigation and content/ are within Base Section
Large Section padding /grey space/ example /140px top and bottom on desktop screens/
Section Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Container
This component allows you to align and center your page content inside Section.
The element will be centered and have padding on the sides, that adapts automatically for large screens.
Device screen width of 640px - 900px /medium - tablets/
Device screen width of 900px and larger /large - desktop/
15px
30px
40px
Home page example
On Home page we have XLarge container for header /Hero/ elements /black box with text and illustration/, Small container for Hero and Services intro text and Large container for everything else /including top navigation menu/.
Elements on this page /sections navigation and content/ are within XLarge container.