├── LICENSE ├── README.md ├── custom.css └── doc ├── custom.png └── ipython3default.png /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Jiahao Chen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Typographically improved Jupyter notebooks 2 | 3 | This custom CSS file contains several typographic adjustments (inspired by 4 | [Butterick's Practical Typography](http://practicaltypography.com)) to improve 5 | the legibility of [Jupyter notebooks](https://jupyter.org). 6 | 7 | ## Installation 8 | 9 | 1. For best results, install the following fonts on your system: 10 | 11 | - [Charis SIL](http://software.sil.org/charis/download/) 12 | - [Fira Sans](https://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/) 13 | - [Source Code Pro](http://adobe-fonts.github.io/source-code-pro/) 14 | 15 | 2. Copy `custom.css` to the `custom` subdirectory of a Jupyter profile, e.g. 16 | `~/.jupyter/custom`. 17 | 18 | 3. Refresh any open notebook or open an new notebook to see the changes. 19 | 20 | ## Jupyter defaults (from IPython 3.0) 21 | 22 | ![IPython 3.0 defaults](https://raw.githubusercontent.com/jiahao/jupyter-stylesheet/master/doc/ipython3default.png) 23 | 24 | 25 | ## With this stylesheet 26 | 27 | ![Customized look](https://raw.githubusercontent.com/jiahao/jupyter-stylesheet/master/doc/custom.png) 28 | 29 | 30 | -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- 1 | /* A typographically tinkered Jupyter notebook stylesheet 2 | * 3 | * Copyright © 2013--2015 Jiahao Chen 4 | * 5 | * MIT License 6 | * 7 | * To use, place in 8 | * 9 | * ~/.jupyter/custom/custom.css 10 | * 11 | * and refresh the page. 12 | * 13 | * The Jupyter server does not need to be restarted. 14 | * 15 | * Based on suggestions from practicaltypography.com 16 | */ 17 | 18 | .rendered_html ol { 19 | list-style:decimal; 20 | margin: 1em 2em; 21 | } 22 | 23 | .autosave_status, .checkpoint_status { 24 | color: #bbbbbb; 25 | font-family: "Fira Sans", sans-serif; 26 | } 27 | 28 | .filename { 29 | font-family: "Charis SIL", "Hoefler Text", Garamond, Palatino, serif; 30 | font-variant: small-caps; 31 | letter-spacing: 0.08em; 32 | -webkit-font-smoothing: antialiased; 33 | -moz-osx-font-smoothing: grayscale; 34 | text-rendering: optimizeLegibility; 35 | } 36 | 37 | .text_cell, .text_cell_render { 38 | font-family: "Charis SIL", "Hoefler Text", Garamond, Palatino, serif; 39 | font-size: 18px; 40 | line-height:1.4em; 41 | padding-left:3em; 42 | padding-right:3em; 43 | max-width: 36em; 44 | -webkit-font-smoothing: antialiased; 45 | -moz-osx-font-smoothing: grayscale; 46 | text-rendering: optimizeLegibility; 47 | font-variant-ligatures: contextual no-historical-ligatures common-ligatures; 48 | } 49 | 50 | blockquote p { 51 | font-size: 17px; 52 | line-height:1.2em; 53 | font-family: "Charis SIL", "Hoefler Text", Garamond, Palatino, serif; 54 | -webkit-font-smoothing: antialiased; 55 | -moz-osx-font-smoothing: grayscale; 56 | text-rendering: optimizeLegibility; 57 | font-variant-ligatures: contextual no-historical-ligatures common-ligatures; 58 | } 59 | 60 | .code_cell { /* Area containing both code and output */ 61 | font-family: "Source Code Pro", "Droid Sans Mono", Consolas, "Ubuntu Mono", "Liberation Mono", monospace; 62 | background-color:#F1F0FF; /* light blue */ 63 | border-radius: 0.8em; 64 | padding: 1em; 65 | } 66 | 67 | code, pre, .CodeMirror { 68 | font-family: "Source Code Pro", "Droid Sans Mono", Consolas, "Ubuntu Mono", "Liberation Mono", monospace; 69 | line-height:1.25em; 70 | font-size: 16px; 71 | } 72 | 73 | .slide-header, p.slide-header 74 | { 75 | color: #498AF3; 76 | font-size: 200%; 77 | font-weight:bold; 78 | margin: 0px 20px 10px; 79 | page-break-before: always; 80 | text-align: center; 81 | } 82 | 83 | div.prompt { 84 | font-family: "Source Code Pro", "Droid Sans Mono", Consolas, "Ubuntu Mono", "Liberation Mono", monospace; 85 | font-size: 11px; 86 | } 87 | 88 | div.output_area pre { 89 | font-family: "Source Code Pro", "Droid Sans Mono", Consolas, "Ubuntu Mono", "Liberation Mono", monospace; 90 | line-height:1.25em; 91 | font-size: 16px; 92 | background-color: #F4F4F4; 93 | } 94 | 95 | div.output_error pre { 96 | background-color: #ffeeee; 97 | } 98 | 99 | .cm-header-1, .rendered_html h1 { 100 | font-family: "Charis SIL", "Hoefler Text", Garamond, Palatino, serif; 101 | font-size: 24px; 102 | font-variant: small-caps; 103 | text-rendering: auto; 104 | letter-spacing: 0.06em; 105 | font-variant-ligatures: contextual no-historical-ligatures common-ligatures; 106 | -webkit-font-smoothing: antialiased; 107 | -moz-osx-font-smoothing: grayscale; 108 | text-rendering: optimizeLegibility; 109 | } 110 | 111 | .cm-header-2, .rendered_html h2 { 112 | font-family: "Charis SIL", "Hoefler Text", Garamond, Palatino, serif; 113 | font-size: 21px; 114 | font-weight: bold; 115 | font-variant-ligatures: contextual no-historical-ligatures common-ligatures; 116 | -webkit-font-smoothing: antialiased; 117 | -moz-osx-font-smoothing: grayscale; 118 | text-rendering: optimizeLegibility; 119 | } 120 | 121 | .cm-header-3, .rendered_html h3 { 122 | font-family: "Charis SIL", "Hoefler Text", Garamond, Palatino, serif; 123 | font-size: 19px; 124 | font-weight: bold; 125 | -webkit-font-smoothing: antialiased; 126 | -moz-osx-font-smoothing: grayscale; 127 | text-rendering: optimizeLegibility; 128 | font-variant-ligatures: contextual no-historical-ligatures common-ligatures; 129 | } 130 | 131 | .cm-header-4, .rendered_html h4, .cm-header-5, .rendered_html h5, .cm-header-6, .rendered_html h6 { 132 | font-family: "Charis SIL", "Hoefler Text", Garamond, Palatino, serif; 133 | font-size: 18px; 134 | font-weight: bold; 135 | -webkit-font-smoothing: antialiased; 136 | -moz-osx-font-smoothing: grayscale; 137 | text-rendering: optimizeLegibility; 138 | font-variant-ligatures: contextual no-historical-ligatures common-ligatures; 139 | } 140 | 141 | .rendered_html td { 142 | font-variant-numeric: tabular-nums; 143 | } 144 | -------------------------------------------------------------------------------- /doc/custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiahao/jupyter-stylesheet/29bfae193403a42141bc205be5efdc9e5119b675/doc/custom.png -------------------------------------------------------------------------------- /doc/ipython3default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiahao/jupyter-stylesheet/29bfae193403a42141bc205be5efdc9e5119b675/doc/ipython3default.png --------------------------------------------------------------------------------