Typography
Our typographic system has been crafted with the goal of providing maximum legibility in all devices and bring consistency to our user interface.
Our typographic styles are tied to appropriate functions in the UI. By doing this we design a clear visual pattern for our Freelancers and Employers to follow while they're interacting with our website.
Font Family
We use Roboto Google Font. Google has described Roboto as "modern, yet approachable" and "emotional".
Styling Typography
Typography is styled using Tailwind utility classes on native HTML elements. See the
Headings
HTML defines six levels of headings. H1 to H6. The SIZE of each heading is NOT bound to its TYPE . As a rule of thumb a H1 heading should be visually bigger than an H2, an H2 should be bigger than an H3 and so forth, but this is not always true since it's at complete discretion of the design needs of a particular page or section. This means that engineers will need to keep into account the semantic weight of a heading and choose the proper HeadingType, while following the design specs for the correct TextSize.
Generic Text
Text is normally provided with the use of the HTML tag p for block level text and span for inline text.
Typography styles are applied directly via Tailwind utility classes (e.g. text-body-16, text-title-24) on native HTML elements, keeping our CSS files as small as possible. E.g.:
Type Scale
New sizes
Font size : 90px
Hire expert freelancers for any job
Font size : 60px
Hire expert freelancers for any job
Font size : 50px
Hire expert freelancers for any job
Font size : 40px
Hire expert freelancers for any job
Font size : 32px
Hire expert freelancers for any job
Font size : 24px
Hire expert freelancers for any job
Font size : 20px
Hire expert freelancers for any job
Font size : 16px
Hire expert freelancers for any job
Font size : 24px
Hire expert freelancers for any job
Font size : 20px
Hire expert freelancers for any job
Font size : 16px
Hire expert freelancers for any job
Font size : 24px
Hire expert freelancers for any job
Font size : 20px
Hire expert freelancers for any job
Font size : 16px
Hire expert freelancers for any job
Font size : 12px
Hire expert freelancers for any job
Font size : 24px
Font size : 20px
Font size : 16px
Font size : 12px
Font size : 20px
Hire expert freelancers for any job
Font size : 16px
Hire expert freelancers for any job
Font size : 12px
Hire expert freelancers for any job
Font size : Inherit from parent
Hire expert freelancers for any job
Legacy sizes
Font size : xxxsmall
Hire expert freelancers for any job
Font size : xxsmall
Hire expert freelancers for any job
Font size : xsmall
Hire expert freelancers for any job
Font size : small
Hire expert freelancers for any job
Font size : mid
Hire expert freelancers for any job
Font size : large
Hire expert freelancers for any job
Font size : xlarge
Hire expert freelancers for any job
Font size : xxlarge
Hire expert freelancers for any job
Font size : xxxlarge
Hire expert freelancers for any job
Font size : marketing_small
Hire expert freelancers for any job
Font size : marketing_mega
Hire expert freelancers for any job
Font size : marketing_xmega
Hire expert freelancers for any job