Typography
Typography is how graphic characters is composed and arranged on a surface to obtain legibility and readability. Someone has said that typography is what language looks like. As the visual representation of language, typography’s main task is to communicate information. Open Bridge design system make use of typography to present content as clearly and efficiently as possible.
Open Sans
Open Bridge design system uses the font Open Sans. It’s a humanist sans serif typeface designed by Steve Matteson. It was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms. It is available as open source from Google fonts.
Open SansText styles
OpenBridge Design System have multiple text styles to be used for different text in an application. They are categorised and named related to usage. The text styles are divided into two main groups: UI text styles and Instrument text styles.
UI text styles
The UI text styles are used for normal text content, static text and components.
Size:
Case:
24px
Aa
Size:
Case:
24px
Aa
Size:
Case:
Spacing:
16px
AA
1.2
Size:
Case:
16px
Aa
Size:
Case
16px
Aa
Size:
Case:
16px
Aa
Size:
Case
12px
Aa
Size:
Case:
12px
Aa
Instrument text styles
Instrument text styles are used for instrument numbers and dynamic data. All instrument numbers should be in a tabulator format. Colored instrument numbers can change color to alert and UI colors.
Size:
Height:
Capital:
32px
48px
Aa
Size:
Height:
Capital:
16px
24px
Aa
Size:
Height:
16px
24px
Size:
Height:
64px
88px
Size:
Height:
Capital:
32px
48px;
Aa
Size:
Height:
Capital:
16px
24px
Aa
Size:
Height:
Capital:
32px
48px
Aa
Size:
Height:
Capital:
16px
24px
Aa
Size:
Height:
Capital:
16px
24px
Aa
Size:
Height:
Capital:
32px
48px
Aa
Size:
Height:
Capital:
16px
24px
Aa
Size:
Height:
16px
24px