Development of a machine-learning proof of concept for automatic font size adjustment in design elements.
Created a scalable machine learning model using Brain.js to adjust font sizes based on text length, considering UI balance and readability. Addressed the challenge of maintaining visual hierarchy in campaign designs without manual intervention.
UX/UI Designer, Product Innovator
Enhanced efficiency in creative editing, reduced dependency on manual design adjustments. The ML model offered a time-saving solution, improving campaign aesthetics and user experience.
In design, font sizes for elements like headlines or CTAs are carefully chosen to create an aesthetically pleasing balance and maintain the correct information hierarchy. However, when campaign copy is updated, the new text length may disrupt the pre-set ratio of length to font size, leading to an unbalanced visual hierarchy. This discrepancy can result in typography that is either too small for short texts or too large for longer texts. If unnoticed, this could negatively impact user experience in live campaigns.
Currently, the only solution is to submit an edit request by the CS, which can be time-consuming, especially during busy periods.
The proposed solution involves using machine learning to train a model that automatically adjusts font size based on text length, while adhering to best practices for readability and optimal user experience. This approach aims to minimize the risk of unbalanced designs in live campaigns and save time by eliminating the need for edit requests, thus allowing CS and designers to focus on more critical tasks.
The ML Adaptive Font Size Model analyzes information like container width, current font size, line-height, character count, word count, sentence length, letter-spacing, text-transform, and font-weight. The output includes a predicted font size and line-height.
The process involves standardising font size using machine learning. The predicted font size is then used in a function that adjusts the size incrementally, based on predefined parameters.
- This same model can be adapted to adjust other elements in the design style, like padding or margin, even to control how the sentence breaks, in order to avoid orphan words.
- Develop client-specific data models to mimic client brand style as closely as possible.