Feat/improve layout

[f-hollow]

The current proposed changes in this PR

This PR is created for testing fonts and different layout settings. If we conclude that the changes are beneficial, we will merge them. The following changes are introduced:

• Using zen mode doesn't make content field wider
  • Fixed by reverting commit c27f19f573c122c84993abf9abca3ce1b3d7ab7b
• Try different proportions between content and the table of contents
  • Compared with Medium, the width of content basically the same on both platforms
• Reduce font in code blocks
  • Medium fits 80 characters per line in a code block
  • Devportal with reduced font size (0.85rem in CSS file) offers the same width
• Choose font
  • Added serif font Charter for body text (similar to Medium, see Research into fonts below),
  • Updated a monospace font in code blocks (looks more elegant now and closer to Medium in style)
• Show article summaries on list pages (for now, the first sentences of the article)
  • The standard settings look ugly, summaries should be shorter
  • We can use description in YAML header for articles to keep it under control, or we can reduce the number of characters shown
• The line height of a bullet point is similar to the spacing between bullet points
  • Reduced line height of a bullet point to 1.65 to make individual bullet points more discernable in lists

These CSS might cause small issues and need to be tested. Once we decide on what we want to implement, the CSS code updates will be tested.

Research into fonts and their licensing #

Medium website fonts

According to What font does Medium use on its website?, the body typeface is Charter marked as "free for commercial use."

Safe alternative fonts

The safest option for the Developer portal is to use fonts that are licensed under the SIL Open Font License (OFL). Here is a brief summary on advantages and disadvantages of open-source fonts.

Websites offering open-source fonts:

• fontesk
• Font Squirrel "open" category
• Open Source Fonts (curated resource)

Useful information

Typeface vs. font, see Monotype FAQ > What is the difference between a typeface and a font?

[pedrominatel]

Thanks, @f-hollow!

[f-hollow]

As we agreed, I did the following:

• Reverted the body font change
• Reduced TOC font size

The other changes will be done tomorrow.

[f-hollow]

Pushed the following changes:

• Reduced the font size in article summaries.
• In footers of articles, the article cards had larger font weight, I made it equal with the font weight in blog page's article cards.

Minor fix required:

• If an article starts with a section, like # Introduction, the hash sign also shows in the summary. There are other similar smaller issues that need to be cleaned up.

[f-hollow]

@pedrominatel I failed to find the issues of images with overlapping text in Zen mode.

Can you please share where you saw such issues?