dotCMS
UI: Update Base Font Size to 14px
Task description
As a dotCMS user, I want the base font size to be reduced to 14px while keeping the spacings based on 16px to improve readability and design consistency across the website.
### Acceptance Criteria
- [ ] The base font size in the UI should be 14px.
- [ ] Spacings between elements should remain consistent at 16px.
- [ ] All text should be legible and easily readable at the new font size.
- [ ] This change should NOT affect native a11y of the browser
External Links
N/A
Assumptions & Initiation Needs
- Assumption: The current font size is set at 16px.
- Initiation: Access to the dotCMS backend to make the necessary CSS changes.
- We need to check ALL pages to make sure nothing breaks
Quality Assurance Notes & Workarounds
- QA should check all pages to ensure the new font size is consistent and does not cause any readability issues.
- In case of any spacing issues, the QA team should provide feedback for adjustments.
IQA Failed
Tested in master
Most portlets and texts have the updated size, except these 3: Header: Keeps the old size Template & Containers: The text "Show archived" is too big, other portlets have the correct size Apps: The inside of Apps has the old size of 16px
The rest of the portlets have the correct size
https://github.com/user-attachments/assets/e7680aa3-d2fd-46d4-b23f-ffe4dcf178f3
Internal QA: Failed
There are some fonts with the old size, specifically in the block editor. You could notice it in the following video:
https://github.com/user-attachments/assets/70eeb852-b0db-465b-ae6d-1305a0d28c1a
The test was run on:
Browser: Chrome [Version 127.0.6533.120 (Official Build) (arm64)]
Docker image: dotcms/dotcms:trunk_600b4f3
Note to QA
The text inside the block editor (ProseMirror) remains at 16px base. If changes are needed, they will be handled in separate tickets. The same applies to text inside GraphQL query tool (CodeMirror) that remains at 13px.
Internal QA: Needs work
There are a few sections that do not meet with the defined size. Specifically sections PERMISSIONS and RULES in general.
Below we can find another sections where the font size must be fixed.
Internal QA: Passed.
It was tested on all the supported browsers (Chrome, Firefox, Edge) using the docker image dotcms/dotcms:trunk_dea1913.
