Perhaps the website you’ve been working hard on for your small business has just gone live, and you’re looking at it from different devices and computers. While you notice the obvious layout differences between a computer and a mobile phone, the contrast between two different computers has you scratching your head. The font you painstakingly selected looks different from one computer to the next.
The reason a font could look different on different computers is due to several variables, from installation and version of the font to system overrides. The great news is that there is a fix for any scenario that will have your look streamlined across devices in no time.
Branding in today’s market is so important, and it can be the element that keeps your business fresh in a client’s mind. It could be something as simple as the font you selected for your business name, but if that font looks different on a different computer, it could affect your unique branding. Let’s look at why this issue could occur and how to fix it.
When creating your website, newsletter, or digital flyer, you are purposeful with all your design selections. Marketing will tell you that every element of your business design matters and sends a specific message to your target audience. So, selecting a font isn’t solely about aesthetics. It’s a strategic selection intended to entice the demographic you want for your small business.
Finding out that the font you selected to represent your business or project may appear differently depending on what computer it’s being viewed on is important to know. The variance may not be noticeable enough to affect your branding, but at the very least, you can be equipped with the knowledge of why it happened and if there is an option to fix it.
If you’re looking for interesting fonts or templates for your web design, check out Placeit.net for your design needs.
1. The Screen Resolution
Believe it or not, something as simple as the screen resolution could affect the look of the font on a computer. The most common monitor screen resolution is 1920X1080 pixels but can go as high as 2560X1440 pixels and as low as 800X600 pixels. Text on a higher resolution monitor will appear smaller due to the amount of information that can appear on the display at one time.
Older computers will have less information displayed at once and may require more scrolling to get through a single webpage; therefore, the text will appear larger. There is a way to make the font size responsive, so it adjusts depending on the display resolution. You can use CSS to set the text with a percent that dictates the “Viewport Width.” The viewport is the browser window, so you can set the font to 1% of the viewport width.
2. The Operating System
Most font formats are cross-platform, but there are cases when a font will appear different from a Mac to a PC. There are several popular font formats used commonly: PostScript (.SUIT, .PFB, .PFM), TrueType (.TIFF), and OpenType (.OTF). Of these three font formats, only OpenType font format has the necessary components to make it compatible with Mac and Windows.
Outside of OpenType, both Mac and Windows will require conversion using a program like CrossFont. In some cases, like with Mac OS 9, the system will not install most Windows fonts. Cross-platform fonts should be considered when selecting fonts for your website or any kind of digital marketing.
3. Font Not Installed
Not all browsers understand the same font format, so you have to specify the different font formats for your font to display correctly. Luckily, if you purchased a licensed font, you should receive the web version in a zip file that will include the CSS and font files for the different font formats. This method will still produce slight variations between browsers or operating systems.
4. Two Fonts With the Same Name
While less likely to be the scenario, it’s worth mentioning, just in case. If you’re looking at your website on two different computers and the font is drastically different on each computer, it may be due to a previously installed font that has the same name. In that case, your computer system will override the old font.
Open up a word document and make a side-by-side comparison of the font files. If the fonts are different, even though they are titled the same, you’ll need to delete or rename the font file you aren’t using for your website and reinstall the correct file.
5. Programming Language Error
If you hired a web developer or took a stab at web development yourself, it’s always a safe bet to check the programming language if you find any errors on your site. It’s possible a mistake was made during coding; even experienced programmers can encounter this during a job. It could be as simple as a missing closing tag or a small part of code that was left out.
In situations like this, one browser may catch the mistake and automatically correct it, while others may not and display a default font type instead. It may take some investigation, but once you find the error and correct it, you should see the same font type across browsers and operating systems.
It’s perfectly normal to have a slight variance in how your font looks across devices. Now you’re aware of the reasons why this might occur. It may not be something that adversely affects your brand. Therefore, it would not require tweaking, but if it’s not something you can live with, you have a few options to adjust it to what you want.