Our vision is to be the go-to resource for design for other teams across the WordPress open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
A type scale can enhance the design and usability of an interface. This post aims to standardize one for WordPress.
What is a type scale?
A type scale is a consistent progression of font sizes (e.g. 6, 12, 24, 48, 96). These progressions can be calculated by using a ratio or scale. For example, a scale of 1.5 would result in 16, 24, 36, 54, 81, and so on. Using this method gives us a harmonious set of font sizes to use in our UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing..
By including other attributes like font weight and line height we can create a reusable set of predefined styles for design and development.
What benefits does it provide?
“Typography can help create clear hierarchies, organize information, and guide users through a product or experience.”
Consistency: when it’s applied consistently, the type scale helps users follow visual patterns while they use WordPress.
Consolidation: it reduces the number of styles used and makes it easier for a designer or developer to choose a style.
Functional: we can map these styles to functional roles as much as possible. This makes it easier to know which style should be used.
Usability: we can create usability standards related to text. For example, the minimum font size for text is 12px to enhance readability.
Type scale proposal
This type scale was designed to keep the number of separate styles to the minimum that works for WordPress. Some things to keep in mind:
This type scale is separate from emphasis or decorative styles like color, bold, italic, and underline.
It assumes the default system font is being used, just like WP Admin.
Its primary use case is for productivity, meaning it’s best used in interfaces like WP Admin. We could expand the type scale for use on WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ in the future.
Next, I think we should use the Design ExperimentspluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to implement the type scale on a few screens. If we decide to proceed, we can work on documenting when to use which type style!
I’ve been using this type scale with several projects and it seems to be working well. What do you think?
Opened draft PR for applying the type scale to GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/