With the way this is worded we often see confusion on this point and I have had many an argument over this.
What seems to be the general consensus and the model we work to is that these two points should be handled separately in terms of testing, but you can utilise responsive design to achieve both.
So assuming that if I set my zoom to 400% the font will increase a MINIMUM of 200% (taking into account media query changes) and reach a size larger than the minimum required size of 32px. (the minimum for 200% size) equivalent on the mobile view then this is a pass. I have yet to see a site that can be zoomed to 400% where the font size doesn't meet this requirement (as otherwise the font size would have to be 8px equivalent on mobile).
With the above being said that is how you 'pass' WCAG requirements, but we can do a lot better and I always insist on the following requirements on projects we complete:-
- Font sizes should be in
em
and rem
units so they can be scaled by the users settings.
- Any design should be able to accommodate 32px (equivalent) font size without zooming and no text clipping. So all containers should expand to fit etc.
- The only exception is menus where we have a minimum requirement on 24px (150% font size) due to the fact these often take up too much space when they are fixed headers spanning multiple lines. This is technically a fail but browser zooming can overcome this limitation.
- All websites should work with the browser font size set to 'very large' and scale the font appropriately (as if you set the base font size as
px
or vw
browser settings are ignored).
- (optional but we added it to our spec last year) - an 'accessibility settings' page should be included that allows a user to change the font size on the site to 200%.
The advantage of point 5 is that you can then control more complex layouts. For example if you have a three column grid then setting the font size to 200% in the browser will make it unusable. However if you have a settings screen where the font size can be changed to 200% you can apply styling to change those three columns into two columns so the content fits.