1 Star 0 Fork 3

fnet / IBM-Type

forked from Gitee 极速下载 / IBM-Type 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

IBM Type

With our new corporate typeface, IBM Plex, comes a new set of guidance and best practices. IBM typography is international and modern to reflect our brand and our design principles.


Warning: IBM Type is still in development and being carefully implemented in real cases where we can look for any difficulties. Look out for a stable v1.0.0 release in the near future.


IBM Type Checker (work-in-progress)

Check that any webpage follows the IBM Type with our Chrome and Firefox extension. This is helpful to developers as they code and designers as they review work.

Examples

We want to show off many examples of what IBM Type is capable of. Check out the examples below and learn at the bottom of this document how to provide a new example:

Design

Use this walkthrough to learn the foundational aspects of designing with IBM Type. Recommended for all first-time users.

IBM Type Sketch File

Use these artboards in your Sketch files to accomplish a design at each breakpoint your developer will be working with. Right click and select Save link as to save this Sketch file.

Code

The IBM Type code provides rendering and kerning that best reflects IBM Plex. The editorial and product style sets also take care of:

  • Size
  • Line height
  • Line length
  • Bottom margin
  • Weights

How to Use

To install, run npm install @ibm/type

If you want to use the compiled css, reference the file in the dist folder:

<link rel="stylesheet" type="text/css" href="node_modules/@ibm/type/dist/css/ibm-type.min.css">

If you want to use the sass partials, import the files in the src folder:

@import 'node_modules/@ibm/type/src/_core.scss';
@import 'node_modules/@ibm/type/src/_styles.scss';
@import 'node_modules/@ibm/type/src/_width.scss';

Check out the Performance section below for a description of each partial.

Developer Tutorial

Use this walkthrough to learn the foundational aspects of coding with IBM Type. Recommended for all first-time users.

Classname Reference

Classname Purpose
.ibm Container div to apply IBM Plex Sans to all type by default
.ibm-type-mono Switch a text node and children to IBM Plex Mono
.ibm-type-serif Switch a text node and children to IBM Plex Serif
.ibm-type-light Use the light weight of either IBM Plex Sans or IBM Plex Serif
.ibm-type-semibold Use the semibold weight of either IBM Plex Sans or IBM Plex Serif
.ibm-type-italic Use the italic style of either IBM Plex Sans or IBM Plex Serif
.ibm-type-[a, b, c, d, f, i, j, k] Use the sizing and weight of a style prescribed for editorial experiences
.ibm-type-[a, b, c, d, e, g, h] Use the sizing and weight of a style prescribed for product experiences

Performance

There are two distinct capabilities of this codebase and you are welcome to only import what you need:

  1. Core - All capabilities not listed below.
  2. Styles - Provides a map of the raw type scale and then a map and mixins of the type sets.
Includes core font references? Includes scale and styles? Includes line lengths? File Size Minified Gzipped
IBM Type Yes Yes Yes 39kb 34kb 2.6kb
_styles.scss Yes No No 15kb 11kb 1.3kb
_core.scss Yes No No 24kb 23kb 1.3kb

Finally, each font file (~40kb) has been split into four separate files (~10kb). If your webpage does not use any unicodes from one of the four split files, the user’s device will not have to download the split file.

# IBM Plex Typeface Copyright © 2017 IBM Corp. with Reserved Font Name "Plex" This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL ----------------------------------------------------------- SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ----------------------------------------------------------- PREAMBLE The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. DEFINITIONS "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. "Reserved Font Name" refers to any names specified as such after the copyright statement(s). "Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. PERMISSION & CONDITIONS Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: 1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. 2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. 3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. 5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. TERMINATION This license becomes null and void if any of the above conditions are not met. DISCLAIMER THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. # IBM Type Code Copyright 2017 IBM Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

随着 IBM 新的字体 IBM Plex 的出现了,带来了一套新的指导和最佳实践方案 展开 收起
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/fnet/IBM-Type.git
git@gitee.com:fnet/IBM-Type.git
fnet
IBM-Type
IBM-Type
master

搜索帮助