#2322: fonts on mobile screens

[rittermo]

I’ve tested the current version on my iPhone and on the Safari simulator for iPhone 8 (414px width/ 375px width). Here are the issues I’ve found for fonts. There will be a separate issue for margins + scaling in general.

The logo is too small on mobile and the h1 should be smaller (1.25 rem), so that it can be read more easily. Accordingly, I would set h2 to the same size as h1 (1.25) or smaller (1 rem).

The organisation name should have more margin/space below (1rem) and it should be fat – that would also improve the logos position. The org logo is too small compared to the name. Can we reduce the padding inside the white frame, so that the actual logo image scales bigger?

The font size for the item titles is too high. It should be 1.25rem(I think that should be the max font size we use for screens smaller than 600px width). The line-height for headlines is a little high. It should be 1.1 instead of 1.2. The font size for labels is too high on small screens. It should be 0.75rem max here, so that the labels fit better and do not overshadow the headline.

The font size for buttons and dropdowns on small screens is too high. It should be 1rem.
Also the placing is problematic. Until we come up with a better solution, the sorting should have a margin-top from the filter buttons to differentiate the two groups. The sorting also should be left-aligned on small screens, were the filters and sorting can’t be displayed in the same row.

A more general font thing: We use a serif font for projects in the dashboard and a sans-serif for the project list on the organisation landing page. We should use the font/headline style of the organisation landing page in the dashboard too.

[philli-m]

@rittermo thanks for the feedback, this is covering a lot for one issue though, if it could be broken up a bit in future that would be great, I have started going through things so far and may add more question but for now:

• h1 at 1.25 will equal around 35 chars per line which is not recommended, in our meeting I wrote that we decided on 20 per line but current size actually is closer to 18, I would maybe go for around 25 so 1.5rem would that be acceptable?
• buttons, we need a minimum clickable area a11y guidelines suggest 44*44, 1 rem would take it slightly below this suggested height, what is your priority here?
• serif we use only on h1 and h2's as discussed would you prefer it to only be applied to h2 or to extend it to h3s? we can also change the h3 to 2s but i'm not sure it makes sense, I need to look at the structure of the page

Sorry that's quite a bit of stuff!

[rittermo]

@philli I talked to Katharina on Thursday that I would make a combined issue. Tbh, I don’t think issues make much sense at all for these things. Maybe we should sit together later after I finished testing?

[rittermo]

But first feedback:

35 chars is still not that much per line. Our minimum target should be twenty, but as you see on the landing page, the headline is just not very readable at all. That’s why 1.25rem should be the max. font-size

Please decrease the button size. The 44 point minimum area is something we can consider later, once we change the layout for this that does not mix them all together

I would not change the headlines but just change the type of headline we use in the dashboard to the one we use in the partner landing page

[philli-m]

@rittermo ahh ok, sorry, didn't know that.
Cheers for answers and yes if you have time once testing is done then sitting together would be great! let me know when you're free, maybe after speakup