Adaptative Font Size

Adaptive font size

Project type

Development of a machine-learning proof of concept for automatic font size adjustment in design elements.

Contribution

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.

My Role

UX/UI Designer, Product Innovator

Outcome

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.

Overview

In this project, I developed a machine-learning proof of concept using Brain.js, a Machine-Learning JavaScript Library. The primary aim was to aid Customer Success Managers (CSMs) in editing creatives efficiently while ensuring a well-balanced UI, even without direct supervision from designers. This project was designed as a scalable demo to be shared with engineers upon approval.

Problem Statement

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.

Solution Proposal

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.

Project Overview

The machine-learning model built with Brain.js predicts the ideal font size and line-height, considering factors easily accessible via JavaScript. Brain.js was chosen for its efficiency in training neural networks even on lower-end hardware, ease of integration into existing projects, and straightforward syntax.

Model Functionality

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

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.

Ideal Goals and Potential Features

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