I'm trying to propose another UX/UI way to display a control font size in a wizard of templates creation.

enter image description here

Have you a UX advice about my choice? I think that it must have a more precise mark of font size. Could you give an expert advice ?

  • 1
    Can you describe in a bit more detail how this control works? Just how gradual does the slider change the size - just in 2 increments smaller / larger? What exactly is the problem you're trying to solve that a traditional font size control doesn't offer?
    – JonW
    Oct 1, 2021 at 9:33
  • Hi @JonW, The left side serves as a preview. On the right side, I provide a option to select the typeface and choice the fontsize. I wanted to propose a different size control : a incremental bar with 5 states. Is it a good UX choice? Oct 11, 2021 at 10:43
  • This is a standard problem, I would guess, and has been solved (i.e., designed) in many applications which do similar stuff to the app you're working on. Did you do some research on these other applications? We appreciate you showing you also did some homework :-) Oct 17, 2021 at 6:53
  • I think that my proposal for control font size missing of values, I give the options to choice "a size" (5 increments) without a real value. I would like to have senior advices about my proposal :) Oct 19, 2021 at 16:20

2 Answers 2


You could call your first dropdown "Font Family" - selecting a font from a dropdown is a pretty standard pattern, so you're okay there.

For font size, it depends on how much detail your user needs. Again, you could use a dropdown, with arbitrary values like "Extra Small, Small, Medium, Large, Extra Large" and this might suffice for novice users or those who likely wouldn't care about font size.

If your user does care, you might want to give control over the size of each hierarchical element. Here's an example from BeaverBuilder:

BeaverBuilder font size configuration using several sliders

The size shows in a text input field next to a slider, and can be reset.

What's nice about this is that the user can enter arbitrary values if they want to, but the example on the right helps them understand how big something will appear if they're not into values.


I take it that the image on the left is the feedback mechanism for the selections made on the right - i.e. it shows a selection of styles based on the selected font.

The feedback mechanism I think it is confusing to have the primary and secondary buttons displayed using the same colour as the CTA's used to control the screen (Previous and Done). I would find a different way of presenting that information if it is needed. I agree, there is no clarity about what font size has been selected. that either needs to be provided by the slider or somehow by the core font in the box. The drop down and the slider are both common controls so not sure you are looking for feedback on those.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.