Tangram style (modified from Refill) pushing the type layout engine

typography.yaml

# Refill provides a high contrast, black & white basemap useful for data visualization.
# Give OpenStreetMap data a professional basemap skin using the Tangram graphics library
# and Mapzen's versatile Vector Tiles.
#
# Refill is a modern GL take on Geraldine's work on Toner for Stamen as part of their
# great CityTracking project. Please use and adapt the open source scene file in
# your own projects!
#
# Authors: Geraldine Sarmiento, Nathaniel V. Kelso
# Read more: https://github.com/tangrams/refill-style
#

import:
    - themes/refill-icons.yaml
    - themes/color-black.yaml
    - themes/label-5.yaml

global:
    # Sign up for a Mapzen API key to enjoy higher rate limits
    # https://mapzen.com/documentation/overview/#developer-accounts-and-api-keys
    sdk_api_key: 'cZwQZWzpRpik8sd6R0GUnA'     # set this value to your Mapzen API key

    #ux/ui
    ux_language_text_source: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;
        }
    ux_language_text_source_road_ref_and_name: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;

            /*
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            if(feature.ref && name) {
                return (feature.ref + ' ' + name);
            } else {
                return name;
            }
            */
        }
    ux_language_text_source_road_ref_and_name_short: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;

            /*
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            if (feature.ref && (feature.ref.length < 6) && name) {
                return feature.ref + ' ' + name;
            } else {
                return name;
            }
            */
        }

    # labels:
    text_font_family:      'Open Sans'            # branding in asperational Unicode, yo (or Helvetica)


sources:
    mapzen:
        type: MVT #GeoJSON, MVT, TopoJSON
        url:  https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt
        url_params:
            api_key: global.sdk_api_key
        tile_size: 512
        max_zoom: 16

cameras:
    isometric:
        type: isometric

styles:
    text-blend-order:
        base: text
        blend_order: 1

scene:
    background:
        color: global.white_color

fonts:
    Open Sans:
        - weight: 300 # Light
          url: fonts/OpenSans-Light.woff
        - weight: normal # Regular
          url: fonts/OpenSans-Regular.woff
        - weight: normal # Regular
          style: italic
          url: fonts/OpenSans-Italic.woff
        - weight: 600 # Semi Bold
          url: fonts/OpenSans-Semibold.woff
        - weight: 600 # Semi Bold
          style: italic
          url: fonts/OpenSans-SemiboldItalic.woff
        - weight: bold
          url: fonts/OpenSans-Bold.woff
    Montserrat:
        - weight: normal
          #url: https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff
          url: fonts/Montserrat-Regular.woff
        - weight: 500
          #url: https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweqLy3K7m9xj_O5xwN3SdQNs.woff
          url: fonts/Montserrat-Medium.woff
        - weight: 700
          #url: https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcnbFhgvWbfSbdVg11QabG8w.woff
          url: fonts/Montserrat-Bold.woff


layers:
    roads:
        data: { source: mapzen, layer: roads }
        draw:
            text-blend-order:
                text_source: global.ux_language_text_source
                visible: true    # labels are enabled by each layer below
                font:
                    family: global.text_font_family
                    weight: normal
                    fill: global.black_color
                repeat_distance: 0px
                text_wrap: true
                move_into_tile: false
                placement: spaced
                placement_min_length_ratio: 0
                placement_spacing: 0px
                collide: false
                font:
                    size: 8px
        highway:
            filter: { kind: highway }
            labels-highway:
                draw:
                    text-blend-order:
                        priority: 50
                        text_source: global.ux_language_text_source_road_ref_and_name
                        font:
                            fill: global.black_color
                            weight: 600
                            # size: 11px
                            stroke: { color: global.text_stroke, width: 4px }

        major_road:
            filter: { kind: major_road }
            # default style
            trunk_primary:
                filter: { kind_detail: [trunk, primary] }
                routes:
                    filter: { ref: true }
                    labels-trunk_primary-route-z13-z14:
                        draw:
                            text-blend-order:
                                priority: 51
                                text_source: global.ux_language_text_source_road_ref_and_name
                                font:
                                    fill: global.dark_color
                                    # size: 11px
                                    stroke: { color: global.text_stroke, width: 3px }
            secondary:
                filter: { kind_detail: secondary }
                routes:
                    filter: { ref: true }
                    labels-secondary-routes-z13-z14:
                        draw:
                            text-blend-order:
                                priority: 56
                                text_source: global.ux_language_text_source_road_ref_and_name_short
                                font:
                                    fill: global.black_color
                                    # size: 11px
                                    stroke: { color: global.text_stroke, width: 4px }
                labels-secondary:
                    draw:
                        text-blend-order:
                            priority: 56
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [[13, global.dark_color], [17, global.black_color]]
                                # size: [[13, 10px], [17, 13px]]
                                stroke: { color: global.text_stroke, width: 4px }
            tertiary:
                filter: { kind_detail: [tertiary, tertiary_link] }
                labels-tertiary:
                    draw:
                        text-blend-order:
                            priority: 57
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [[13, global.dark_color], [18, global.black_color]]
                                # size: [[13, 10px], [17, 13px]]
                                stroke: { color: global.text_stroke, width: 5px }
        minor_road:
            filter: { kind: minor_road, not: { kind_detail: service } }
            labels-minor_road:
                draw:
                    text-blend-order:
                        priority: 59
                        text_source: name
                        font:
                            fill: [[15, global.mid_color], [18, global.black_color]]
                            # size: [[15, 10px], [18, 13px]]
                            stroke: { color: global.text_stroke, width: 4px }
        service_road:
            filter: { kind: minor_road, kind_detail: service }
            labels-service_road:
                draw:
                    text-blend-order:
                        priority: 60
                        text_source: name
                        font:
                            fill: [[17, global.dark_color], [18, global.black_color]]
                            # size: [[17, 11px], [18, 12px]]
                            stroke: { color: global.text_stroke, width: 4px }

        path:
            filter:
                all:
                    - kind: [path, portage_way]
                not:
                    - kind_detail: [steps, track, pier]
            labels-path:
                draw:
                    text-blend-order:
                        priority: 61
                        text_source: name
                        font:
                            fill: global.dark_color
                            # size: 12px
                            stroke: { color: global.text_stroke, width: 4px }
        track:
            filter: { kind: path, kind_detail: track }
            labels-track:
                draw:
                    text-blend-order:
                        priority: 61
                        text_source: name
                        font:
                            fill: global.dark_color
                            # size: 12px
                            stroke: { color: global.text_stroke, width: 4px }

        steps:
            filter:
                all:
                    - kind: path
                    - kind_detail: steps
            labels-steps:
                draw:
                    text-blend-order:
                        priority: 62
                        text_source: name
                        font:
                            fill: global.mid_color
                            # size: 11px
                            stroke: { color: global.text_stroke, width: 4px }