Change desktop font size to match google

[abotteram]

Summary

This PR can be summarized in the following changelog entry:

• Changes desktop snippet preview to match Google's new font sizes.

Relevant technical choices:

Test instructions

This PR can be tested by following these steps:

• Inspect the snippet preview. Make sure the mobile snippet preview fot sizes haven't changed, and the desktop snippet preview font sizes are the following:
  Title: 20px
  URL: 16px
  Meta description: 14px

Impact check

• This PR affects the following parts of the plugin, which may require extra testing:
  • Snippet preview

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Quality assurance

• I have tested this code to the best of my abilities
• I have added unittests to verify the code works as intended

Fixes Yoast/wordpress-seo#13421

[afercia]

Not sure this 28px is correct. Though is later overridden, it affects the line-height calculation in the mobile snippet. Will attach screenshots.

[afercia]

CR 👍
Acceptance 🚧

A stray value of 28px should be changed to 16px. When rendered in the plugin, it affects the line-height calculation thus increasing spacing between title and description in the mobile preview.

Other minor details should be updated as well. For example: the position of the down arrow icon and the line-height of the desktop description, which is slightly different. Screenshots:

Desktop before – after – Google:

Mobile before – after – Google (via browser dev tools) – Google (on an Android device):

[afercia]

Updated the line-heights with some new constant values. Spacing between the 3 elements should now match as much as possible the new Google snippets (both mobile and desktop).

Important:
Google updated some colors, most notably the title color on desktop:

Desktop title color: #1a0dab 
Desktop date color: #777 
Mobile date color: #70757a

Please don't forget to test the alignment of the caret icon on both mobile and desktop previews:

(though it's not possible to make it perfectly vertically aligned with all the elements)

[abotteram]

CR 👍

[abotteram]

Acceptance 👍