Fonts / layout too big

[PVince81]

On my laptop's screen 1920x1080 with HiDPI and zoom 100%:

Compare this to Github in the same browser and same zoom factor:

I think we should reduce the font size a bit to match what other websites are using.

Currently I need to reduce the zoom factor on my screen to be able to properly appreciate the public link panel or sharing panel. Should we aim to make those panels fit on the screen with such resolution ? (it won't fit on mobile and that's ok)

[marcus-herrmann]

In my opinion the font-size of 15px is actually quite okay. It's only 1px difference compared to Github's 14px. What is different though is that GitHub's layout is more condensed, especially when it comes to row heights and general white space. Having said that (and not being a graphic designer) GitHub's condensed UI is not perfect and whitespace and clear structures are normally a good thing. Accessibility-wise, when it comes to overview, what is related to what and overall "UI calmness", the current phoenix UI does a good job.

But I still get your point. The possibilities to resolve are:

• Responsive Fonts. While this is not natively implemented yet, there are good ways to solve this with SCSS (in-depth article on css-tricks about the technique/linking to a ready-made npm script). In a nutshell: Dependent on the screen sizes the font-size grows and shrinks, but within a range. So it is made sure that when resizing the interface, the size never shrinks below XX pixels, but also doesn't grow above YY pixels. Here's a nice example with "debug output" in the footer, providing information about the current viewport width and font size.
• In addition, breakpoint-dependent paddings, margins, widths, heights (of FileList rows, for example), or maybe better: dimensions that depend on the file size using em in CSS instead of px. Currently a FileList row is 73px high, regardless of the screen's width.
• We could go even further and throw custom properties into the mix, in addition to the factor above

If UX/design is aware of this possibility, it could take these potential solutions into consideration during UX refinements (@wuenschedesign)

[pascalwengerter]

@marcus-herrmann is this still relevant after the re-design?

[marcus-herrmann]

@pascalwengerter No, I think not

[pascalwengerter]

Closing this since it's not an accessibility issue and seems okay for now. @tbsbdr please shout if you receive user feedback regarding font sizes (will also be customizable via theming soon btw)