Bits | Freelancer Bits

Foundations

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".

Styled Typography Components

We created two angular components to handle headings and generic text separately in our product.

Headings Heading Component

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.

Read about the importance of a sensible use of H1 to H6 headings.

Generic Text Text Component

Text is normally provided with the use of the HTML tag p for block level text and span for inline text.

With the idea in mind of keeping our CSS files as small as possible the HeadingComponent and TextComponent their own visual styles from their templates, with the use of predefined Inputs E.g.: