<html><head><meta http-equiv="Content-Type" content="text/html charset=windows-1252"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;"><div>+1</div><div> </div><div>I also find 11px too small, we are using 13px in LiveOak, 12px as a smaller size.</div><div> </div><div>Gabriel</div> <div><div>On Mar 25, 2014, at 4:28 PM, Liz Clayton <<a href="mailto:lclayton@redhat.com">lclayton@redhat.com</a>> wrote:</div> <blockquote type="cite"><div style="font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">Hi, ----- Original Message ----- <blockquote type="cite">From: "Emily Dirsh" <<a href="mailto:edirsh@redhat.com">edirsh@redhat.com</a>> To: <a href="mailto:patternfly@redhat.com">patternfly@redhat.com</a> Sent: Tuesday, March 25, 2014 2:36:03 PM Subject: Re: [Patternfly] FYI - Latest API Management UI +1 </blockquote> +1 <blockquote type="cite">While there are differences in resolution/system rendering/context/etc, 11px is a very small default body text. (Much smaller than _11pt_.) </blockquote> I don't have examples, but here are some interesting articles on the topic: - in case you are worried that 12 is too big: <a href="http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/">http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/</a> - general accessibility info: <a href="https://www.webaccessibility.com/best_practices.php?best_practice_id=1822">https://www.webaccessibility.com/best_practices.php?best_practice_id=1822</a> <a href="http://accessibility.psu.edu/fontsizehtml">http://accessibility.psu.edu/fontsizehtml</a> <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#guidelines">http://www.w3.org/TR/2008/REC-WCAG20-20081211/#guidelines</a> -Liz C. <blockquote type="cite"> Just some real-world examples - OpenShift console body text defaults to 14px, the Patternfly site has 13px body text, the default Bootstrap body text size is 14px. ----- Original Message ----- <blockquote type="cite">From: "Jeremy Perry" <<a href="mailto:jeperry@redhat.com">jeperry@redhat.com</a>> To: "Matt Carrano" <<a href="mailto:mcarrano@redhat.com">mcarrano@redhat.com</a>> Cc: <a href="mailto:patternfly@redhat.com">patternfly@redhat.com</a>, "Catherine Robson" <<a href="mailto:crobson@redhat.com">crobson@redhat.com</a>> Sent: Tuesday, March 25, 2014 1:53:10 PM Subject: Re: [Patternfly] FYI - Latest API Management UI I know I’m coming out of nowhere with this, but I think looking seriously at 12px as a default is worth exploration. Aside from increased legibility, the number 12 has many benefits for creating a typographic rhythm on line heights like 1.25, 1.5 etc. On Mar 25, 2014, at 12:08 PM, Matt Carrano <<a href="mailto:mcarrano@redhat.com">mcarrano@redhat.com</a>> wrote: <blockquote type="cite">Catherine/Eric, Thanks for passing along the feedback. It is great to see these screens and to know that Overload is now using PatternFly styling. Also, good tip about the Rawgithub tool. I can see where this can be a really helpful thing. Regarding the font sizing, I can see what you mean about the 11pt text. This is a tricky issue because I find that readability depends a lot on monitor resolution and context. There's probably not one right answer for all cases, and this also varies a lot from person to person. That said, it's something for us to keep in mind and I appreciate getting the feedback. I'm copying in the PF list as others may also have thoughts who are more knowledgeable in this area than I. -Matt ----- Original Message ----- From: "Catherine Robson" <<a href="mailto:crobson@redhat.com">crobson@redhat.com</a>> To: "Matt Carrano" <<a href="mailto:mcarrano@redhat.com">mcarrano@redhat.com</a>> Cc: "Eric Wittmann" <<a href="mailto:eric.wittmann@redhat.com">eric.wittmann@redhat.com</a>> Sent: Tuesday, March 25, 2014 11:08:02 AM Subject: Fwd: Re: FYI - Latest API Management UI Matt, Eric is using the PatternFly font recommendations, but we both felt the font was too small to read easily. He noted that it was 11px by default (and is what he currently has implemented), but 12px seems to be much easier to look at. You can click on the link he provided below to see his application (without the top header area at this point). Thought I would forward this to you for feedback on PatternFly. Thanks! Catherine -------- Original Message -------- Subject: Re: FYI - Latest API Management UI Date: Tue, 25 Mar 2014 11:04:26 -0400 From: Eric Wittmann <<a href="mailto:eric.wittmann@redhat.com">eric.wittmann@redhat.com</a>> To: Catherine Robson <<a href="mailto:crobson@redhat.com">crobson@redhat.com</a>> Thanks for the feedback. Regarding font size - it's funny, I thought it was too small as well, but the font size is coming from PatternFly (I think) so I assumed that was the recommended size. I'll def. change it. I may book an hour with you - would love some functional feedback. -Eric On 3/25/2014 10:48 AM, Catherine Robson wrote: <blockquote type="cite"> Eric Wittmann wrote: <blockquote type="cite">Just wanted to let you know that I have applied the PatternFly styles to my most recent project UI. I also discovered a web site called "<a href="http://rawgithub.com">rawgithub.com</a>" which is amazing and allows me to view the UI templates as webpages directly from the github source! That's a super nerdy thing to be excited about, but I'm not ashamed. :P </blockquote>This is very cool! I hate having to check stuff out and figure out how to build it. <blockquote type="cite"> In any case, it means you can view the UI here (if interested) without downloading or checking anything out: <a href="http://rawgithub.com/Governance/apiman/master/apiman-dt/apiman-dt-ui/apiman-dt-ui-war/src/main/java/org/overlord/apiman/dt/ui/client/local/site/user-orgs.html">http://rawgithub.com/Governance/apiman/master/apiman-dt/apiman-dt-ui/apiman-dt-ui-war/src/main/java/org/overlord/apiman/dt/ui/client/local/site/user-orgs.html</a> What you *won't* see is the header, which (like all overlord apps) gets added later via javascript. So it looks a little bare without that, but hopefully you'll get the idea. :) Also note that I tried to ensure that every page looks good in a browser but also in a phone - so that aspect of things should be working well. </blockquote>Looking great! <blockquote type="cite"> Any feedback welcome. </blockquote> The only feedback I have is that font is a bit small. You might want to bump the body font size up to 12px instead of 11px. It makes it much easier to read I think, and doesn't seem to ruin the design in any way to me. Otherwise, from a design standpoint, I think this looks good. I have no idea what it is supposed to be or do from a functional standpoint, so I don't think I can comment on the usability or workflow really at this point. If you want to review this level of stuff, maybe book an hour with me and we can do a walkthrough of it together. <blockquote type="cite"> -Eric </blockquote></blockquote> _______________________________________________ Patternfly mailing list <a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a> https://www.redhat.com/mailman/listinfo/patternfly </blockquote> _______________________________________________ Patternfly mailing list <a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a> https://www.redhat.com/mailman/listinfo/patternfly </blockquote> _______________________________________________ Patternfly mailing list <a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a> https://www.redhat.com/mailman/listinfo/patternfly </blockquote> _______________________________________________ Patternfly mailing list <a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a> <a href="https://www.redhat.com/mailman/listinfo/patternfly">https://www.redhat.com/mailman/listinfo/patternfly</a></div></blockquote></div> <div> <div style="color: rgb(0, 0, 0); letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;"><div>---</div><div>Gabriel Cardoso</div><div>User Experience Designer @ Red Hat</div></div> </div> </body></html>