-
Notifications
You must be signed in to change notification settings - Fork 3
#2322: fonts on mobile screens #1083
Comments
@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:
Sorry that's quite a bit of stuff! |
@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? |
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 |
@rittermo ahh ok, sorry, didn't know that. |
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?
![IMG_0614](https://user-images.githubusercontent.com/15341015/67188470-afdf7700-f3ec-11e9-99c2-0570a8f5221f.PNG)
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.
![Bildschirmfoto 2019-10-21 um 10 29 01 Kopie](https://user-images.githubusercontent.com/15341015/67189203-19ac5080-f3ee-11e9-9ad4-a4b1a3f58b6e.png)
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.
The text was updated successfully, but these errors were encountered: