Is phoenix default font-size is too small?

Hi, I’m using default html generator which uses default phoenix css styles. I’ve checked against Safari and Firefox and it appears the font-size for inputs is 11px which I consider as too small.

Does it annoy anyone beside me?)

It’s not milligram’s fault that the your user agent stylesheet for input is set to

   font: 400 11px system-ui;

Go into your app.css and take control of it:

input {
   font: 400 1em system-ui;

Note: phoenix.css contains


This sets rem (root em) to 10px rather than the usual 16px.

The approach has it’s detractors (and there are alternative approaches).


I didn’t know phoenix using milligram underneath.

One thing though, we should not relay on some default user agent stylesheet and ask user to configure browser if he/she wants to work with larger text.

It will be great if we could have nice looking and readable default styles for generated html.

It will be great if we could have nice looking and readable default styles for generated html.

Isn’t this just an opinion and depends on the median and user’s screen?

You can’t satisfy everybody and also can’t people just do ctrl+plus to increase font size? I swapped out milligram for bootstrap on my project and code my own css.

I’d even guess you’re expected to switch out the default styling at some point, because afaik it’s mostly meant so you can try out phoenix/use the generators, but not much else.

1 Like

The point of using milligram is that it does not require additional markup. So it’s easy to remove.

Using bootstrap, or the like, You would need to add some CSS classes to be shiny.


Default font-size doesn’t require additional markup either. Looks like I’m only one here with a concern about default font-size being too small. ((

Sorry, I just commented on milligram’s choice, not on default font-size.

You can try adding it as a PR. I don’t expect the phoenix team minding it if you don’t add vast amounts of css, which goes against the reasons already outlined in this topic.