Typography #35
Description
To syncronise work with the DevTools Photon Docs and the UI Library I would like to start a phase of decision making with a focus of the basic building blocks, starting with Typography.
Let's aim to document the aspirational state of DevTools, documenting what is current and making adjustments to reflect our proposed improvements.
The main purpose here is to capture the ideas as perhaps concluding the typography of DevTools will never be achieved in a GitHub Issue. We only need to be happy to the point that UI components can be created with a degree of assurance. It is OK to make amends to these base elements after we conclude here as I'm sure we will after seeing how they affect the layout of DevTools once committed.
I'm going to start the ball rolling with my initial audit and welcome all feedback and suggetsions to ensure we cover all bases with a view to homogenizing when appropriate.
Sans-serif (Segoe UI, San Francisco, Ubuntu...)
| Name | Size | Weigth | Emphasized | Example |
|---|---|---|---|---|
| Alpha | 18px |
Normal 400 |
- | Empty storage panel "No data present..." |
| Beta | 14px |
Normal 400 |
- | Empty Debugger text "Go to file… Find in files..." |
| Gamma | 12px |
Normal 400 |
Bold 700 |
Pane headers |
| Delta | 11px |
Normal 400 |
Bold 700 Italic 300 |
Pane body copy / Network panel |
Monospace (Consolas, Menlo...)
| Name | Size | Weigth | Emphasized | Example |
|---|---|---|---|---|
| Alpha | 12px |
Normal 400 |
Bold 700 |
Header panel, status code badges |
| Beta | 11px |
Normal 400 |
Bold 700 |
Inspector, Debugger |
| Gamma | 9px |
Normal 400 |
- | Badge buttons i.e. Flex, Event |
My idea with the name convention is that we can refer to the type styles like "Sans Beta" and "Mono Alpha", keeping it loose so we're not declaring specific faces or sizes etc. Open to ideas of course!
I think due to the nature of DevTools, and the frequency of 11px and 12px sizes (so far) attempting to declare a sort of scaling ratio might not be appropriate or even possible, but again this is all open for discussion.
Maybe we provide rules for these type styles to provide some additoinal direction i.e:
Mono Beta: To be used when displaying large amounts (or the potetial of large amounts) of code.
Sans Delta Italic: Only to be used as placeholder text for input fields.
I've provided a little cluster of UI elements here to illustrate what we currently have declared above:
