Xbox One Font and Brand Rules
Designing for Xbox One; Fonts, Layout and Brand
Welcome to my guide to designing images for Xbox One, this advice might be perfect for fan sites, online banners, adverts and even print. We will cover a range of topics including which fonts to use for Xbox One sites, how to lay out your artwork so it complies to Microsoft's guidelines and how your should arrange your content including images of the hardware. Note: This is just our take on things, before you start work please consult an official source of advice. Thanks for reading.
What we don't cover? - A quick summary of what we don't offer.
- Xbox One UK News
We are not here to offer you news or advice about the Xbox One, there are plenty of sites and blogs out there that will help you do this. A lot of these blogs are new and upcoming. So here's one from Google.
- Buy Xbox One UK
A great site with some useful info about the design side and font design for the new Xbox One Console
Xbox One Font
Make use of the free official font for best results
The official Xbox One font is Segoe Pro. The font is included for free with Windows 7 and Windows 8, however if you don't have these systems installed it is also available as a downloadable font from the Microsoft website, which you can find at https://www.microsoft.com/typography/fonts/family.... The font is available in different styles, officially you should use light or regular. You should never purchase this font, it is available freely and if you have been charged for this font you should report this to Microsoft.
So, now you've downloaded your font it is time to installed it,
How to install the Xbox One font:
1. Extract your font for the zip file.
2. Copy the font file into your system font folder.
3. Restart the application you are using in order to see the new fonts.
When you use the font you should align your text as justified or centered. It should not be aligned to the left or right. We will discuss coloring later, but you must ensure that the text is clear and easy to read so keep an eye on your type sizing.
Making use of capitalized or uppercase lettering should be kept to a minimum. It is acceptable to use them in small volume for headers, and titles, but ideally you should make sure you keep them rare, the rest of your text on your banner or advert should use sentence case.
Xbox One Color Scheme - Use official colors to give your blog or news site an authentic look!
Microsoft have set out a full color scheme for use without your Xbox One design work. using the image above you can see the hex codes and basic usage for these colors. If your following them exactly then you will want to color your text with a simple white. This makes your text clear and easily readable.
The base background consists of three main colors:
Green - #107c10 - A mid green which can be used either as 100% fill for example on simple banners featuring white text and hardware imagary or can be used as a 50% fill when using screenshots of media, as shown in the image above. It is also used for the 2.5% header when using media.
Black - #000 - A standard black, contrasts brilliantly with the green, can be used in banners which feature media as a background fill.
Grey - #3A3A3A - I find this dark grey very useful for text on websites and blogs like fan pages.
The image above is "quoted" from the official Xbox One guidelines which we recommend you read.
Layout and Logo - Make good use of the logo, don't adapt it.
Whenever you use a company logo in design you should be diligent to respect the owners requirements for use. Failure to do so could leave you without any media to share with the public. There nothing surprising about this, their logo is their image and they might not be too pleased if you decide to deface it.
Therefore there are some basic rules to take note of:
Microsoft provide the Xbox One Logo in two forms, stacked and flat. These are available through the Microsoft Xbox press center, under media assets. They don't need to be edited, you can find PNG versions for occasions where you require transparency, for example if your backing it with the #107c10 green. Alternatively they also provide white back .jpg versions similar to the one used at the top of this page. The downloaded logos should not be messed with, don't tweak them too much they work wonderfully as they are.
When you use the Xbox One Logo on your content it should occupy at least 20% width, this ensures that the logo has a promienet position within your artwork. If you also include the Microsoft logo you should do this at no more than 50% of the height of the Xbox One logo.
Layout is also very important. If your're including a screenshot within your banner you also need to split the design into three main design sections. The first is a basic #107C10 header covering a height of 2.5% of the whole image, then the screenshot will then fill the next 47.5%, the last 50% of your banner or image needs to be #107C10 fill.
The media section should not contain text, if you are using official screenshot media you should leave it alone, don't edit it or add additional information. If you wish to add text, and you should, you need to add this to the bottom 50% of your image, on the green background. You should always use the office font Segeo Pro and the text should be light or regular weight. I always use white for the text and it works really well.
Buy Xbox One - Grab Your Xbox One Today!
Call of Duty Ghosts anyone?
Grab an extra pad to enjoy the multilayer action!
Chat to your mates whilst you play!
Just so you know...
We are NOT an official source of Xbox One design information, this article is our interpretation of the Xbox One guidelines issued by Microsoft after their Xbox One launch event prior to E3. This guide should be seen as just that a guide pointing you in the right direction. We have done our best to provide accurate and up to date information, however this could be subject to change at any time. Before you commence official work we suggest you consult Microsoft for further information and guidance.
We hope you enjoyed the article.