Typography for DIY Website Designers

[et_pb_section fb_built=”1″ _builder_version=”4.9.0″ _module_preset=”default”][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” admin_label=”Intro. + Font Selection” collapsed=”on”][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”4_4″][et_pb_text _builder_version=”4.9.0″ _module_preset=”c8b26833-da52-40db-b2b8-e56e4794349a” hover_enabled=”0″ sticky_enabled=”0″]

Sloppy typography is often the first indicator of a DIY website. Putting even a one-page website together is so much more than selecting a font and changing the color to make it stand out. 

Here are a few areas to consider when you are designing your first website.

[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]

Font Selection

In our professional opinion, a website should have no more than 2 fonts. Seldom 3.

Consider these modern pairings.

[/et_pb_text][et_pb_divider _builder_version=”4.9.0″ _module_preset=”default” color=”#4895EF” divider_weight=”2px” hover_enabled=”0″ sticky_enabled=”0″ min_height=”45px”][/et_pb_divider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” column_structure=”1_3,1_3,1_3″ admin_label=”Example” collapsed=”on”][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”1_3″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]Lora Poppins[/et_pb_text][/et_pb_column][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”1_3″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]Josefin Sans Montserrat[/et_pb_text][/et_pb_column][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”1_3″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]Merriweather Open Sans[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” admin_label=”Heirarchy” collapsed=”on” custom_padding=”0px|0px|35px|0px|false|false”][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”4_4″][et_pb_divider _builder_version=”4.9.0″ _module_preset=”default” color=”#4895EF” divider_weight=”2px” hover_enabled=”0″ sticky_enabled=”0″][/et_pb_divider][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″ header_line_height=”1em”]

Heirarchy

Consider hierarchy when it comes to the size of your text as well as the amount of paragraph spacing before and after.

See Harford Designs’ blog post typography settings below.

[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″ header_line_height=”1em”]

Heading 1 – Used once on your webpage. It’s the topmost header.

Heading 2 – Secondary header that is assigned to all the sections within your page.

Heading 3 – Tertiary header that may be assigned to a product or service title.

Heading 4 – At this point, you’ve really gone deep into nesting your text.

Heading 5 – I usually leave this for footer titles
Heading 6 – Another header designated for my footers.

Paragraph Text – You know, the primary text you read.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” admin_label=”Font Size” collapsed=”on”][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”4_4″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]

Font Size

Font size on the web will vary significantly from print. While font size 10pt is legible in your Microsoft Word document, 10pt (and even 10px) will make your readers strain. Keep in mind that the web is measured in pixels and there will be a difference in size between points and pixels. 

[/et_pb_text][et_pb_divider _builder_version=”4.9.0″ _module_preset=”default” color=”#F8D807″ divider_weight=”2px” hover_enabled=”0″ sticky_enabled=”0″][/et_pb_divider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” column_structure=”1_3,1_3,1_3″ admin_label=”FS example” collapsed=”on”][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”1_3″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” text_font=”Times New Roman|500|||||||” text_font_size=”10pt” hover_enabled=”0″ sticky_enabled=”0″ text_line_height=”1em” text_text_color=”#2B2D42″]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”58febd9f-9b4b-48fc-a2b6-ec1806610bc4″ hover_enabled=”0″ sticky_enabled=”0″ text_orientation=”left”]

Times New Roman – 10pt

[/et_pb_text][/et_pb_column][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”1_3″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” text_font=”Arial|500|||||||” text_font_size=”16px” hover_enabled=”0″ sticky_enabled=”0″ text_line_height=”1em” text_text_color=”#2B2D42″]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”58febd9f-9b4b-48fc-a2b6-ec1806610bc4″ hover_enabled=”0″ sticky_enabled=”0″ text_orientation=”left”]

Arial – 16px

[/et_pb_text][/et_pb_column][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”1_3″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” text_font=”Montserrat|500|||||||” hover_enabled=”0″ sticky_enabled=”0″ text_line_height=”1em” text_text_color=”#2B2D42″]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”58febd9f-9b4b-48fc-a2b6-ec1806610bc4″ hover_enabled=”0″ sticky_enabled=”0″ text_orientation=”left”]

Montserrat- 18px

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” admin_label=”Line-Height” collapsed=”on”][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”4_4″][et_pb_divider _builder_version=”4.9.0″ _module_preset=”default” color=”#F8D807″ divider_weight=”2px” hover_enabled=”0″ sticky_enabled=”0″][/et_pb_divider][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]

Line-Height

Line-height, or line spacing, is the space between lines within a paragraph. Not to be confused with paragraph spacing which measures the spacing before and after a paragraph, line-height can significantly affect the user experience in terms of legibility.

Paragraphs with smaller line-height are more compact and may be more difficult for a reader to follow; too much and you run into the same issue.

The perfect line-height depends on the design and size of the font itself. There is no magic number that works for all text. 

[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]

Consider the following examples:

[/et_pb_text][et_pb_divider _builder_version=”4.9.0″ _module_preset=”default” color=”#B5179E” divider_weight=”2px” hover_enabled=”0″ sticky_enabled=”0″][/et_pb_divider][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” text_font=”Montserrat|500|||||||” text_font_size=”29px” hover_enabled=”0″ sticky_enabled=”0″ text_line_height=”1em” text_text_color=”#2B2D42″]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”58febd9f-9b4b-48fc-a2b6-ec1806610bc4″ hover_enabled=”0″ sticky_enabled=”0″ text_orientation=”left”]100% or 1 em line-height[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” text_font=”Montserrat|500|||||||” text_font_size=”29px” hover_enabled=”0″ sticky_enabled=”0″ text_line_height=”1.5em”]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”58febd9f-9b4b-48fc-a2b6-ec1806610bc4″ hover_enabled=”0″ sticky_enabled=”0″ text_orientation=”left”]150% or 1.5 em line-height[/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” text_font=”Montserrat|500|||||||” text_font_size=”29px” hover_enabled=”0″ sticky_enabled=”0″ text_line_height=”2em”]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [/et_pb_text][et_pb_text _builder_version=”4.9.0″ _module_preset=”58febd9f-9b4b-48fc-a2b6-ec1806610bc4″ hover_enabled=”0″ sticky_enabled=”0″ text_orientation=”left”]200% or 2 em line-height[/et_pb_text][et_pb_divider _builder_version=”4.9.0″ _module_preset=”default” color=”#B5179E” divider_weight=”2px” hover_enabled=”0″ sticky_enabled=”0″ min_height=”50px”][/et_pb_divider][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.9.0″ _module_preset=”default” collapsed=”on”][et_pb_column _builder_version=”4.9.0″ _module_preset=”default” type=”4_4″][et_pb_text _builder_version=”4.9.0″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]

Paragraph Spacing

Another common afterthought that requires attention. This may be a feature you are familiar with when working within Microsoft Suite.

As a general rule of thumb, headers will be the most likely to require top-spacing. In development or “code”-speak, this can be done using either margin or padding property. It ultimately comes down to preference.

For paragraphs, the bottom spacing on the Harford Designs blog is 15px.

 

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
Search by Interest

Articles