Gaurav Dhiman
May 3, 2015 · 5 min read

Exact design details and proportions of stories written by you on Medium.com

Have you ever wondered what makes Medium.com so great to read, write and share?

Being a designer and someone who loves to write, it certainly got me curious. I dug deep into several stories on Medium to find out what are those little details that constitutes for such a pleasure experience.

A little background: It is created by the people who previously built Blogger, Odeo and Twitter — Obvious Corp. It is known as a cross between Tumblr and Pinterest. Tumblr relies on artistically structured templates and Pinterest is designed to be picture focused. You’ll feel these characteristics when you write a post on Medium.

This post will cover text and image components of any Medium story. It covers proportion of images, exact font names and font styling based on different text layouts.

When you write on Medium, you’ll find 6 types of image layouts and 7 types of text layouts.

Text

Medium doesn't provide font options to choose from, in order to maintain uniformity and consistency in reading experience. On average there are 12 words in every line.

Medium.com Text Toolset

Normal text without any styling, like this paragraph is left aligned, written with Freight Text Pro font with size 22px, 1.5 line height and font weight 400.

B — Bold
B stands for bold which adds ‘<strong>’ HTML tags around the selected text and changes font weight to bold. It keeps all the other characteristics like font, font-size and line height same as normal text.

i — Italic
i stands for italics which adds ‘<em>’ HTML tags around the selected text and changes font style CSS property to ‘italic’. Just like bold, it doesn’t change other font characteristics.

HTML heading tags (H1, H2 & H3) are used to indicate section heading and subheadings. They are not meant to make text big or bold.

H1 — Heading 1
This is the largest text size available in Medium with pixel size 60px and font weight 700. The font changes to JAF Bernino Sans.

H2 — Heading 2
H2 has the same font and font weight as H1 but type size 36px.

H3 — Heading 3
This is the slimmest text in the toolset with JAF Bernino Sans font, size 32px and font weight 300.

Center Text
This tool helps you align any content in center.

Blockquote

The details are not the details. They make the design. — Charles Eames

This tool helps you add quotes and citation in your story. It adds HTML tags ‘<blockquote>’ around the selected text. Font Freight Text Pro, styling italic, weight 400 and size 22px is used.

Double Blockquote

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” ― Antoine de Saint-Exupéry

Tapping quotes button twice on the selected text will give the above result. It’s Freight Text Pro with italic font style and 32px text size. One interesting detail of this toolset is that it adds extra 160px margin on both sides.

Blockquote + Italics

If you click italics while applying blockquote property, it will turn the text in non-italics(normal) form. You can also bold specific parts by clicking ‘B’ on the selected text. Example: “John Maeda” in the example below.

“Simplicity is about subtracting the obvious and adding the meaningful.” ― John Maeda

Link
Adding hyperlink to text adds underline below the text. Example: Knowledge Lover


Images

Let’s begin with different types of image layouts offered by Medium.

Medium.com Image Toolset

If you upload an image with resolution less than 1020px width, you’ll get 3 image layout options and upload any image above 1020px width, it will give you 6 layout options to choose from.

*px stands for Pixels

Image Layout 1

Image Layout 1

Width will be automatically set to 350px, aligned left and can be of any height.


Image Layout 2

Image Layout 2

Width will be automatically set to 525px, aligned left with negative margin of 160px and can be of any height.


Image Layout 3

Image Layout 3

Layout 3 occupies full text width of the story — 700px. Image can be of any height.


Image Layout 4

Image Layout 4

This is an off-canvas layout with width of 1020px with 160px margin on both sides, center aligned and image can be of any height.


Image Layout 5

This layout occupies full width with any height of your screen, it will adapt itself according to your device. Advisable to use a high resolution picture for this layout.

Image Layout 6

Full Width & Full Height With Shadow

Why Medium?

Although Medium is an excellent platform which makes it easy to read and write, it has limited customization ability to maintain uniformity. Also, once you publish on Medium, they can use your story (Sell it, use ads or do anything else— without paying you), even though you own the copyright.

If you want complete control of your blog, Wordpress is an ideal choice to get things running. Setup takes a bit of time initially, but once you get over the first hump, you will have complete control over every last aspect of your blog — from design, writing or advertising. For completely customized solutions for your blog contact professional. — http://gauravdhiman.com

Gaurav Dhiman

Written by

Artist. Perfectionist. Visionary. Collector. Knowledge Lover. At the same time. http://knowledgelover.com & http://gauravdhiman.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade