SharePoint 2013 Base Fonts and Sizes

After reviewing the main CSS files that make up the base look
and feel for the SharePoint 2013 look and feel. The number one font
is“Segoe UI” which is applied to the
global BODY element.

One thing to note that for having over 13,660 lines of CSS
within the corev15.css to only have 46 font-family references and
30 of them being the primary ones that shows the consistency and
reduction in the amount of CSS used for this new version of
SharePoint.

Example:
font-family:”SegoeUI“,”Segoe”,Tahoma, Helvetica, Arial, sans-serif;

corev15.css: Primary CSS file referenced

  1. font-family:”Segoe UI“; (Used – 19 times)
  2. font-family:”Segoe UI Semilight” (Used – 7
    times)
  3. font-family:”Segoe UI Light” (Used – 3
    times)
  4. font-family:”Segoe” (Used as secondary – 11
    times)
  5. font-family:Tahoma (Used as secondary – 6
    times)
  6. font-family:Helvetica (Used as third – 21
    times)
  7. font-family:Arial  (Used as fourth – 27
    times)

The base font size that is used on the body is
13px
. This is important because almost all other font
sizes used are now “EM” based versus “PT”. The EM font size
basically uses that 13px as its base “1.0” and anything above 1 is
bigger than 13px and anything below 1 such as .8 is smaller.

In pervious versions of SharePoint such as 2010 it was primarily
PT based which is not best practics in web based sites. Below are
the most common font sizes used. To learn more about EM, PX and PT
visit this site:

corev15.css: ~88 font-size references (45 EM,
16PX, and 10 PT)

  1. font-size:1em;(Used – 12 times)
  2. font-size:.85em; (Used – 8 times)
  3. font-size:8pt; (Used – 7 times)
  4. font-size:1.46em; (Used – 6 times)
  5. font-size:1.3em; (Used – 3 times)
  6. font-size:.9em; (Used – 3 times)

This article was originally posted by Erik Swenson on the scribble blog.

 

Share this on...

Rate this Post:

Share: