Font + Style + Size get hotkeys and UI buttons (depicting hotkey) to achieve very fast design iterations

[porg]

User Goal

• Switch font and style and size in a very quick manner
• to quickly try out different design iterations with your sample text.

Status Quo

Cycle.focused.font.chooser.drowdown.with.arrow.keys.up.and.down.mp4

1. No hotkeys for the mentioned operations.
2. Current controls have no UI buttons for quick stepping:
   a) Font choice via dropdown menu — A lot of mouse kilometers for stepping through
   b) Style choice via preview-thumbnail-clicking — Very efficient already
   c) Size choice via slider — Okay

Proposed change

1. All 3 elements get UI button near them (left and right as on the mockup, or both on their right side (faster when pontainouly switching direction of back/fwd stepping).

2. These additionally also serve as the hotkey hints.

• a) The look ideally should convey this too.
• b) But should fit into the retro feel.
• c) If both are not possible, prefer B over A.
• d) Additionally you can offer a hint when hovering 1-2secs, e.g. Key ↑ to switch to previous font and Key + to increase font size, and so on.

3. This quick switching brings a followup usability issue:

• Each Font has a Note of different length and thus box height.
• Stepping through quickly therfore causes a layout jump/reflow on each step, which is suboptimal.

Approaches for fixing (which btw also improves Mobile layout):

• a) Fixed height (2.5 or 3.5 lines) plus scrollbar.
• a2) Possible alteration: Normal height when opening page, and when using stepping for the first time resize the notes box to fixed height and keep that henceforth.
• b) Position the Notes somewhere below to have a fixed layout on top (stable gaze) and the variable part below (where it doesn't hurt).