- Headings should always be larger than the base font, regardless of breakpoint.
- Links should be styled differently to the base font so they can be clearly seen within a body of text.
- Only use h5 and h6 if the h1 font is big enough for the sizes to cascade down to a h6 size which is larger than the base font.
- Headings become the same size as the body text on smaller breakpoints.
- Links cannot be easily seen within a body of text.
- Links should not change their weight on hover as this can cause layout shift.
Examples - Text sizes changes depending on breakpoint:
H1. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
H2. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
H3. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
H4. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
[Base] Nam nec auctor neque. Mauris aliquet pulvinar eleifend. Cras pretium mauris leo, quis congue dolor feugiat a. Etiam ut interdum tellus. Aliquam a velit ultricies, aliquam diam eget, consequat nibh. Praesent condimentum mi nec risus tincidunt aliquam. Vivamus eu placerat risus. Morbi facilisis enim a lacus elementum, in ultrices risus congue. Phasellus pellentesque leo massa, in eleifend mauris accumsan et. Phasellus vitae felis mi. Quisque sollicitudin dapibus sem ut ultrices.
[Small] Proin eu neque nec orci laoreet lacinia. Sed sit amet lectus ut leo fringilla aliquet. [Extra Small] Proin eu neque nec orci laoreet lacinia. Sed sit amet lectus ut leo fringilla aliquet. LinkExample - Text sizes changes fluidly on breakpoint:
H1. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
H2. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
H3. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
H4. Mauris interdum gravida varius. Nulla et vestibulum enim, nec volutpat lorem.
[Base] Nam nec auctor neque. Mauris aliquet pulvinar eleifend. Cras pretium mauris leo, quis congue dolor feugiat a. Etiam ut interdum tellus. Aliquam a velit ultricies, aliquam diam eget, consequat nibh. Praesent condimentum mi nec risus tincidunt aliquam. Vivamus eu placerat risus. Morbi facilisis enim a lacus elementum, in ultrices risus congue. Phasellus pellentesque leo massa, in eleifend mauris accumsan et. Phasellus vitae felis mi. Quisque sollicitudin dapibus sem ut ultrices.
[Small] Proin eu neque nec orci laoreet lacinia. Sed sit amet lectus ut leo fringilla aliquet. [Extra Small] Proin eu neque nec orci laoreet lacinia. Sed sit amet lectus ut leo fringilla aliquet. Link