With the design critique complete and having taken some time to digest and review the feedback I had received I was now ready to look at implementing that feedback to improve my prototype.
Increasing the font size was the most pressing alteration I needed to complete as currently it was making my content unreadable to users. I used the industry standard 16px for body text and from there I used the perfect fourth type scale to create my heading and other sizes. Now, I needed to experiment with a larger body copy size and see how this affected the hierarchy of my headings.
I started by experimenting by adding one pixel to my body copy size taking it to 17px.
While this was a clear improvement looking at this screen and the others I felt I could increase it still further, so I decided to try 18px.
This seemed much better but to confirm my feeling that 18px was the correct size for my body copy I decided to increase it again as an experiment to 20px.
At 20px for body copy the hierarchy between my body copy and headings, was not what I was looking for, I did have a look at increasing my sub-heading size but if I did so in line with the type scale I was using they became too large. For this reason, I believe 18px is the best mix of making my content readable and the design still working as an overall layout.
I decided to scale up my headings, sub-headings and quotes to match the original type scale which left me with the result below:
As I had set my text styles within Figma it was easy to change the font size as I only had to change the style and it changed the size in all the copy using that style which saved a lot of time. I did have to go and check my alignment on all the pages as the change affected this but this was easier than having to change the size of every individual piece of text.
