Matrix homepage recommendation
Matrix is a minority writing community. We advocate sharing real product experiences, practical experiences and thoughts. We will occasionally select Matrix’s highest-quality articles to showcase the most authentic experiences and opinions from users.
The article represents the author’s personal views, and the minority party only slightly modified the title and formatting.
Every once in a while, I visit Apple’s official website. As the rule maker of human-computer interaction, Apple’s web page implementation has too much for us to learn and learn from. In this article, I sorted out some of the layout details (and discovered some new details while reading the source code😂) to share with you.
Customized web fonts
Apple launched the SF series of Western fonts (usually using SF Pro) and the Pingfang series of Chinese fonts in 2015. However, when you open the official Simplified Chinese website of Apple, you can find that the first one in the font stack is a product called「SF Pro SC」font.
.typography-label:lang(zh-CN) {
font-family: SF Pro SC,SF Pro Display,SF Pro Icons,PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif
}SF Pro SC is a web font that is loaded when entering a web page. That’s very strange: since it is an Apple font, it is not built into iOS / macOS; there is no official public information about this font.
In fact, this font is a non-public font customized by Apple for the official Simplified Chinese Web website. After downloading and opening it, you can find that it only contains Chinese characters and some punctuation marks. The font is exactly the same as PingFang SC, but some minor adjustments have been made. According to the settings of the font stack, Spanish will fall back to SF Pro Display. Therefore, under normal network conditions, the actual fonts used are usually: SF Pro SC for Chinese characters and full-width punctuation, and SF Pro Display for Spanish.
SF Pro SC can be regarded as “a simplified Chinese font specially optimized for mixing with SF Pro”. The following is a comparison of the display effects of the three font stacks:
It can be seen that compared with PingFang SC, this SF Pro SC has two main adjustments:Chinese fonts are smaller and full-width punctuation character widths are narrower.Why do we need to make this adjustment?
Chinese fonts are smaller
If you carefully observe the rendering effects of SF Pro Display and PingFang SC in the second row of the screenshot above, you will feel that Chinese characters are visually larger than English. Especially on the left side of “Mac”, the height of “Buy” is significantly higher than the height of the M letter. This is because Chinese and Western fonts use space in different ways. When designed separately, alignment is not guaranteed. If they are directly mixed, the Western fonts will visually look smaller.
Therefore, SF Pro SC reduces the Chinese character font size based on PingFang SC and performs visual correction for the mixed arrangement of Chinese and English.
My website skywt.cn is usedSiyuan Songti(Source Han Serif, alias Noto Serif SC), in fact, there is a similar treatment. The Spanish part contained in this font is derived from the Source Serif series, but the Western characters are adjusted to be larger, making the visual appearance more consistent when mixed with Chinese characters. You can see the comparison of the Chinese and English mixed copywriting “How about changing to iPhone” in the picture below, using 64px as the benchmark:
- The first line all uses Source Han Serif, which is the most harmonious mix of Chinese and English.
- If you change the English part to Source Serif 4, that is, the style of the third line, you will find that the English part looks significantly smaller than the Chinese one. Note that the font size setting has not changed at this time, it is still 64px.
- If you want to correct this visual deviation, you need to increase the size of the word “iPhone” to about 77px, which is the style of the second row. At this time, the word “iPhone” seems to be emphasized again. Source Serif 4 fonts provide infinite weight and optical size adjustment, and more complex adjustments are required to achieve an effect similar to the first line of Source Han Serif.
In summary, in order to make the mixing of Chinese and English more harmonious, SF Pro SC’s approach is to make Chinese characters smaller, while Source Han Serif makes Western characters larger.
Full-width punctuation character width is narrower
All punctuation marks on the Apple Simplified Chinese official website appear to be half-width width, but looking at the source code, you will find that the website does not use real half-width punctuation marks, but adjusts the full-width punctuation width at the font level.The full-width punctuation mark width of SF Pro SC is 0.5 to 0.6 times the font width.
I think the main purpose of this design is:Ensure a slogan reading experience that includes punctuation.Apple uses a lot of slogans that contain punctuation, such as the above “Buying a Mac at Apple, there are many benefits.” If full-width full-width punctuation marks are used, due to the larger font size of the title, the visual gap between “Buy a Mac” and “There are many benefits” will be too large, resulting in a sense of incoherence; for the sake of visual uniformity and character standards, this presentation has been adjusted directly at the font level.
For more exploration of the SF Pro SC font, you can refer to this article: What is the font SF Pro SC?
line feed control
avoid going it alone
The so-called orphan line means that the last word at the end of a paragraph happens to become a new line, which will make the paragraph look visually unbalanced. In traditional magazine layout standards, it is mentioned to avoid going it alone. The way Apple’s website handles it is: the last word of the paragraph is protected by a nowrap span package.
For example, this copy from the environmental responsibility page:
We’re closer than ever to Apple 2030, our ambitious, science-based blueprint to achieve a net-zero carbon footprint globally. We are committed to reducing our greenhouse gas emissions by 75% from a 2015 baseline and offsetting the remaining emissions by prioritizing nature-based solutions that meet strict international standards.
The HTML is as follows, pay attention to the “carbon emissions.” at the end for protection. This will prevent the last line from being a lonely line with only “put.”
我们已空前接近 Apple 2030 目标，这是我们基于科学制定的宏伟蓝图，
立志在全球实现碳足迹净零排放。以 2015 年为基准，
我们致力于将自己的温室气体排放量减少 75%
，再优先采用以自然为本且符合严格国际标准的解决方案，来抵消剩余的
碳排放。
Protect words that are interrupted by line breaks
Let’s take a look at this copy from the education page:
To create a more just and equal world, education is vital. To this end, we work with partners to connect with students in more than 100 countries and regions, support educators, create a variety of off-campus learning opportunities, and promote racial equality and justice. When the door of education can be opened wider, everyone will have more ways to realize their potential.
The HTML of this paragraph is as follows. Except for the words “own potential” at the end, which are the rules to avoid going it alone as mentioned above, the other words are “partners.” “education.” “creation.” “everyone” and “play”. Do you know why you need nowrap protection?
要创造一个更加公正平等的世界
，
教育至关重要。为此，我们携手众多合作
伙伴，
与 100 多个国家及地区的求学者建立联系，为
教育
工作者们提供支持
，
创造
各种校外学习机会，并推动种族平等与公正。当教育的大门能开得更大
，
每个人
就能有更多途径来
发挥
自身潜能
。
First, a reminder: the text alignment of this text is center, and the container has three fixed widths: large 860px, medium 600px, and small 330px. The original web page is here, you can try exploring and see if you can find the answer: www.apple.com.cn/education-initiative/.
Reveal the answer:If we copy this piece of plain text, create a new pure Text Node in the original p element, and compare the performance of the three container widths, we will find:
- large size: The words “partner” and “create” have been wrapped;
- medium size: “Education” and “Performance” have been wrapped;
- small size: “Partners”, “Create” and “Everyone” are line wrapped. (After “partner” is protected, “create” is arranged in a position that does not wrap, so there is no need to protect it)
So when Apple made this web page, it took into account the layout effect of the paragraphs after they are actually rendered under any container width, and accurately protected the words interrupted by automatic line breaks at the end of each line!
Responsive line wrapping control
In the HTML above, we also see something like
For example, the title at the bottom of the MacBook Pro “If you want to upgrade, the time is right.”:
想升级，
时机正正好
。
Therefore, on a medium or large screen, it will be a complete line, and on a small screen, it will be displayed as two lines:
Want to upgrade?
The timing is just right.
Use non-breaking spaces in English product names
This is a practice inherited from Apple.com (English official website). All product names with spaces like iPhone 18 Pro Max appear in the source code as iPhone 18 Pro Maxto prevent the complete product name from being interrupted by automatic line breaks.
iPhone Duo 来了，首款可折叠 iPhone 全新揭幕。上手一展开，就是迄今最薄 iPhone，
历来最大 iPhone 显示屏直入眼帘，比 iPhone 18 Pro Max 足足大了 50%
；另一面的外屏，显示面积高达 iPhone 18 Pro 的 90% 以上。iOS 也全面重塑，联手带来各种新摆法、新角度，灵动体验花样百出。
一切
精彩，都纳入坚固精巧的机身中，轻松装进你口袋。这个 iPhone，不同于任何 iPhone。
Title centering visual correction
Chinese full-width punctuation marks, the main body is in the lower left corner, and the other parts are blank. Even though the full-width punctuation marks of Apple’s SF Pro SC font are narrower, compared with Chinese characters, the visual center of the punctuation marks is still concentrated at the bottom or lower left corner.
For titles with punctuation marks at the end, when displayed in the center, this will result in a visual shift to the left, as shown below. The larger the font size of the title, the more obvious this deviation will be, especially if there is a reference object such as a centered icon above it.
This type of title needs to be moved to the right about 0.5em to be visually centered, as shown below:
I found at least three ways to achieve this correction on Apple’s official website. The basic idea is: let the final punctuation not occupy the calculated width, or artificially set the entire title to move to the right.
- Wrap the punctuation mark at the end of the line with a span with position absolute.For example, the copy at the top of the Apple Pay page reads “Pay, powered by Apple.” The period at the end. It is worth noting that in the case of small, there will be a new line after “pay,”, so the comma here is
，Package, only small size will be corrected. - Add an extra 0.5em of padding to the left of the entire title.The title of the privacy page is “Strive to keep privacy and security, which is very Apple.” Perhaps because the copy here is protected by a password placeholder and slowly revealed with scrolling, the position attribute of the punctuation at the end of the line cannot be customized, so this solution was adopted.
- Add an invisible span with margin-right of -0.6rem after the punctuation point.This method is used on the iPhone Duo page. For example, in the title “New face joins iPhone, everyone is impressed.” Both punctuations are added after
。
Space between Chinese and Spanish characters
The spacing between Chinese and Spanish characters is a common problem. Generally speaking, when Chinese and English are mixed, a space needs to be added between Chinese and English. The same goes for mixing Chinese and Arabic numerals.
W3C “Chinese Typesetting Requirements” 6.3.3 Horizontal mixed Chinese and Spanish configuration states:
In principle, no more than a quarter of a Chinese character’s width should be used between Chinese characters and Western letters and numbers.However, when Chinese characters and numbers appear at the beginning or end of a line, there is no need to add blanks.
Most professional typesetting software, such as Microsoft Word, will automatically add this space. The text formatting engine built into Apple’s operating system will also automatically add spacing (you can try it in Apple Notes). However, the Web platform has not yet fully popularized the method of adding spaces. It was not until the past two years that mainstream browsers became popular text-autospace: normal。
The method used by Apple’s official website is to add spaces. Apple should use this as a copywriting standard internally. All copywriting that involves a mix of Chinese and English has added extra spaces. (But occasionally you can find that some temporarily launched pages are missing one or two spaces. This shows that they are manually processed 😂)
Since I noticed this space problem, I feel very uncomfortable when I see Chinese and English crowded together on ordinary web pages. If the same applies to you, you can try installing pangu.js in the browser.
Sinologists call this blank character “Pangu’s White” because it splits the chaos between full-width characters and half-width characters. Another study shows that people who don’t like to add spaces between Chinese and English when typing have a hard time in love. Seventy percent of them will marry someone they don’t love at the age of 34, while the other thirty percent will only leave their inheritance to their cats. After all, both love and writing require timely blank space.
Copywriting localization
The localization of copywriting itself is not a technical issue, but there is one case in particular that I want to mention here. I feel that Apple has gone to a perverted level in this regard.
The iPhone 18 Pro, Apple Watch and other products newly released in September this year will be released on September 18th. In order to avoid politically sensitive risks,All dates on Apple’s official website in mainland China have been specially processed, changing “on sale on September 18th” to “on sale on the 18th of this month.”Other ordinary dates are not processed. It is said that the promotional materials sent to dealers have also been dealt with accordingly. You can view this September 16 web archive.
Summary: Professional attitude and brand value
Apart from Apple, how many brand websites in the world can achieve this level of layout and localization details?The answer is 0.Apple’s unique brand value is condensed from these details.
From the product details, you can also see the people behind the products.professional attitude. When I use some mediocre products, I often feel that the staff are too careless, too perfunctory, and even too unprofessional. For me, I am willing to pay a certain premium to buy more expensive products, often not because of the high differential value of the product itself, but because: I hope to buy “A person with a serious professional attitude” products.
> Follow the minority Xiaohongshu and experience the wonderful digital life🍃
> Practical and easy-to-use genuine software, minority group presents it to you🚀
