Tuesday, November 20, 2012

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:"Segoe UI","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)

4 comments:

Richard Burdes said...

Hi Erik,
Have you noticed any issues with teh way the fonts render in IE8? using F12 and displaying in IE8 looks ok, but users with just IE8 seem to be seeing these fonts as more blocky than they should be.

I'm just wondering if anyone else has seen this - I'm assuming its a web font vs IE8 issue?
cheers
Rich

Paul Thomas said...

Hi,
Just to let you know that I've just started using SP2013 and I have to use IE8 and the Segoe UI Semilight fonts look terrible. Fine in Chrome and Firefox.
Paul

Amber Salm said...

This is incredible. I didn't find this information on any other blog. I must say that you have provided a very useful info about the base fonts and sizes.
electronic signature for sharepoint

Sqiar BI said...

It's actually a cool and useful piece of info. I am glad that you simply shared this useful info with us. Please keep us up to date like this. Thanks for sharing, You can also check out this http://www.sqiar.com/services