ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Xbox One Font and Brand Rules

Updated on October 16, 2013

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.

Xbox One Font Segoe
Xbox One Font Segoe

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!

Xbox One Color Scheme
Xbox One Color Scheme

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.

Xbox One Guideline Image
Xbox One Guideline Image

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 - Xbox One
Call of Duty: Ghosts - Xbox One

Call of Duty Ghosts anyone?

 
Xbox One Wireless Controller (Without 3.5 millimeter headset jack)
Xbox One Wireless Controller (Without 3.5 millimeter headset jack)

Grab an extra pad to enjoy the multilayer action!

 

Disclaimer

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.

Xbox One Branding - Let us know what you think!

Do you like the Xbox One branding?

See results

Xbox One Brand Images - Here we are showcasing some of the official artwork for the Xbox One, we also included the Day One box art, just because it looks so goo

Click thumbnail to view full-size
The official Xbox One Logo, this example is just 200px wide but a full sized version is available from Microsoft.Official use of the hardware on the green fill backgroundThis is the Day One Box Art.
The official Xbox One Logo, this example is just 200px wide but a full sized version is available from Microsoft.
The official Xbox One Logo, this example is just 200px wide but a full sized version is available from Microsoft.
Official use of the hardware on the green fill background
Official use of the hardware on the green fill background
This is the Day One Box Art.
This is the Day One Box Art.

Please leave a comment: - If there is anything you want to share with us please let us know!

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)