What do you think of this new font and design plan? [closed]

Question

Hi WikiTreers,

As mentioned in December, we are working on a redesign of WikiTree. It's been 10 years since we last updated the overall look and feel of the website.

We now have an outline of the basic design choices we're planning: the new font, font size, margins, colors for links, buttons, status messages, feature boxes, etc.

Please check out https://www.wikitree.com/temp/style.html and see what you think.

• How does the overall page look on your device?
   
• Do you like the look of the colors, buttons, etc?
   
• Is the text inviting and easily readable?
   
• Is there the proper amount of contrast where text appears on a colored background?

We particularly need feedback from our Accessibility Angels on those last two questions.

App developers, you might also want to see https://www.wikitree.com/temp/columns.html and give more technical feedback.

Please, let us know your opinions and suggestions with an answer below. (Comments at the top will be hidden or moved once read.)

Thank you!

Chris and the WikiTree Team

Comments

Sorry I took so long to see this. 

Overall, terrific.  I'm concerned about how the colors will be used.  I think that some people finally allowed to use color may get carried away which will detract from readability.  And speaking of legibility, my main concern with color is that some people will opt for reverse type, leading to severely reduced readership.  Ask David Ogilvy, Confessions of an Advertising Man.  Reverse type, for me, leads to feelings of eye strain, and possible headache, depending on how determined I am to finish the piece.  

Finally, on this topic, people often don't know how to mix colors, not together, but in the same context, leading to similar headaches.  There are actually prank kinds of "artwork" having, for example, the word STRESS with a certain red on a certain blue (or other combinations),  background that actually lead to grinding of teeth (and that headache I mentioned)  

Answer 1

I love the readability of the font. My feedback is that the visited vs. unvisited link is a bit difficult for me to differentiate. There is a difference (the visited is a little darker), but not enough of a difference for me to notice it while casually scanning a page. I'm using Windows 10 PC, Chrome Browser.

Comments

Ditto, for me.

Answer 2

Can the Tech Team give us a full-sized mocked-up profile, and possibly mock-ups for other namespace pages like Help and Categories, showing these proposed style elements in action?

Using existing pages (like Example profiles), with mock-ups of them, would be helpful for comparing the old style with the proposed new style.

---

edit: Are the columns on the test page relevant to the new design?

---

edit 2: After comparing some pages to the new styles, I noticed that existing buttons generally use "all caps," while the new buttons (exception is the tag button) don't. If that is a proposed change, I like it.

I also compared the headings text to existing pages, and agree with fellow members who find the proposed sizes too big in comparison to the general text.

I have no problems with the colors or with the fonts themselves. Ditto for the styling of the boxes and buttons.

I agree with members who suggest using different visual cues for the alert boxes.

Answer 3

It's looking great so far and the Atkinson font works very well, but a few constructive criticisms as a dark skin user on a laptop.

The colours: #25422d  and #333333 are difficult to see and #393A3C is invisible.  
The visited and unvisited links look the same.
The text in the Testimonial box is very faint.
The green boxes have no outline and the orange boxes just have a thick orange line down the left hand side.  The white (to me) boxes are fine.

Everything else looks just fine!

Comments

I've looked at this again using the default settings.  Everything looks good to me in this version and I can now see that what is missing on the dark skin version from the boxes is the orange and green backgrounds to the text and the left hand border on the green boxes. The visited link shows up very clearly once clicked.

Answer 4

For me at least:

• Generally a good font and colors.
• Bold is too thick though...the letters run together (EDIT: This is only in Firefox; In Edge the bold looks fine)
• Text size is good on iPhone, but way too big on my PC; I can zoom it down to 80% to get closer to "normal" for me.
• Headings are way too big on both iPhone and PC. Maybe Heading 1 should actually be the size of Heading 5 and the rest reduced accordingly.
• Agree with different Alert symbols for color-blind people.
• Agree that the Submit Form and Primary Button text-to-background contrast could be better.

Comments

Agree on the heading sizes.

---

LOL! about the text size. I'm already using 80% for WikiTree, have done so for eight years. It's the only site I need to do this for.

The new font is pretty nice, but does look a little big on my screen. Will see if I must take another step down ;-)

---

I agree that the headings seem way too big, especially Headings 1 and 2.

Answer 5

I am in the restisting reading glasses phase of getting older  and the text was so much clearer with the new font!

I wold liked to have seen it on an actual profile to see how it would really look like.

Answer 6

Generally looks good, thank you! Some thoughts:

- The Atkinson font is a pleasant, readable choice. Roboto Mono doesn’t really look optimal paired with it, though, at least to me.

- The size difference between the standard paragraph and Heading 1 is huge, which would make content of Heading 1 extremely dominant on the page. (Unless Heading 1 is just for the profile name at the top? If so, this remark wouldn’t apply.)

- Heading sizes in general seem really large compared to text (except for 5 and 6). They seem far more dominant than in the current style, but it may help to see them on a mock-up profile.

- There also seems to be lot of extraneous white space, especially around top and bottom of heading 1 and heading 2. The extraneous space around the larger headings may also mean less of the page fitting on screen at one time, and more scrolling down. (Phone users may be more used to this, we laptop users tend to like the broader field of view.) Also extraneous white space on laptop view can be visually uncomfortable, especially for late night users. Again, this may look different on a mock-up page, just a thought.

Thanks for asking for everyone's input.

Answer 7

I sought the input of my husband who creates and maintains websites for a living, and these are our thoughts:

• The Alerts. The Success and Failure boxes are not red/green colorblind friendly. Especially as they both contain an Exclamation mark. Perhaps the green success box should use a check mark icon instead. Although, for even better colorblind-friendly, a blue success box would be ideal.
• Also: to be more accessible for the full range of people with other vision issues, high-contrast and dark mode are useful. (I realize currently that the browser extension provides dark-mode, but it would be better built-in and available to people just visiting the site as well.) An idea would be to have several color palette options a person could choose from when visiting the site (much like how one can choose a language from a drop-down menu on many websites), including, but not-limited to
  • regular light mode,
  • light mode with high contrast,
  • dark mode, and
  • dark mode with high contrast.
• Highlighting. On the sample page, it is highlighting text in light orange, that when highlighting text within the Orange Box... well, it's not showing at all because the colors are the same. And again, back to the prior point: the light orange highlight in the green box is not high-contrast. 
• Font. The fonts chosen are good in general. If accessibility is a goal though, it would be good to also add a specifically dyslexic-friendly font (see "Dyslexie" font for an example).
   

I realize creating multiple color (and font?) skins for the site would be work, but if the functionality were turned on, maybe other users like myself could do the actual effort of creating the palettes.

At the end of the day, I would personally be happy with an official dark mode palette, but I recognize that my own vision issues are not the only ones out there, so it'd be nice to have even more options available to Wiki-regulars and our site visitors. 

Answer 8

I do like the Atkinson font.

The "orange box" and "rounded orange box" on the left show yellow for me, in both Firefox and Chrome.  While the Primary button and the Submit Form button are clearly orange.

In the color samples, #eeffee  is very faint, and #ffffff is just not there.  This also in in both Firefox and Chrome.

Could we see a sample profile? and a sample freespace page?

Comments

#ffffff is the hex code for white, so you can't see it because it's white on white.

#eeffee is a very pale green. To get a good contrast ratio--so you could actually see it--it and pale colors like it would ideally be used against a black or very dark background. They will not have an acceptable contrast ratio on a white background as they are shown on the sample page.

Different monitors will display colors a little differently. You can adjust or calibrate your monitor's color settings but you may still see it on your monitor a little differently than I see it on mine. This is why it is so hard to shop online. I once ordered a blouse. It looked like a gorgeous lemon yellow on my monitor, but when it arrived it was more of a school bus yellow. Not a color I like or look good in so I returned it.

I agree with you it would be beneficial to see these colors presented on an actual profile page. Hopefully, that is in the works for us.

---

Thanks, Nelda.  Obviously I don't know hex codes.

Answer 9

Thanks for the opportunity to provide feedback. As others have said, a mock-up of a sample profile using the new style could allow more relevant assessment.

I agree the overall legibility is good, but have a couple of aesthetic quibbles:

1. The bold characters as in "This line rendered as bold text" seem overly fat or heavy on my setup (Safari on iPad).

2. The text in headings like

HEADING 6 WITH CATEGORY CLASS

looks disproportionately too small.

I went to the "visited link", returned to the sample page, and refreshed, but I can't see what colour is intended because my WBE settings override it. Also as others have noted, the coloured rounded boxes only have round corners on their right hand sides, not the left. The plain colour one is rounded on both sides.

Answer 10

My colour blindness makes it difficult for me to distinguish different shades of red and green.  The following look almost the same to me:

ALERTS

Default status for warnings.

Green status for success.

I think default status for warnings should be more red.

Comments

The default status for warnings is intended to be yellow (or what they call orange). Only the red status for warnings is red. Can you distinguish that?

Color-blindness always amazes me. There are so many different types. For instance, my sister can't tell between pink and orange, but she can see other colors. My brother cannot distinguish blue from green in many cases.

Answer 11

Overall, the page looks good. I like the differences, especially the font and font size. Most changes are a bit subtle, though. I suppose I was thinking it would be a more radical change.

I have a question. On the current pages, there is a gray margin where background images we apply, if any, are displayed. Is that margin still there and will it just be white now? I'm wondering because I saw a couple of comments about too much white space/side margins being too wide and I was wondering if the change in color of that margin would be what gives that appearance.

Comments

I believe that the margins mentioned is the spacing between elements, not page margins like you are thinking.

For example, the amount of spacing between paragraphs (the orangish colored line) here:

Answer 12

Overall I like the direction. The colorblind issues can be tested with https://www.toptal.com/designers/colorfilter and are significant.

While I like the font somewhat, I've looked at more text and find that it is slower to read. There are studies that do show that wider spacing of characters will decrease reading speed. There are other fonts that have the required contrast and shape to be readable for people with vision issues that don't go quite as wide.  One study is at https://jov.arvojournals.org/article.aspx?articleid=2783976

This font does have the characteristics that make a better typeface for dyslexics so that is a plus.

Comments

I meant to mention that there is some really good work on readability of websites being done by the non-profit research group Readability Matters. They have a really good list of research papers that were based on experimentation.

---

I've been trying to put my finger on why the Atkinson font seemed so difficult to read.

I was going to describe it as 'squat', but I compared it to some other fonts and the ascenders and descenders are about the same. Maybe it's the very wide characters that are giving this impression.

---

I think the very slight extra spacing between the characters are enough to make it a bit more work for some people to read. The overall spacing is what make it work for people with decrease visual acuity.

What the readability research shows it that there is no one font that solves the general problem. The experimentation didn't use Atkinson. It found for older users that Garamond or Montserrat were the best fonts. Older meant over 35. Some additional research find another older group is over 60. Partially it come from what you mostly used to read with.

I find Atkinson to be OK for short biographies and tiring for longer. Most WT bios are relatively short so it wouldn't be a problem for most people. I do find Atkinson to be more pleasant to look at than Montserrat which is considered to be very readable for older readers.

Another thing is that what works well for screens may not work well in print.

What I find interesting is that there have finally been some real research being done in the readability arena compared to when I was starting research in this area 40 years ago.

---

I have some other issues with the font choice because the design makes it the opposite of "readable" for some of us.

One of the things you've discovered in your research is that there's no one "most readable" font for everyone. Like the research you mentioned which found differences between younger people and older people. Or what makes a great, readable font for people with low vision may be problematic for people with processing or executive function issues—and there's going to be differences within those groups, too.

Answer 13

This may be a preview intended only for laptop/desktop computers, but my initial concern would be that the base CSS is setting all font size declarations in fixed pixels rather than using adaptive, relational methods like "root em." The result is that the layout doesn't scale proportionally across different viewport sizes.

Contemporary CSS styling I'm familiar with generally sets detected viewport scaling for three to five device sizes and then presents page layouts customized accordingly; e.g., that might be large workstation, laptop/desktop, tablet, large smartphone, small smartphone. The reason is that it really doesn't work well any longer to just let the rendered elements stack on the page for different device sizes without directly controlling the layout experiences. Something that looks great on a laptop--inline images or tables as two examples--may look ill-fitted or be difficult to read on a smallish Android phone.

There is an initial viewport declaration in the example page's header section, but the CSS doesn't seem to employ that to make the result what web dweebs would consider to be a truly "responsive" design.

As is, the heading sizes are humongous. For example:

h1 { font-size: 56px; }
h2 { font-size: 48px; }

And the body text is likewise set in static pixels:

font-family: 'atkinson_regular';
font-size: 20px;
line-height: 34px;

So has Penso.com in Portland been retained to do this work?

Comments

I agree about the pixels. It really needs to be in a scalable size.

Answer 14

I personally like the current font size better because it lets me see a lot more information without having to scroll as much. In particular, having a very large font size in the biography text entry box would cause long citations to take up even more space than they already do. I do understand accessibility concerns, but would it maybe be possible to include a setting to use a smaller font size for those who prefer it?

I also have a serious issue with the proposed font. The style test page does not include samples of how the numerals 0-9 would look, but based on the linked webpage about the font, the number 0 has a slash through it. I feel like this would look very jarring in dates (both in the date fields and the biography), ages, street and district numbers, record ID numbers, and most other places where numbers would be used. If you scroll to the bottom of the style test page, you can see zeros with slashes in them in the copyright notice as an example.

Comments

Good points regarding numbers, Tessa. I added some to https://www.wikitree.com/temp/style.html

Answer 15

Looking great! Nice work tech team. 

Some specific UI comments from me as suggestions:

• I do like the font choice. Nice and fresh. I find the heading styles to be massive in comparison to the body copy. Like possibly far too big. There is a big jump between font size H6 and H5 and perhaps that needs to be reduced, which would subsequently allow all other "higher-up" headers to be a bit smaller. Also - H6 and H6 category class are so vastly different in size.  (So overall, what I'm trying to say is that your hierarchy of font-size could perhaps be crafted a little more)
• Colours: Easy enough to run the colour combinations (depending on where and they are used) through a colour-assessibility tool. (Assuming you might have done this though.)
• Is it my imagination, but is the font displayed on your buttons the fallback Roboto Mono? It seems like the kerning is different. I would keep the font consistent.
• Also, the corner radius for your primary button is different to all your secondary ones - I would also make that consistent across all of them.

Thanks for the opportunity to give some input :) 

Answer 16

I am having trouble with the green and yellow banners.

(I haven't read any other replies) 

The yellow and green are confusing me a little. I am color blind in the red/green bands, which means yellow and green almost look the same. The green would have to be much darker for me not to struggle.  I'm not the only color blind Wikipeep!

I don't have trouble with Blue (other than purple can look blue.

Answer 17

On sample page the "unvisited link" returns a 404 code

Answer 18

This is looking great! I am really encouraged! Thank you.

I am partially sighted, so have to use a special screen set up and my impression may not be the same as others.

My only real concern about the sample page is the amount of difference between the largest text and the smallest. Some modern websites are unusable to me because when I can see the smallest text, the large text (and sometimes images) obliterates and deforms the whole window.

Please consider the need for, what may seem to some, quite extreme scaling in the page design.

The colours and contrasts all work okay for me. However, the points some have made about colour blind users are important.

As others have mentioned, the visited link colour does not seem right at present.  At first it appears the same as the unvisited link (as intended, I think) when I clink on it, it changes to normal text colour (black). It is underlined, making it stand out, until I hover over it, then the underline disappears and it becomes the same as normal text. This is really a small issue though.  I could live perfectly well with it as proposed.

It is wonderful that accessibility is clearly a top priority. Thank you!!!!! So often web page design seems to be all about giving the "right look" with little regard for what will happen if scaling or contrast changes have to be made by the end user. Because of this I was quite scared when I first heard about the redesign plans.  I would so hate to find that I can no longer use WikiTree (as has happened to me with some other sites). I have invested so much here!

Again, thank you. I am actually feeling quite excited about the redesign now!

Comments

Great point about the large-to-small text range, that people will zoom their browser or device settings so that the smallest text is readable to them, but if the largest text is far bigger then it will fill the screen. So a much tighter range of font sizes would allow everyone to size their device settings to their liking without this issue.

---

Thank you, Chris!

I want to make sure I understand your point about the large-to-small text range. Are you specifically talking about the difference between the standard font size and the "fine print" size? Are you saying the fine print font size should be larger and closer to the standard size? To me they seem very close already -- almost too close to distinguish -- so I want to make sure I am not misunderstanding you and Joe.

---

The range of all text size from largest (Header 1) to smallest (fine print)

---

Thank you for your interest, Chris. Yes, as Joe Murray, just said, it is the range of size from the smallest text (that I would need to be able to read) to the biggest text. The point is that as I zoom the screen to be able to see the smallest text, everything gets bigger.  If the size difference to the largest text is too big, it can end up with the window being just about unusable, as the giant text pushes everything out. Currently this issue does not arise on WT, but some sites are a nightmare!

---

Ah, now I understand. Thank you!

(It seems likely that we will adjust the header sizes, since many other members have mentioned this as well.)

Answer 19

I would prefer an inverted header, so that should not feature #dedecb but the same color as the footer section probably color #25422d. 

in addition, the tables getting added to free space pages and sometimes profile pages often span more than one column. Hence, it should be considered if one can have a wider text column. Also, some of the custom formatting done by the browser plugin eg on siblings and parents would be great to see reflected in the standard design. 

Answer 20

This is so great!  I also have aging eyes.  I looked at the test page on both my phone (Samsung Galaxy 21) and on my regular desktop PC (24" screen).  On my phone -- everything was sharp and contrast was great except color #eeffee and #f0f0eb.  

The gray (#f0f0eb) was a bit better.  The very light green, not so good.

On my desktop screen -- everything was quite sharp even at 90% except the very light green.  At 100% and 110% everything was sharp and clear (including all the colors)

I'm very excited about all this.  Thank you so much for all the hard work, Chris and team!